/* =========================================================================
   EVERCO — identidade visual do portal Guacamole (uso interno)
   Paleta oficial: Dark #0E2622 · Mint #7BD0AC · Green Tint #C4E6D5
                   Paper #F4F4F4 · Fog #D4D4D4 · Graphite #2A2A2A · Steel #5C5C5C
   Tipografia: Barlow (texto/títulos) · IBM Plex Mono (dados e UI técnica)

   NOTAS DE IMPLEMENTAÇÃO (v2 — 08/09/2026)
   1. O CSS da extensão é concatenado no `app.css`, servido na RAIZ do webapp.
      Portanto url() aqui resolve a partir de /guacamole/ — o caminho correto é
      'app/ext/everco-branding/...'. Caminho relativo com '../' cai fora do
      contexto e dá 404 (foi o defeito da v1).
   2. NÃO estilizar `.header`, `#header` nem `.main-header`: na 1.6 `.header` é o
      cabeçalho das SEÇÕES da home ("Conexões recentes", "Todas as conexões").
      Escurecer esses blocos apagou os títulos na v1.
   3. Onde o fundo é forçado, a cor do texto é declarada junto. Nunca presumir.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;500;700;900&family=IBM+Plex+Mono:wght@400;500;700&display=swap');

:root {
    --everco-dark:   #0E2622;
    --everco-dark-2: #14332E;
    --everco-mint:   #7BD0AC;
    --everco-mint-2: #93DCBD;
    --everco-tint:   #C4E6D5;
    --everco-black:  #0A0A0A;
    --everco-paper:  #F4F4F4;
    --everco-fog:    #D4D4D4;
    --everco-graphite:#2A2A2A;
    --everco-steel:  #5C5C5C;
    --everco-sans:   'Barlow', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --everco-mono:   'IBM Plex Mono', 'Cascadia Mono', Consolas, monospace;
}

/* ---------------------------------------------------------------- base --- */

body, div, span, p, td, th, label, input, select, textarea, button, a {
    font-family: var(--everco-sans);
}

.username, .user-menu .menu-title,
.history .username, .history .duration, .history .startDate {
    font-family: var(--everco-mono);
}

/* --------------------------------------------------------------- login --- */

/* Fundo institucional. `!important` porque o app.css declara o fundo do
   .login-ui e vence por ordem de carga em algumas rotas. */
.login-ui {
    background: var(--everco-dark) !important;
    background-image: radial-gradient(circle at 50% 8%, var(--everco-dark-2) 0%, var(--everco-dark) 58%, var(--everco-black) 100%) !important;
}

/* A logo oficial substitui a arte padrão do Guacamole. Arte em arquivo,
   proporção travada — nunca recriada nem distorcida. */
.login-ui .login-dialog .logo,
.login-ui .login-dialog img.logo,
.login-ui .login-dialog h2,
.login-ui .login-dialog .title {
    display: none !important;
}

.login-ui .login-dialog {
    position: relative;
    padding-top: 7em !important;
    background: var(--everco-dark-2) !important;
    background-image: none !important;
    border: 1px solid rgba(123, 208, 172, 0.30) !important;
    border-radius: 10px !important;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.5) !important;
}

/* Contraste explícito: tudo que é texto dentro do card fica claro. */
.login-ui .login-dialog,
.login-ui .login-dialog p,
.login-ui .login-dialog span,
.login-ui .login-dialog label,
.login-ui .login-dialog div,
.login-ui .login-dialog a {
    color: #FFFFFF !important;
}

.login-ui .login-dialog::before {
    content: '';
    position: absolute;
    top: 2.1em;
    left: 50%;
    transform: translateX(-50%);
    width: 13em;
    height: 2.6em;
    background-image: url('app/ext/everco-branding/images/everco-logo-branco.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

/* Faixa mint de assinatura no topo do card */
.login-ui .login-dialog::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: 10px 10px 0 0;
    background: linear-gradient(90deg, var(--everco-mint) 0%, var(--everco-tint) 100%);
}

/* Rodapé de versão: discreto, e sem herdar o estilo de botão */
.login-ui .version,
.login-ui .version *,
.login-ui .login-dialog .version,
.login-ui .login-dialog .version * {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.38) !important;
    font-family: var(--everco-mono) !important;
    font-size: 0.72em !important;
    font-weight: 400 !important;
}

