/* ==========================================================
   PORTAL ECOCLOUD
   Layout inspirado no Portal S3
   ========================================================== */

:root {
    --eco-dark: #0b1627;
    --eco-dark2: #153449;

    --eco-bg: #f5f7fa;
    --eco-white: #ffffff;

    --eco-title: #071c3b;
    --eco-text: #53637b;
    --eco-muted: #74839a;

    --eco-border: #cbd6e2;

    --eco-cyan: #23bfd1;
    --eco-cyan-dark: #14a5b8;
    --eco-cyan-light: #72d9f5;
}


/* ==========================================================
   RESET
   ========================================================== */

html,
body {
    margin: 0 !important;
    padding: 0 !important;

    width: 100% !important;
    height: 100% !important;

    background: var(--eco-bg) !important;

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif !important;
}


/* ==========================================================
   COMPONENTE GUACAMOLE
   ========================================================== */

guac-login {
    position: fixed !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    display: block !important;

    width: 100vw !important;
    height: 100vh !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* ==========================================================
   LAYOUT PRINCIPAL
   ========================================================== */

.login-ui {
    position: fixed !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    margin: 0 !important;
    padding: 0 !important;

    display: grid !important;

    grid-template-columns:
        minmax(430px, 48%)
        minmax(500px, 52%) !important;

    grid-template-rows: 100% !important;

    background: var(--eco-bg) !important;

    overflow: hidden !important;
}


/* ==========================================================
   PAINEL ESQUERDO
   ========================================================== */

.eco-left-panel {
    grid-column: 1 !important;
    grid-row: 1 !important;

    position: relative !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 0 !important;
    min-height: 0 !important;

    box-sizing: border-box !important;

    margin: 0 !important;

    padding:
        25px
        42px
        36px
        42px !important;

    overflow: hidden !important;

    color: #ffffff !important;

    background:
        radial-gradient(
            circle at 8% 92%,
            rgba(31, 193, 211, 0.18),
            transparent 28%
        ),
        radial-gradient(
            circle at 100% 0%,
            rgba(93, 200, 235, 0.16),
            transparent 33%
        ),
        linear-gradient(
            135deg,
            var(--eco-dark) 0%,
            #0d2033 55%,
            var(--eco-dark2) 100%
        ) !important;
}


/* ==========================================================
   LOGO CENTRALIZADO
   ========================================================== */

.eco-left-logo {
    position: relative !important;

    display: block !important;

    width: 230px !important;
    height: auto !important;

    max-width: 45% !important;

    margin: 0 auto !important;

    padding: 18px 20px !important;

    box-sizing: border-box !important;

    border-radius: 14px !important;

    background: var(--eco-cyan-light) !important;
}


/* ==========================================================
   CONTEÚDO ESQUERDO
   ========================================================== */

.eco-left-content {
    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    width: calc(100% - 84px) !important;
    max-width: 620px !important;

    transform: translate(-50%, -43%) !important;

    margin: 0 !important;

    text-align: center !important;
}


/* ==========================================================
   TEXTO PEQUENO / KICKER
   ========================================================== */

.eco-kicker {
    margin: 0 0 14px 0 !important;

    color: var(--eco-cyan) !important;

    font-size: 13px !important;
    font-weight: 800 !important;

    letter-spacing: 3px !important;

    text-transform: uppercase !important;

    text-align: center !important;
}


/* ==========================================================
   TÍTULO ESQUERDO
   ========================================================== */

.eco-left-content h1 {
    margin:
        18px
        0
        22px
        0 !important;

    max-width: 620px !important;

    color: #ffffff !important;

    font-size: clamp(44px, 4.4vw, 64px) !important;
    font-weight: 800 !important;

    line-height: 1.08 !important;

    letter-spacing: -2px !important;

    text-align: center !important;
}


/* ==========================================================
   DESCRIÇÃO ESQUERDA
   ========================================================== */

.eco-left-content p {
    max-width: 520px !important;

    margin: 0 auto !important;

    color: rgba(255, 255, 255, 0.88) !important;

    font-size: 17px !important;

    line-height: 1.55 !important;

    text-align: center !important;
}


/* ==========================================================
   AMBIENTE MONITORADO
   ========================================================== */

.eco-monitor {
    position: absolute !important;

    left: 50% !important;
    bottom: 38px !important;

    transform: translateX(-50%) !important;

    display: flex !important;

    align-items: center !important;

    gap: 10px !important;

    white-space: nowrap !important;

    color: #e2edf6 !important;

    font-size: 14px !important;
}


.eco-monitor span {
    display: block !important;

    width: 10px !important;
    height: 10px !important;

    flex: 0 0 10px !important;

    border-radius: 50% !important;

    background: var(--eco-cyan) !important;

    box-shadow:
        0 0 0 5px
        rgba(35, 191, 209, 0.12) !important;
}


/* ==========================================================
   PAINEL DIREITO
   ========================================================== */

.login-ui .login-dialog-middle {
    grid-column: 2 !important;
    grid-row: 1 !important;

    position: relative !important;

    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;

    padding:
        45px
        60px !important;

    box-sizing: border-box !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    background: var(--eco-bg) !important;

    overflow-y: auto !important;
}


/* ==========================================================
   CARD DO LOGIN
   ========================================================== */

.login-ui .login-dialog {
    position: relative !important;

    display: block !important;

    width: 100% !important;
    max-width: 460px !important;

    min-width: 0 !important;

    margin: 0 auto !important;
    padding: 0 !important;

    box-sizing: border-box !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    text-align: left !important;
}


/* ==========================================================
   ESCONDE IDENTIDADE ORIGINAL
   ========================================================== */

.login-ui .login-dialog .logo,
.login-ui .login-dialog .version {
    display: none !important;
}


/* ==========================================================
   CABEÇALHO DIREITO
   ========================================================== */

.eco-login-heading {
    display: block !important;

    width: 100% !important;

    margin:
        0
        0
        32px
        0 !important;

    padding: 0 !important;
}


.eco-login-heading .eco-kicker {
    margin-bottom: 16px !important;

    text-align: left !important;
}


.eco-login-heading h2 {
    margin:
        0
        0
        12px
        0 !important;

    padding: 0 !important;

    color: var(--eco-title) !important;

    font-size: 40px !important;
    font-weight: 800 !important;

    line-height: 1.08 !important;

    letter-spacing: -1.4px !important;

    text-transform: none !important;
}


.eco-login-heading p {
    margin: 0 !important;
    padding: 0 !important;

    color: var(--eco-text) !important;

    font-size: 16px !important;

    line-height: 1.5 !important;
}


/* ==========================================================
   FORMULÁRIO
   ========================================================== */

.login-ui .login-form {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


.login-ui .login-fields {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;
}


.login-ui .login-fields table {
    width: 100% !important;

    margin: 0 !important;
}


.login-ui .login-fields td {
    padding:
        0
        0
        12px
        0 !important;
}


/* ==========================================================
   LABELS
   ========================================================== */

.login-ui .login-fields label {
    color: var(--eco-title) !important;

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 14px !important;
    font-weight: 700 !important;
}


/* ==========================================================
   INPUTS
   ========================================================== */

.login-ui .login-fields input[type="text"],
.login-ui .login-fields input[type="password"],
.login-ui .login-fields input[type="number"],
.login-ui .login-fields input:not([type]) {
    width: 100% !important;

    height: 50px !important;

    box-sizing: border-box !important;

    margin:
        4px
        0
        4px
        0 !important;

    padding:
        9px
        15px !important;

    background: #ffffff !important;

    color: var(--eco-title) !important;

    border:
        1px solid var(--eco-border) !important;

    border-radius: 9px !important;

    outline: none !important;

    box-shadow: none !important;

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 15px !important;
}


.login-ui .login-fields input:focus {
    border-color: var(--eco-cyan) !important;

    box-shadow:
        0 0 0 3px
        rgba(35, 191, 209, 0.13) !important;
}


/* ==========================================================
   ÁREA DOS BOTÕES
   ========================================================== */

.login-ui .buttons {
    width: 100% !important;

    margin:
        10px
        0
        0
        0 !important;

    padding: 0 !important;

    text-align: center !important;
}


/* ==========================================================
   BOTÃO PRINCIPAL - ENTRAR
   ========================================================== */

.login-ui .buttons input[type="submit"] {
    display: block !important;

    width: 100% !important;
    max-width: 360px !important;

    height: 46px !important;

    margin:
        0
        auto
        8px
        auto !important;

    padding:
        0
        18px !important;

    box-sizing: border-box !important;

    background:
        linear-gradient(
            90deg,
            var(--eco-cyan-dark),
            var(--eco-cyan)
        ) !important;

    color: #ffffff !important;

    border: 0 !important;
    border-radius: 8px !important;

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 14px !important;
    font-weight: 700 !important;

    cursor: pointer !important;

    box-shadow:
        0 8px 18px
        rgba(20, 165, 184, 0.16) !important;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease !important;
}


.login-ui .buttons input[type="submit"]:hover {
    transform: translateY(-1px) !important;

    box-shadow:
        0 10px 22px
        rgba(20, 165, 184, 0.24) !important;
}


/* ==========================================================
   BOTÃO CONTINUAR - MAIS DISCRETO
   ========================================================== */

.login-ui .buttons input.continue-login {
    height: 40px !important;

    margin-top: 4px !important;

    background:
        transparent !important;

    color: var(--eco-cyan-dark) !important;

    border:
        1px solid rgba(20, 165, 184, 0.35) !important;

    box-shadow: none !important;

    font-size: 13px !important;

    font-weight: 600 !important;

    opacity: 0.78 !important;
}


.login-ui .buttons input.continue-login:hover {
    background:
        rgba(35, 191, 209, 0.06) !important;

    color: var(--eco-cyan-dark) !important;

    border-color:
        rgba(20, 165, 184, 0.65) !important;

    box-shadow: none !important;

    opacity: 1 !important;

    transform: none !important;
}


/* ==========================================================
   MENSAGEM DE SEGURANÇA
   ========================================================== */

.eco-security {
    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 8px !important;

    width: 100% !important;

    margin:
        24px
        0
        0
        0 !important;

    padding: 0 !important;

    box-sizing: border-box !important;

    color: var(--eco-muted) !important;

    font-size: 12px !important;

    line-height: 1.4 !important;

    text-align: center !important;
}


.eco-security span {
    display: inline-block !important;

    width: 8px !important;
    height: 8px !important;

    flex: 0 0 8px !important;

    background: var(--eco-cyan) !important;

    transform: rotate(45deg) !important;
}


/* ==========================================================
   SUPORTE
   ========================================================== */

.login-ui .login-dialog-middle::after {
    content: "Suporte ECO Sistemas";

    position: absolute !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 20px !important;

    display: block !important;

    width: 100% !important;

    color: #65768e !important;

    font-size: 13px !important;

    text-align: center !important;

    pointer-events: none !important;
}


/* ==========================================================
   ERRO
   ========================================================== */

.login-ui .login-error {
    position: fixed !important;

    top: 20px !important;
    right: 25px !important;

    z-index: 9999 !important;

    width: 410px !important;
    max-width: calc(100vw - 50px) !important;

    box-sizing: border-box !important;

    margin: 0 !important;

    padding:
        12px
        15px !important;

    color: #a73939 !important;

    background: #fff2f2 !important;

    border:
        1px solid #eecaca !important;

    border-radius: 8px !important;

    box-shadow:
        0 8px 24px
        rgba(0, 0, 0, 0.09) !important;

    font-size: 13px !important;
}


.login-ui .login-error:empty {
    display: none !important;
}


/* ==========================================================
   MODAIS / CONEXÃO
   ========================================================== */

.client-status-modal,
.connection-messages,
.modal,
.logged-out-modal,
.global-status-modal {
    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif !important;
}


/* ==========================================================
   TELAS MENORES
   ========================================================== */

@media (max-width: 1050px) {

    .login-ui {
        grid-template-columns:
            42%
            58% !important;
    }

    .eco-left-panel {
        padding:
            25px
            30px
            35px
            30px !important;
    }

    .eco-left-content {
        width: calc(100% - 60px) !important;
    }

    .eco-left-content h1 {
        font-size: 44px !important;
    }

    .eco-left-content p {
        font-size: 15px !important;
    }

    .login-ui .login-dialog-middle {
        padding:
            40px
            45px !important;
    }

    .eco-login-heading h2 {
        font-size: 36px !important;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 760px) {

    html,
    body {
        overflow: auto !important;
    }

    guac-login {
        position: relative !important;

        width: 100% !important;
        height: auto !important;
    }

    .login-ui {
        position: relative !important;

        display: block !important;

        width: 100% !important;
        height: auto !important;

        min-height: 100vh !important;

        overflow: visible !important;
    }

    .eco-left-panel {
        width: 100% !important;
        height: auto !important;

        min-height: 390px !important;

        padding:
            24px
            25px
            35px
            25px !important;
    }

    .eco-left-logo {
        width: 190px !important;
    }

    .eco-left-content {
        position: relative !important;

        left: auto !important;
        top: auto !important;

        width: 100% !important;

        margin-top: 45px !important;

        transform: none !important;
    }

    .eco-left-content h1 {
        font-size: 40px !important;
    }

    .eco-monitor {
        position: relative !important;

        left: auto !important;
        bottom: auto !important;

        transform: none !important;

        justify-content: center !important;

        margin-top: 35px !important;
    }

    .login-ui .login-dialog-middle {
        width: 100% !important;
        height: auto !important;

        min-height: 580px !important;

        padding:
            50px
            25px
            75px
            25px !important;
    }

    .eco-login-heading h2 {
        font-size: 34px !important;
    }

    .login-ui .buttons input[type="submit"] {
        max-width: none !important;
    }

}

/* ==========================================================
   CONTROLE CORRETO DOS BOTÕES DE AUTENTICAÇÃO
   ========================================================== */

/* Login inicial: mostra Entrar e esconde Continuar */
.login-ui.initial .buttons .login {
    display: block !important;
}

.login-ui.initial .buttons .continue-login {
    display: none !important;
}


/* Etapa adicional de autenticação:
   esconde Entrar e mostra Continuar */
.login-ui.continuation .buttons .login {
    display: none !important;
}

.login-ui.continuation .buttons .continue-login {
    display: block !important;

    width: 100% !important;
    max-width: 360px !important;

    height: 44px !important;

    margin: 0 auto !important;

    background:
        linear-gradient(
            90deg,
            var(--eco-cyan-dark),
            var(--eco-cyan)
        ) !important;

    color: #ffffff !important;

    border: 0 !important;
    border-radius: 8px !important;

    opacity: 1 !important;
}
/*
 * 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;

}