/* ============================================================================
   modern-theme.css
   Camada cosmética de modernização (carregada por último no layout).
   NÃO altera estrutura HTML, IDs, larguras/alturas usadas por JS, nem cores
   semânticas de status. Foco: tipografia, cores, sombras, espaçamento.
   Para reverter 100%, basta remover este arquivo dos layouts.

   Paleta: escala de cinzas (grafite -> claro) com acento cinza-azulado sóbrio.
   ============================================================================ */

:root {
    /* Escala de cinzas */
    --mt-900: #1f2226;
    /* grafite (navbar/topo) */
    --mt-800: #2b2f34;
    --mt-700: #3a3f45;
    --mt-600: #565c63;
    --mt-500: #767c84;
    /* texto secundário */
    --mt-400: #9aa0a7;
    --mt-300: #c9ced3;
    /* bordas */
    --mt-200: #e3e6e9;
    --mt-150: #eceef0;
    --mt-100: #f4f5f6;
    /* fundo geral */
    --mt-white: #ffffff;

    /* Acento neutro (cinza-azulado) */
    --mt-acento: #4a5560;
    --mt-acento-hover: #363f48;

    --mt-texto: #2b2f34;

    --mt-sombra-1: 0 1px 2px rgba(20, 22, 25, 0.06), 0 1px 3px rgba(20, 22, 25, 0.10);
    --mt-sombra-2: 0 2px 6px rgba(20, 22, 25, 0.10), 0 4px 14px rgba(20, 22, 25, 0.08);
    --mt-sombra-3: 0 8px 30px rgba(20, 22, 25, 0.18);

    --mt-transicao: all 0.18s ease-in-out;
    --mt-radius: 8px;
    --mt-radius-sm: 6px;
}

/* ---------------------------------------------------------------------------
   Tipografia e fundo geral
   --------------------------------------------------------------------------- */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    color: var(--mt-texto);
    background-color: var(--mt-100);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0.1px;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    font-weight: 600;
    color: var(--mt-900);
}

/* ---------------------------------------------------------------------------
   NAVBAR / TOPO — fundo grafite escuro, texto claro. Mudança de impacto.
   Mantém alturas; muda apenas cores/sombra.
   --------------------------------------------------------------------------- */
.navbar-default,
#topo {
    background-color: var(--mt-900) !important;
    background-image: none !important;
    border: none !important;
    border-bottom: 3px solid var(--mt-700) !important;
    box-shadow: var(--mt-sombra-2);
    color: #e7e9eb;
}

/* Texto e links do topo em tom claro para contrastar com o grafite.
   Itens de menu (navbar-nav) ficam mais claros e com peso um pouco maior
   para boa legibilidade sobre o fundo escuro. */
#topo,
#topo a,
.navbar-default .navbar-text,
.navbar-default .navbar-brand {
    color: #dfe2e5 !important;
}

.navbar-default .navbar-nav>li>a {
    color: #eef0f2 !important;
    font-weight: 600;
    transition: var(--mt-transicao);
}

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
}

/* Item de menu com dropdown ABERTO.
   IMPORTANTE: o componente linkMenu injeta class="active" em TODOS os itens
   (legado), e o personalizado.css/Bootstrap aplicam fundo claro no estado
   aberto/focado — isso deixava o item com FUNDO BRANCO e texto claro (sumindo).
   Aqui cobrimos TODAS as combinações de estado (.open, .active, :hover,
   :focus, :active) do link do topo, forçando fundo ESCURO sólido e texto claro
   para garantir contraste quando o menu abre. */
.navbar-default .navbar-nav>li>a,
.navbar-default .navbar-nav>li>a:link,
.navbar-default .navbar-nav>li>a:visited,
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:link,
.navbar-default .navbar-nav>.active>a:visited {
    background-color: transparent !important;
    color: #eef0f2 !important;
    font-weight: 600;
}

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
    background-color: rgba(255, 255, 255, 0.10) !important;
    color: #ffffff !important;
}