.login-ui .login-dialog input[type="text"],
.login-ui .login-dialog input[type="password"] {
    background: #FFFFFF !important;
    border: 1px solid var(--everco-fog) !important;
    border-radius: 4px !important;
    color: var(--everco-graphite) !important;
    font-family: var(--everco-mono) !important;
}

.login-ui .login-dialog input[type="text"]:focus,
.login-ui .login-dialog input[type="password"]:focus {
    border-color: var(--everco-mint) !important;
    box-shadow: 0 0 0 2px rgba(123, 208, 172, 0.35) !important;
    outline: none !important;
}

/* Placeholders legíveis sobre campo branco */
.login-ui .login-dialog input::placeholder {
    color: var(--everco-steel) !important;
    opacity: 1;
}

/* Erro de autenticação: legível sobre fundo escuro */
.login-ui .login-error,
.login-ui .error,
.login-ui .error * {
    background-color: rgba(200, 60, 60, 0.16) !important;
    border: 1px solid rgba(200, 60, 60, 0.45) !important;
    border-radius: 4px !important;
    color: #FFD9D9 !important;
}

/* -------------------------------------------------- botões (todo o app) --- */

button, input[type="submit"],
.notification .buttons button,
.guac-error .buttons button,
.client .buttons button {
    background-color: var(--everco-mint) !important;
    background-image: none !important;
    color: var(--everco-dark) !important;
    border: 1px solid var(--everco-mint) !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

button:hover, input[type="submit"]:hover,
.notification .buttons button:hover,
.guac-error .buttons button:hover,
.client .buttons button:hover {
    background-color: var(--everco-mint-2) !important;
    border-color: var(--everco-mint-2) !important;
}

/* Ações destrutivas continuam legíveis como destrutivas */
button.danger, button[ng-click*="delete"], button[ng-click*="Delete"] {
    background-color: #C0504D !important;
    border-color: #C0504D !important;
    color: #FFFFFF !important;
}

/* ---------------------------------------------- barra de marca (patch) --- */

.everco-brandbar {
    display: flex;
    align-items: center;
    gap: 0.9em;
    padding: 0.8em 1.2em;
    background: var(--everco-dark);
    border-bottom: 2px solid var(--everco-mint);
}

.everco-brandbar img {
    height: 26px;
    width: auto;                /* proporção travada */
    display: block;
}

.everco-brandbar .everco-brandbar-label {
    font-family: var(--everco-mono);
    font-size: 0.78em;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--everco-tint);
    padding-left: 0.9em;
    border-left: 1px solid rgba(196, 230, 213, 0.28);
}

/* ------------------------------------------- home: acentos, sem inverter --- */

/* Detalhe mint nos títulos de seção, preservando o fundo e a cor originais.
   Nada de pintar `.header` — ver nota 2 no topo. */
.recent-connections h2, .all-connections h2,
.settings h2, .home h2 {
    border-left: 4px solid var(--everco-mint);
    padding-left: 0.6em;
}

/* ----------------------------------------------- cards de conexão --- */

