/*
 * 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;

}
/*
 * wman-theme 1.5 - tema visual da tela de login do Guacamole (WMAN)
 * Extensao CSS/JS que restiliza o DOM padrao do Angular (app/login/templates/login.html).
 * Nao substitui o WAR nem os templates originais - apenas sobrepoe CSS e injeta o
 * painel de branding via JS, portanto sobrevive a atualizacoes do guacamole.war.
 *
 * IMPORTANTE: toda regra abaixo esta escopada a "div.login-ui" (ou a algo
 * dentro dele) - nao existe NENHUMA regra em "html", "body" ou seletores
 * globais soltos. Isso e proposital: o tema so pode afetar a tela de login,
 * nunca as telas pos-login (conexoes, configuracoes etc). Ja aconteceu de
 * uma versao anterior vazar um "html, body { background }" global e deixar
 * as demais telas ilegiveis - nao repetir esse erro.
 *
 * v1.3: aplica o layout revisado e aprovado -
 *   - bullets de recursos do servico de volta (criptografia, acesso via
 *     navegador, suporte WMAN)
 *   - caixa de login como cartao (fundo, borda, sombra) em vez de campos soltos
 *   - conteudo do painel esquerdo centralizado vertical E horizontalmente
 *   - circulos decorativos trocados por um selo bem sutil do logotipo
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --wman-bg: #0d0f0a;
    --wman-bg-panel: #101309;
    --wman-accent: #8bc53f;
    --wman-accent-soft: rgba(139,197,63,0.14);
    --wman-text: #ffffff;
    --wman-text-dim: #b7bdae;
    --wman-text-dimmer: #6f7566;
    --wman-border: #262b1c;
    --wman-field-bg: #181c11;
}

/* ---------- Escopo raiz: div.login-ui e somente ele ---------- */
div.login-ui {
    display: flex !important;
    align-items: stretch;
    justify-content: stretch;
    min-height: 100vh;
    background: var(--wman-bg) !important;
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

div.login-ui p.login-error {
    z-index: 50;
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: #3a1414 !important;
    border: 1px solid #6b2323 !important;
    color: #f2b4b4 !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
}

/* Esconde texto de ajuda nativo (helpText) e o logo/versao padrao - usamos
   nosso proprio cabecalho injetado via JS */
div.login-ui .login-form > p[ng-show],
div.login-ui .login-form > .logo,
div.login-ui .login-form > .version {
    display: none !important;
}

/* ---------- Painel esquerdo de branding, injetado via wman-theme.js ---------- */
div.login-ui .wman-left {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 56px 64px;
    background: radial-gradient(900px 600px at 50% 30%, var(--wman-accent-soft), transparent 65%), #0a0c07;
    overflow: hidden;
    box-sizing: border-box;
    text-align: center;
}

@media (max-width: 860px) {
    div.login-ui .wman-left { display: none; }
}

div.login-ui .wman-left-content {
    position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; max-width: 480px;
}

div.login-ui .wman-logo { height: 42px; width: auto; display: block; }

div.login-ui .wman-hero { margin-top: 32px; }
div.login-ui .wman-hero h1 { margin: 0; font-size: 32px; line-height: 1.28; font-weight: 700; letter-spacing: -0.01em; color: var(--wman-text); }
div.login-ui .wman-hero h1 span { color: var(--wman-accent); }

div.login-ui .wman-features { margin-top: 40px; display: flex; flex-direction: column; gap: 16px; text-align: left; width: 100%; max-width: 380px; }
div.login-ui .wman-feature { display: flex; align-items: flex-start; gap: 12px; }
div.login-ui .wman-feature .wman-icon {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px;
    background: rgba(139,197,63,0.12); display: flex; align-items: center; justify-content: center;
}
div.login-ui .wman-feature span { font-size: 13.5px; line-height: 1.5; color: var(--wman-text-dim); padding-top: 4px; }

div.login-ui .wman-left-footer {
    display: flex; align-items: center; gap: 10px;
    position: absolute; left: 64px; bottom: 40px; z-index: 1;
}
div.login-ui .wman-left-footer img { height: 15px; width: auto; }
div.login-ui .wman-left-footer span { font-size: 12.5px; color: var(--wman-text-dimmer); }
div.login-ui .wman-left-footer strong { color: var(--wman-text-dim); font-weight: 600; }

/* ---------- Painel direito: formulario nativo do Guacamole restilizado ---------- */
div.login-ui .login-dialog-middle {
    flex: 1;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 56px 48px;
    background: var(--wman-bg-panel);
    box-sizing: border-box;
}

div.login-ui .login-dialog.notification {
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: 26px;
    padding: 36px 32px !important;
    background: #14170e !important;
    border: 1px solid var(--wman-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 60px -20px rgba(0,0,0,0.55) !important;
}

div.login-ui .login-form {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

div.login-ui .wman-form-header h2 { margin: 0 0 8px 0; font-size: 24px; font-weight: 700; color: var(--wman-text); letter-spacing: -0.01em; }
div.login-ui .wman-form-header p { margin: 0; font-size: 13.5px; color: var(--wman-text-dim); line-height: 1.5; }

div.login-ui .login-fields { display: flex; flex-direction: column; gap: 18px; }

div.login-ui .labeled-field { display: flex; flex-direction: column; gap: 7px; }
/* O CSS nativo do Guacamole posiciona .field-header como rotulo-fantasma
   atras do campo (position:absolute; z-index:-1; opacity:0.5), pensado
   para fundo transparente. Como nosso campo tem fundo solido, reescrevemos
   para um rotulo normal, acima do campo, sempre visivel. */
div.login-ui .field-header {
    position: static !important;
    z-index: auto !important;
    overflow: visible !important;
    opacity: 1 !important;
    margin: 0 !important;
}
div.login-ui .field-header label {
    display: block;
    font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--wman-text-dimmer);
}

div.login-ui .form-field {
    background: var(--wman-field-bg);
    border: 1px solid var(--wman-border);
    border-radius: 8px;
    height: 48px;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}
div.login-ui .form-field:has(input:focus) {
    border-color: var(--wman-accent);
    box-shadow: 0 0 0 3px rgba(139,197,63,0.18);
}

div.login-ui .form-field input[type="text"],
div.login-ui .form-field input[type="password"],
div.login-ui .form-field input[type="email"] {
    border: none !important;
    background: transparent !important;
    color: var(--wman-text) !important;
    font-size: 14.5px !important;
    height: 46px !important;
    padding: 0 14px !important;
    width: auto !important;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
    box-sizing: border-box;
}
div.login-ui .form-field input:focus { outline: none; }
div.login-ui .form-field input::placeholder { color: var(--wman-text-dimmer) !important; opacity: 1; }

/* Mantem o campo + o icone nativo de mostrar/ocultar senha na mesma linha,
   dentro da caixa escura, em vez de deixar o icone quebrar para baixo (o
   que empurrava seu title/tooltip nativo para perto do rodape). */
div.login-ui .password-field {
    display: flex !important;
    align-items: center;
    white-space: nowrap;
    height: 100%;
}
div.login-ui .password-field .icon.toggle-password {
    flex-shrink: 0;
    margin-right: 12px;
    opacity: 0.55;
    filter: invert(1) brightness(1.8);
}
div.login-ui .password-field .icon.toggle-password:hover {
    opacity: 0.9;
}

div.login-ui .wman-extra-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: -8px;
}
div.login-ui .wman-remember {
    display: flex; align-items: center; gap: 9px; cursor: default; user-select: none;
}
div.login-ui .wman-remember input {
    width: 16px; height: 16px; accent-color: var(--wman-accent); margin: 0;
}
div.login-ui .wman-remember span { font-size: 13px; color: var(--wman-text-dim); }
div.login-ui .wman-forgot { font-size: 13px; color: var(--wman-accent); cursor: default; }

div.login-ui .buttons { display: flex; }
div.login-ui .buttons input[type="submit"].login {
    height: 50px; border: none; border-radius: 8px; background: var(--wman-accent) !important; color: #10130b !important;
    font-size: 15px; font-weight: 700; letter-spacing: 0.01em; cursor: pointer; width: 100%;
}
div.login-ui .buttons input[type="submit"].login:hover { background: #9ed455 !important; }