/* Estado ABERTO (dropdown expandido) — vence sobre .active e sobre o oliva
   do personalizado.css. Fundo escuro sólido + texto branco = alto contraste. */
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:link,
.navbar-default .navbar-nav>.open>a:visited,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus,
.navbar-default .navbar-nav>.open>a:active,
.navbar-default .navbar-nav>.open.active>a,
.navbar-default .navbar-nav>.open.active>a:hover,
.navbar-default .navbar-nav>.open.active>a:focus {
    background-color: #34393f !important;
    color: #ffffff !important;
}

.navbar-default .navbar-nav>.dropdown>a .caret {
    border-top-color: #d7dade;
    border-bottom-color: #d7dade;
}

/* O caret/botões dentro do topo (busca etc.) precisam continuar legíveis */
#topo .form-control {
    height: 20px;
    padding: 0;
    box-shadow: none;
    background-color: #ffffff;
    color: var(--mt-texto);
    border-radius: 4px;
}

/* ---------------------------------------------------------------------------
   Dropdowns do menu — claros, com sombra forte e cantos arredondados.
   --------------------------------------------------------------------------- */
/* Dropdown do menu no TOPO (navbar escura): a caixa que abre também fica
   ESCURA (grafite), combinando com a navbar, em vez de branca.
   Escopo: apenas dropdowns dentro de #topo / .navbar (não afeta outros
   dropdowns do corpo da página). */
#topo .dropdown-menu,
.navbar .dropdown-menu {
    background-color: var(--mt-800) !important;
    border: 1px solid var(--mt-700) !important;
    border-radius: var(--mt-radius-sm);
    box-shadow: var(--mt-sombra-3);
    padding: 6px 0;
    margin-top: 2px;
}

/* Demais dropdowns (fora do topo) permanecem claros */
.dropdown-menu {
    background-color: var(--mt-white);
    border: 1px solid var(--mt-200);
    border-radius: var(--mt-radius-sm);
    box-shadow: var(--mt-sombra-3);
    padding: 6px 0;
    margin-top: 4px;
}

/* CAUSA RAIZ DA "FAIXA BRANCA": o componente linkMenu gera, para CADA item,
   um <li class="active"></li> VAZIO seguido do <li> real com o link:
       <li class="active"></li><li><a ...>Preencher</a></li>
   Esse <li.active> vazio não contém <a>, então ocupa uma linha em branco no
   dropdown (aparecendo como faixa branca) e desalinha o espaçamento.
   Como ele é sempre vazio e sem função, colapsamos TODO <li.active> direto do
   dropdown (não dependemos de :empty, que pode falhar por espaços internos).
   O link real fica no <li> seguinte (sem a classe .active), que é preservado.
   Escopo restrito ao dropdown. */
.dropdown-menu>li.active {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    background-image: none !important;
}

/* Itens de link do dropdown (genérico / dropdowns claros do corpo) */
.dropdown-menu>li>a {
    padding: 8px 18px;
    color: var(--mt-700) !important;
    font-weight: 400;
    transition: var(--mt-transicao);
}

.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
    background-color: var(--mt-150) !important;
    color: var(--mt-900) !important;
    font-weight: 600;
    padding-left: 22px;
}

/* Cabeçalhos de grupo em dropdowns claros */
.dropdown-header {
    color: var(--mt-800) !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.6px;
    padding: 8px 18px 4px;
}

.dropdown-menu .divider {
    background-color: var(--mt-200);
}

/* ===== Dropdown ESCURO do topo: cores claras para contraste ============== */

/* Links: texto claro sobre grafite */
#topo .dropdown-menu>li>a,
.navbar .dropdown-menu>li>a {
    color: #e2e5e8 !important;
    font-weight: 400;
}

/* Hover/focus: realce claro translúcido + texto branco */
#topo .dropdown-menu>li>a:hover,
#topo .dropdown-menu>li>a:focus,
.navbar .dropdown-menu>li>a:hover,
.navbar .dropdown-menu>li>a:focus {
    background-color: rgba(255, 255, 255, 0.10) !important;
    color: #ffffff !important;
    font-weight: 600;
}

