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

}
/*
 * Tema NatoDigital Workspace - layout inspirado no login do painel
 * da vDatacenter: box de login na parte inferior esquerda, fundo
 * branco com linhas diagonais e pontos no roxo da marca (#763c96).
 */

/* ===== Fundo da tela de login: branco com linhas/pontos roxos ===== */
.login-ui,
.login-ui.initial {
    background-color: #ffffff !important;
    background-image:
        linear-gradient(115deg, transparent 49.85%, rgba(118,60,150,0.28) 49.95%, rgba(118,60,150,0.28) 50.05%, transparent 50.15%),
        linear-gradient(80deg,  transparent 49.9%,  rgba(118,60,150,0.16) 50%,   transparent 50.1%),
        linear-gradient(150deg, transparent 49.9%,  rgba(118,60,150,0.13) 50%,   transparent 50.1%),
        radial-gradient(circle at 18% 22%, rgba(118,60,150,0.85) 0, rgba(118,60,150,0.85) 1.5px, transparent 2.5px),
        radial-gradient(circle at 32% 38%, rgba(118,60,150,0.65) 0, rgba(118,60,150,0.65) 1px,   transparent 2px),
        radial-gradient(circle at 71% 64%, rgba(118,60,150,0.55) 0, rgba(118,60,150,0.55) 1px,   transparent 2px),
        radial-gradient(circle at 86% 18%, rgba(118,60,150,0.50) 0, rgba(118,60,150,0.50) 1px,   transparent 2px),
        radial-gradient(circle at 55% 80%, rgba(118,60,150,0.45) 0, rgba(118,60,150,0.45) 1px,   transparent 2px),
        linear-gradient(180deg, #ffffff 0%, #faf8fc 60%, #f3edf8 100%) !important;
}

/* ===== Posicionamento: box na parte inferior, a esquerda ===== */
.login-ui,
.login-ui.initial {
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
}

.login-ui .login-dialog-middle,
.login-ui.initial .login-dialog-middle {
    display: block !important;
    width: auto !important;
    vertical-align: bottom !important;
}

/* ===== Caixa de login: faixa escura ===== */
.login-ui .login-dialog,
.login-ui.initial .login-dialog {
    background: rgba(255, 255, 255, 0.97) !important;
    border: 1px solid #e4dcee;
    border-radius: 6px;
    box-shadow: 0 14px 48px rgba(52, 23, 71, 0.18);
    color: #2a2f36;
    padding: 2.2em 2.6em 2.4em;
    max-width: 420px;
    margin: 0 0 9vh 7vw !important;
}

/* ===== Logo oficial (wordmark branco) + subtitulo ===== */
.login-ui .login-dialog .logo {
    width: 100%;
    height: 118px;
    margin: 0 0 1.2em;
    background: url('app/ext/natodigital-branding/images/favicon.png') no-repeat center top;
    background-size: auto 84px !important;

    position: relative;
}

.login-ui .login-dialog .logo::after {
    content: "W O R K S P A C E";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    color: #3473b8;
    font-size: 0.95em;
    font-weight: 700;
    letter-spacing: 0.35em;
    white-space: nowrap;
}

/* ===== Campos ===== */
.login-ui .login-dialog .login-fields .field-header,
.login-ui .login-dialog label {
    color: #4a5560;
    font-weight: 600;
}

.login-ui .login-dialog input[type="text"],
.login-ui .login-dialog input[type="password"] {
    background: #ffffff;
    color: #1b2027;
    border: 1px solid #c9d2dc;
    border-radius: 3px;
    padding: 0.55em 0.7em;
}

.login-ui .login-dialog input[type="text"]:focus,
.login-ui .login-dialog input[type="password"]:focus {
    border-color: #3473b8;
    outline: none;
    box-shadow: 0 0 0 2px rgba(52, 115, 184, 0.35);
}

/* ===== Botao no roxo da marca ===== */
.login-ui .login-dialog input[type="submit"],
.login-ui .login-dialog button[type="submit"],
.login-ui .login-dialog .buttons input {
    background: #3473b8;
    color: #ffffff;
    border: none;
    border-radius: 3px;
    padding: 0.6em 1.8em;
    font-weight: 700;
    cursor: pointer;
    text-shadow: none;
    box-shadow: none;
    background-image: none;
}

.login-ui .login-dialog input[type="submit"]:hover,
.login-ui .login-dialog .buttons input:hover {
    background: #2a62a3;
}

/* ===== Mensagens de erro na faixa ===== */
.login-ui .login-dialog .login-error {
    color: #c0392b;
}

/* Remove qualquer marca d'agua/versao exibida na tela de login */
.login-ui .version,
.login-ui .login-dialog .version {
    display: none;
}

/* ===== Responsivo: em telas estreitas, centraliza ===== */
@media (max-width: 640px) {
    .login-ui,
    .login-ui.initial {
        align-items: center !important;
        justify-content: center !important;
    }
    .login-ui .login-dialog,
    .login-ui.initial .login-dialog {
        margin: 0 1em !important;
    }
}

/* ===== Tela "sessao encerrada" (logout) no mesmo tema ===== */
.logged-out-modal {
    background-color: #ffffff !important;
    background-image:
        linear-gradient(115deg, transparent 49.85%, rgba(118,60,150,0.28) 49.95%, rgba(118,60,150,0.28) 50.05%, transparent 50.15%),
        linear-gradient(80deg,  transparent 49.9%,  rgba(118,60,150,0.16) 50%,   transparent 50.1%),
        radial-gradient(circle at 18% 22%, rgba(118,60,150,0.85) 0, rgba(118,60,150,0.85) 1.5px, transparent 2.5px),
        radial-gradient(circle at 71% 64%, rgba(118,60,150,0.55) 0, rgba(118,60,150,0.55) 1px,   transparent 2px),
        linear-gradient(180deg, #ffffff 0%, #faf8fc 60%, #f3edf8 100%) !important;
}

.logged-out-modal .notification,
.logged-out-modal .modal .notification {
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid #e4dcee;
    border-radius: 6px;
    box-shadow: 0 14px 48px rgba(52, 23, 71, 0.18);
    padding: 2em 2.6em 2.2em;
}

/* Logo no topo do cartao */
.logged-out-modal .notification::before {
    content: "";
    display: block;
    width: 100%;
    height: 72px;
    margin-bottom: 1em;
    background: url('app/ext/natodigital-branding/images/favicon.png') no-repeat center center;
    background-size: auto 64px;
}

.logged-out-modal .notification p {
    color: #2a2f36;
}

.logged-out-modal .notification button {
    background: #3473b8;
    color: #ffffff;
    border: none;
    border-radius: 3px;
    padding: 0.6em 1.8em;
    font-weight: 700;
    cursor: pointer;
    text-shadow: none;
    box-shadow: none;
    background-image: none;
}

.logged-out-modal .notification button:hover {
    background: #2a62a3;
}

/* Modal do guac-modal sem molduras padrao */
.logged-out-modal .modal,
.logged-out-modal guac-modal .modal {
    background: transparent;
    border: none;
    box-shadow: none;
}
/* Alca no topo da sessao: Tela cheia + Desconectar (js/session-bar.js).
 * --nd-sb-accent e a cor da fita (marca); cada vhost pode sobrescrever
 * as duas variaveis no CSS injetado pelo Nginx. */
.nd-sb {
    --nd-sb-accent: #f05922;
    --nd-sb-accent-hover: #d14a17;
    --nd-sb-danger: #e5484d;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    display: none;
    font-family: inherit;
    font-size: 13px;
    -webkit-user-select: none;
    user-select: none;
}

.nd-sb.nd-sb-active {
    display: block;
}

/* Fita recolhida; o ::before amplia a area de toque */
.nd-sb-handle {
    position: relative;
    display: block;
    width: 128px;
    height: 8px;
    margin: 0 auto;
    padding: 0;
    border: none;
    border-radius: 0 0 6px 6px;
    background: var(--nd-sb-accent);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: background 0.15s;
}

.nd-sb-handle::before {
    content: "";
    position: absolute;
    left: -16px;
    right: -16px;
    top: 0;
    height: 22px;
}

.nd-sb-handle:hover {
    background: var(--nd-sb-accent-hover);
}

.nd-sb-panel {
    position: absolute;
    top: 0;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 0 0 10px 10px;
    background: rgba(20, 20, 20, 0.82);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -100%);
    transition: transform 0.18s ease-out, opacity 0.18s ease-out;
}

.nd-sb.nd-sb-open .nd-sb-panel {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.nd-sb.nd-sb-open .nd-sb-handle {
    visibility: hidden;
}

.nd-sb-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    min-width: 0;
    margin: 0;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    background: transparent;
    color: #ffffff;
    font: inherit;
    font-weight: 600;
    line-height: 1;
    text-transform: none;
    letter-spacing: 0;
    box-shadow: none;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

.nd-sb-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.55);
}

.nd-sb-btn svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nd-sb-btn[hidden] {
    display: none;
}

.nd-sb-disc {
    color: #ffb4b6;
    border-color: rgba(229, 72, 77, 0.6);
}

.nd-sb-disc:hover {
    background: rgba(229, 72, 77, 0.2);
    border-color: var(--nd-sb-danger);
}

.nd-sb-disc.nd-sb-confirm,
.nd-sb-disc.nd-sb-confirm:hover {
    background: var(--nd-sb-danger);
    border-color: var(--nd-sb-danger);
    color: #ffffff;
}

.nd-sb-collapse {
    width: 30px;
    padding: 0;
    justify-content: center;
    border-color: transparent;
}

@media (max-width: 480px) {
    .nd-sb-btn {
        height: 36px;
    }
}