.connection, .connection-group {
    border: 1px solid var(--everco-fog);
    border-radius: 6px;
    transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.connection:hover, .connection-group:hover {
    border-color: var(--everco-mint);
    box-shadow: 0 6px 18px rgba(14, 38, 34, 0.14);
    transform: translateY(-1px);
}

.connection .protocol {
    background-color: var(--everco-tint);
    border-radius: 4px;
}

/* --------------------------------------------- tabelas de settings --- */

.settings table.sorted thead th,
.settings table thead th {
    background-color: var(--everco-dark) !important;
    color: #FFFFFF !important;
    font-family: var(--everco-mono);
    font-size: 0.82em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.settings table.sorted thead th a,
.settings table thead th a {
    color: #FFFFFF !important;
}

.settings table.sorted tbody tr:nth-child(even) {
    background-color: rgba(196, 230, 213, 0.20);
}

.settings ul.tabs li.current a,
.settings .page-tabs .tab.current {
    border-bottom: 3px solid var(--everco-mint);
    font-weight: 700;
}

/* --------------------------------------- avisos de sessão / cliente --- */

.notification, .guac-error {
    border-top: 3px solid var(--everco-mint);
    border-radius: 6px;
}

/* A barra de marca é movida por JS para o topo do contêiner da home
   (ver js/everco-brand.js). Fica fixa no topo ao rolar a lista de conexões. */
.everco-brandbar {
    position: sticky;
    top: 0;
    z-index: 20;
}

/* ------------------------------------ remoção da seção "Conexões Recentes" ---
   Decisão de 08/09/2026: a seção não serve ao uso interno.
   ATENÇÃO: o `div.user-menu` (Configurações / Sair) vive DENTRO do
   `div.header` dessa seção — esconder o header inteiro tira o menu do
   usuário. Por isso escondemos apenas o bloco e o <h2> daquele header,
   ancorando no irmão seguinte (`:has(+ .recent-connections)`), que é o único
   jeito de distinguir os dois `.header` da home.
   Estrutura confirmada por inspeção do DOM em 08/09/2026:
     div.connection-list-ui > [ .everco-brandbar | .header | .recent-connections | .header | ... ] */
.connection-list-ui > .recent-connections {
    display: none !important;
}

.connection-list-ui > .header:has(+ .recent-connections) > h2 {
    display: none !important;
}

/* --------------------------------- posição da barra sem "salto" de layout ---
   O patch de HTML insere a barra ANTES de `.all-connections`, ou seja, no meio
   da página. Antes o JS a movia para o topo, e isso produzia um salto visível
   no carregamento (a barra aparecia embaixo e subia depois).
   Com o contêiner em flex-column + `order:-1`, ela nasce no topo já no PRIMEIRO
   paint, sem depender de JS. Verificado no DOM em 08/09/2026: as larguras dos
   filhos e o `.user-menu`/`.group-list-filter` não mudam com o flex. */
.connection-list-ui {
    display: flex;
    flex-direction: column;
}

.everco-brandbar {
    order: -1;
}
/* EVERCO - v2: arvore EVERCO / CLIENTES em dois niveis, com os servidores em cards (24/09/2026) */
.all-connections .group-list-page{display:flex;flex-direction:column;gap:26px}
.all-connections .connection-group,.all-connections .connection-group>.children,.all-connections .connection-group>.children>.list-item,.all-connections .list-item{border:0 !important;background:none !important;box-shadow:none !important}
.all-connections .connection-group>.children{padding-left:0 !important;border-left:0 !important;margin:0 !important}
.all-connections .connection-group>.children>.list-item::before,.all-connections .connection-group>.children>.list-item::after{display:none !important}
/* cabecalho comum */
.all-connections .connection-group.expandable>.caption{display:flex;align-items:center;gap:10px;cursor:pointer}
.all-connections .connection-group>.caption a.home-connection-group{text-decoration:none;display:flex;align-items:center;gap:10px;flex:1}
.all-connections .connection-group>.caption .icon.expand{margin:0}
.all-connections .connection-group>.caption[data-ev-count]::after{content:attr(data-ev-count);font-family:var(--everco-mono);font-size:11px;padding:3px 9px;border-radius:999px;margin-left:auto}
/* nivel 1: EVERCO / CLIENTES - faixa escura */
.all-connections .group-list-page>.list-item>.connection-group>.caption{background:var(--everco-dark);color:#fff;padding:11px 14px;border-radius:8px;border-left:4px solid var(--everco-mint)}
.all-connections .group-list-page>.list-item>.connection-group>.caption .icon.expand{filter:invert(1);opacity:.7}
.all-connections .group-list-page>.list-item>.connection-group>.caption .name,.all-connections .group-list-page>.list-item>.connection-group>.caption a.home-connection-group .name{color:#fff !important;font-family:var(--everco-sans);font-weight:700;font-size:16px;letter-spacing:.06em;text-transform:uppercase}
.all-connections .group-list-page>.list-item>.connection-group>.caption[data-ev-count]::after{color:var(--everco-mint);background:var(--everco-dark-2)}
/* container de subgrupos: coluna, com recuo */
.all-connections .connection-group>.children:has(>.list-item>.connection-group){display:flex !important;flex-direction:column;gap:14px;padding:14px 0 0 14px !important}
/* nivel 2: datacenter / empresa - subfaixa clara */
.all-connections .connection-group .connection-group>.caption{background:var(--everco-tint);padding:8px 12px;border-radius:6px;border-left:4px solid var(--everco-dark)}
.all-connections .connection-group .connection-group>.caption .name,.all-connections .connection-group .connection-group>.caption a.home-connection-group .name{color:var(--everco-dark) !important;font-family:var(--everco-sans);font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase}
.all-connections .connection-group .connection-group>.caption[data-ev-count]::after{color:var(--everco-dark);background:rgba(255,255,255,.6)}
/* grade de cards: qualquer .children que tenha conexoes diretas */
.all-connections .connection-group>.children:has(>.list-item>.connection){display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;padding:10px 2px 0 !important}
.all-connections .connection-group>.children>.list-item{margin:0}
.all-connections .connection>.caption{padding:0;border:0}
.all-connections .connection-group a.home-connection{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-height:74px;padding:12px 14px;background:#fff;border:1px solid var(--everco-fog);border-radius:8px;text-decoration:none;color:var(--everco-graphite);box-shadow:0 1px 2px rgba(0,0,0,.05);transition:border-color .12s,box-shadow .12s,transform .12s;position:relative}
.all-connections .connection-group a.home-connection:hover{border-color:var(--everco-mint);box-shadow:0 4px 14px rgba(14,38,34,.12);transform:translateY(-1px)}
.all-connections .connection-group a.home-connection .icon.type{margin:0;width:22px;height:22px;background-size:22px;filter:invert(27%) sepia(20%) saturate(900%) hue-rotate(115deg)}
.all-connections .connection-group a.home-connection .name{font-family:var(--everco-mono);font-size:13px;font-weight:600;color:var(--everco-dark);word-break:break-all;line-height:1.3}
.all-connections .connection-group a.home-connection::after{position:absolute;top:12px;right:12px;font-family:var(--everco-mono);font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--everco-dark);background:var(--everco-tint);padding:2px 7px;border-radius:4px}
.all-connections .connection-group a.home-connection:has(.icon.type.ssh)::after{content:"SSH"}
.all-connections .connection-group a.home-connection:has(.icon.type.rdp)::after{content:"RDP"}
.all-connections .connection-group a.home-connection:has(.icon.type.vnc)::after{content:"VNC"}
.all-connections .connection-group .connection:not(.empty) a.home-connection{border-color:var(--everco-mint);background:#F3FBF7}
.all-connections .connection-group .activeUserCount{font-size:11px;color:var(--everco-steel)}
/* ordem: data-ev-ordem e escrito pelo everco-faixas.js no .list-item de cada grupo */
.all-connections .group-list-page>.list-item,.all-connections .children>.list-item{order:50}
.all-connections .group-list-page>.list-item[data-ev-ordem="1"],.all-connections .children>.list-item[data-ev-ordem="1"]{order:1}
.all-connections .group-list-page>.list-item[data-ev-ordem="2"],.all-connections .children>.list-item[data-ev-ordem="2"]{order:2}
.all-connections .group-list-page>.list-item[data-ev-ordem="3"],.all-connections .children>.list-item[data-ev-ordem="3"]{order:3}
/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

/* Label/tag denoting the user that shared a connection */
.jdbc-share-tag {

    background: #0095ff;
    padding: 0.25em;

    -moz-border-radius:    0.25em;
    -webkit-border-radius: 0.25em;
    -khtml-border-radius:  0.25em;
    border-radius:         0.25em;

    color: white;
    font-size: 0.75em;
    font-weight: bold;

}