/* Cabeçalhos de grupo: destaque claro/bold sobre o grafite */
#topo .dropdown-menu .dropdown-header,
.navbar .dropdown-menu .dropdown-header {
    color: #aeb4ba !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.6px;
    padding: 8px 18px 4px;
}

/* Divisores mais discretos no fundo escuro */
#topo .dropdown-menu .divider,
.navbar .dropdown-menu .divider {
    background-color: rgba(255, 255, 255, 0.10) !important;
}

/* ---------------------------------------------------------------------------
   CORPO — mais respiro no container principal.
   --------------------------------------------------------------------------- */
#corpo {
    margin-top: 20px;
    padding: 8px 0 24px;
}

/* ---------------------------------------------------------------------------
   BOTÕES — redesenhados: cantos, peso, transição e estados.
   Preserva a semântica de cor (success/danger/warning/info).
   --------------------------------------------------------------------------- */
.btn {
    border-radius: var(--mt-radius-sm);
    transition: var(--mt-transicao);
    font-weight: 600;
    padding: 7px 16px;
    border-width: 1px;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--mt-sombra-1);
}

.btn:active,
.btn.active {
    transform: translateY(0);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.14);
}

/* Botão default mais moderno */
.btn-default {
    background-color: var(--mt-white);
    border-color: var(--mt-300);
    color: var(--mt-700);
}

.btn-default:hover,
.btn-default:focus {
    background-color: var(--mt-100);
    border-color: var(--mt-400);
    color: var(--mt-900);
}

/* Botão primário em grafite (acento neutro) */
.btn-primary {
    background-color: var(--mt-acento);
    border-color: var(--mt-acento);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: var(--mt-acento-hover);
    border-color: var(--mt-acento-hover);
    color: #fff;
}

/* ---------------------------------------------------------------------------
   PAINÉIS / CARDS — sombra mais presente, cabeçalho marcado. Impacto visual.
   --------------------------------------------------------------------------- */
.panel,
.panel-default {
    border: 1px solid var(--mt-200);
    border-radius: var(--mt-radius);
    box-shadow: var(--mt-sombra-2);
    overflow: hidden;
    background-color: var(--mt-white);
}

.panel-default>.panel-heading {
    background-color: var(--mt-white);
    border-bottom: 1px solid var(--mt-200);
    color: var(--mt-900);
    font-weight: 600;
    padding: 12px 16px;
}

.panel-title {
    font-weight: 600;
}

/* ---------------------------------------------------------------------------
   TABELAS — limpas, cabeçalho em cinza, hover suave.
   --------------------------------------------------------------------------- */
.table-responsive,
.table {
    border-radius: var(--mt-radius);
    background-color: var(--mt-white);
}

.table>thead>tr>th {
    background-color: var(--mt-100);
    border-bottom: 2px solid var(--mt-200);
    color: var(--mt-500);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
}

.table-striped>tbody>tr:nth-child(odd)>td,
.table-striped>tbody>tr:nth-child(odd)>th {
    background-color: #fafbfc;
}

.table-hover>tbody>tr:hover {
    background-color: var(--mt-150);
}

.table-responsive tr:hover {
    border-left: 5px solid var(--mt-acento);
}

/* ---------------------------------------------------------------------------
   FORMULÁRIOS — foco visível (cinza-azulado), bordas suaves.
   Não altera dimensões do #topo .form-control (reafirmado acima).
   --------------------------------------------------------------------------- */
.form-control {
    border-radius: var(--mt-radius-sm);
    border-color: var(--mt-300);
    box-shadow: none;
    transition: var(--mt-transicao);
    color: var(--mt-texto);
}

.form-control:focus {
    border-color: var(--mt-acento);
    box-shadow: 0 0 0 3px rgba(74, 85, 96, 0.15);
}

.input-group-addon {
    border-radius: var(--mt-radius-sm);
    border-color: var(--mt-300);
    background-color: var(--mt-100);
    color: var(--mt-600);
}

/* ---------------------------------------------------------------------------
   MODAIS — cantos, sombra forte.
   --------------------------------------------------------------------------- */
.modal-content {
    border-radius: var(--mt-radius);
    border: none;
    box-shadow: var(--mt-sombra-3) !important;
    -webkit-box-shadow: var(--mt-sombra-3) !important;
}

.modal-header {
    border-bottom: 1px solid var(--mt-200);
    padding: 16px 20px;
}

.modal-footer {
    border-top: 1px solid var(--mt-200);
}

/* ---------------------------------------------------------------------------
   ALERTS / LABELS / BADGES
   --------------------------------------------------------------------------- */
.alert {
    border-radius: var(--mt-radius-sm);
    border: none;
    box-shadow: var(--mt-sombra-1);
}

.label,
.badge {
    font-weight: 600;
    letter-spacing: 0.2px;
}

.badge {
    background-color: var(--mt-600);
}

/* ---------------------------------------------------------------------------
   RODAPÉ — borda de acento neutra.
   --------------------------------------------------------------------------- */
.border-rodape {
    border-top: 2px solid var(--mt-300);
}

/* ---------------------------------------------------------------------------
   LOGIN — tela dedicada (#bodyLogin). Cartão moderno, centralizado, com
   campos maiores e botão de destaque. TODO o bloco é escopado a #bodyLogin,
   portanto NÃO afeta nenhuma outra tela do sistema.
   Não altera a view nem o JS; apenas o visual do formulário existente
   (#UsuarioLoginForm gerado pelo CakePHP) e seus campos.
   --------------------------------------------------------------------------- */

/* Fundo da tela: mantém a imagem inline definida no layout, apenas garante
   um overlay escuro suave para dar contraste ao cartão e cobre a viewport. */
#bodyLogin {
    min-height: 100vh;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    position: relative;
}

#bodyLogin::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(31, 34, 38, 0.55), rgba(31, 34, 38, 0.35));
    z-index: 0;
    pointer-events: none;
}

/* Container acima do overlay e centralizado verticalmente */
#bodyLogin>.container {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    max-width: 100%;
}

/* O formulário vira um "card" branco flutuante */
#bodyLogin #UsuarioLoginForm {
    background-color: var(--mt-white);
    width: 380px !important;
    max-width: 92vw;
    height: auto !important;
    padding: 40px 34px 34px !important;
    border-radius: 14px;
    box-shadow: var(--mt-sombra-3);
    text-align: center;
    margin: auto;
}

/* Reduz o excesso de <br/> do topo do formulário (colapsa o espaçamento
   herdado sem removê-los da view). */
#bodyLogin #UsuarioLoginForm br {
    display: none;
}

/* Campos maiores e modernos */
#bodyLogin #UsuarioLoginForm .form-group {
    margin-bottom: 16px;
    text-align: left;
}

#bodyLogin #UsuarioLoginForm input[type="text"],
#bodyLogin #UsuarioLoginForm input[type="password"],
#bodyLogin #UsuarioLoginForm .form-control {
    width: 100% !important;
    height: 46px;
    padding: 10px 14px;
    font-size: 15px;
    border: 1px solid var(--mt-300);
    border-radius: var(--mt-radius-sm);
    box-shadow: none;
    transition: var(--mt-transicao);
    margin: 0 0 4px 0 !important;
}

#bodyLogin #UsuarioLoginForm input[type="text"]:focus,
#bodyLogin #UsuarioLoginForm input[type="password"]:focus,
#bodyLogin #UsuarioLoginForm .form-control:focus {
    border-color: var(--mt-acento);
    box-shadow: 0 0 0 3px rgba(74, 85, 96, 0.15);
}

/* Botão "Entrar" com destaque (o markup usa input.btn-login-adm) */
#bodyLogin #UsuarioLoginForm .submit {
    margin-top: 22px;
}

#bodyLogin #UsuarioLoginForm .btn-login-adm {
    width: 100%;
    padding: 12px 16px;
    background-color: var(--mt-acento);
    border: none;
    border-radius: var(--mt-radius-sm);
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: var(--mt-transicao);
}

#bodyLogin #UsuarioLoginForm .btn-login-adm:hover {
    background-color: var(--mt-acento-hover);
    transform: translateY(-1px);
    box-shadow: var(--mt-sombra-1);
}

#bodyLogin #UsuarioLoginForm .btn-login-adm:active {
    transform: translateY(0);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.18);
}

/* Logos dentro do card ficam centralizados e com respiro */
#bodyLogin .logo-login-1,
#bodyLogin .logo-login-2 {
    display: block;
    margin: 0 auto 18px;
}

/* Logo do sistema no topo do card de login */
#bodyLogin #UsuarioLoginForm .logo-login-sistema {
    display: block;
    margin: 0 auto 24px;
    max-width: 180px;
    max-height: 70px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Mensagem de erro dentro/abaixo do card */
#bodyLogin .login-message,
#bodyLogin .alert {
    position: relative;
    z-index: 1;
    max-width: 380px;
    margin: 16px auto 0;
    border-radius: var(--mt-radius-sm);
    box-shadow: var(--mt-sombra-1);
}

/* ---------------------------------------------------------------------------
   SCROLLBAR — detalhe moderno (WebKit).
   --------------------------------------------------------------------------- */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--mt-100);
}

::-webkit-scrollbar-thumb {
    background: var(--mt-300);
    border-radius: 10px;
    border: 2px solid var(--mt-100);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--mt-500);
}

/* ---------------------------------------------------------------------------
   LINKS no corpo — hover em acento neutro (não afeta botões nem o topo).
   --------------------------------------------------------------------------- */
#corpo a:not(.btn):hover {
    color: var(--mt-acento-hover);
}

/* ---------------------------------------------------------------------------
   LISTA DE CHAMADOS (Chamados/get) — suavização das cores de status.
   As linhas recebem a cor de status via style inline (background-color),
   que é semântica (indica o status) e NÃO deve ser removida.
   Para suavizar sem perder a informação nem tocar na view/JS, sobrepomos
   uma camada branca semitransparente por cima da cor inline. A cor original
   continua "vazando" de forma discreta, deixando a tela mais leve.
   Escopo restrito: apenas <tr> dentro de .table nesta listagem.
   --------------------------------------------------------------------------- */
/* A tabela desta listagem é identificada pelos cabeçalhos .header-sort-chamados.
   Navegadores modernos usam :has(); mantemos também o seletor por vizinhança
   .pesquisa-busca-avancada como reforço. Ambos apontam para as MESMAS linhas. */
table.table:has(th.header-sort-chamados)>tbody>tr[id],
table.table:has(th.header-sort-chamados)>tr[id],
.pesquisa-busca-avancada~table.table>tbody>tr[id],
.pesquisa-busca-avancada~table.table>tr[id] {
    /* Camada branca ~55% cobrindo a cor de status inline (suave, mas visível) */
    background-image: linear-gradient(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55));
    transition: background-image 0.15s ease-in-out;
}

/* Ao passar o mouse, reduz a camada branca para reforçar a cor de status
   da linha em foco (facilita identificar o status). */
table.table:has(th.header-sort-chamados)>tbody>tr[id]:hover,
table.table:has(th.header-sort-chamados)>tr[id]:hover,
.pesquisa-busca-avancada~table.table>tbody>tr[id]:hover,
.pesquisa-busca-avancada~table.table>tr[id]:hover {
    background-image: linear-gradient(rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.30));
}

/* Células mais respiráveis e alinhadas nesta listagem */
table.table:has(th.header-sort-chamados)>tbody>tr>td,
table.table:has(th.header-sort-chamados)>tr>td,
.pesquisa-busca-avancada~table.table>tbody>tr>td,
.pesquisa-busca-avancada~table.table>tr>td {
    vertical-align: middle;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}