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

}
.totp-enroll p,.totp-details{font-size:.8em}.totp-qr-code{text-align:center}.totp-qr-code img{margin:1em;border:1px solid rgba(0,0,0,0.25);box-shadow:1px 1px 2px rgba(0,0,0,0.25);cursor:pointer}h3.totp-details-header{font-size:.8em}h3.totp-details-header::before{content:'▸ '}.totp-details-visible h3.totp-details-header::before{content:'▾ '}.totp-details,.totp-hide-details{display:none}.totp-details-visible .totp-details{display:table}.totp-details-visible .totp-hide-details{display:inline}.totp-details-visible .totp-show-details{display:none}.totp-hide-details,.totp-show-details{color:blue;text-decoration:underline;cursor:pointer;margin:0 .25em;font-weight:normal}.totp-details{margin:0 auto}.totp-details th{padding-right:.25em;text-align:left}.totp-details td{font-family:monospace}.totp-detail{display:inline-block;margin:0 .25em}/*
 * Branding iMND (tema hi-tech) para o Apache Guacamole 1.6.0.
 * Versão clara anterior: ../../imnd-brand-claro.css
 *
 * Paleta e contrastes WCAG calculados sobre o cartão #0a1624:
 *   turquesa do logo  #04d0cc  destaque (sobre o cartão: 9.45:1)
 *   texto             #e8fafa  (16.9:1)
 *   rótulos           #9dbec6  (9.2:1)
 *   aviso             #8fb0ba  (7.88:1)
 *   botão             texto #031018 sobre turquesa (9.99:1) e sobre #0aa6c8 (6.69:1)
 *   borda dos campos  ~rgba(4,208,204,.5) (~3.3:1 contra o cartão)
 *
 * Sem fontes externas: só pilhas de fontes do sistema (a rede interna não depende de CDN).
 */

:root {
    --imnd-teal:      #04d0cc;
    --imnd-blue:      #0a6c8e;
    --imnd-blue-dark: #08566f;
    --imnd-navy:      #0b2f45;
    --imnd-ink:       #040a12;
    --imnd-card:      #0a1624;
    --imnd-field:     #0b1726;
    --imnd-text:      #e8fafa;
    --imnd-mono:      ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

body {
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Tela de login: fundo com grade e brilho ---------- */

div.login-ui {
    background-color: var(--imnd-ink);
    background-image:
        radial-gradient(60em 36em at 50% -10%, rgba(4, 208, 204, .20), transparent 60%),
        radial-gradient(44em 30em at 100% 110%, rgba(10, 108, 142, .30), transparent 60%),
        linear-gradient(rgba(4, 208, 204, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(4, 208, 204, .06) 1px, transparent 1px);
    background-size: auto, auto, 3em 3em, 3em 3em;
}

/* ---------- Cartão de vidro ---------- */

.login-ui .login-dialog {
    position: relative;
    overflow: hidden;
    max-width: 3.4in;
    padding: 1.5em 1.35em 1.25em;
    background: rgba(10, 22, 36, .72);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    color: var(--imnd-text);
    border: 1px solid rgba(4, 208, 204, .28);
    border-radius: 1em;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .03) inset,
        0 1.5em 4em rgba(0, 0, 0, .55),
        0 0 3em rgba(4, 208, 204, .12);
    animation: imnd-entrada .6s ease-out both;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .login-ui .login-dialog {
        background: rgba(10, 22, 36, .94);
    }
}

/* Filete luminoso no topo do cartão */
.login-ui .login-dialog::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--imnd-teal), transparent);
}

@keyframes imnd-entrada {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .login-ui .login-dialog {
        animation: none;
    }
}

/* ---------- Logo (o PNG já é turquesa e transparente) ---------- */

.login-ui .login-dialog .login-form .logo {
    display: block;
    width: 100%;
    height: 3.25em;
    margin: 0 0 .25em;
    background-color: transparent;
    background-image: url('app/ext/imnd-brand/resources/images/logo-imnd.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 2.5em;
    -webkit-filter: drop-shadow(0 0 .55em rgba(4, 208, 204, .55));
    filter: drop-shadow(0 0 .55em rgba(4, 208, 204, .55));
}

/* ---------- Nome do serviço (o selo de versão não é exibido) ---------- */

.login-ui .login-dialog .version {
    padding: .35em 0 1.1em;
}

.login-ui .login-dialog .version .app-name {
    text-transform: none;
    font-weight: 300;
    font-size: 1.15em;
    letter-spacing: .12em;
    color: var(--imnd-text);
}

.login-ui .login-dialog .version .version-number {
    display: none;
}

/* ---------- Campos escuros ---------- */

.login-ui .login-fields .labeled-field input {
    box-sizing: border-box;
    background: var(--imnd-field);
    color: var(--imnd-text);
    border: 1px solid rgba(4, 208, 204, .5);
    border-radius: .4em;
    font-family: var(--imnd-mono);
    caret-color: var(--imnd-teal);
}

/* O rótulo fica atrás do campo vazio (transparente), como no original */
.login-ui .login-fields .labeled-field .field-header {
    font-family: var(--imnd-mono);
    color: #b7dce3;
    opacity: .85;
    letter-spacing: .04em;
}

.login-ui .login-fields .labeled-field input:focus,
.login-ui .login-fields .labeled-field.empty input:focus {
    outline: none;
    background: var(--imnd-field);
    border-color: var(--imnd-teal);
    box-shadow: 0 0 0 1px var(--imnd-teal), 0 0 1em rgba(4, 208, 204, .35);
}

/* Preenchimento automático do navegador sem fundo claro */
.login-ui .login-fields .labeled-field input:-webkit-autofill {
    -webkit-text-fill-color: var(--imnd-text);
    -webkit-box-shadow: 0 0 0 100px var(--imnd-field) inset;
}

/* ---------- Botão de entrar ---------- */

.login-ui .login-dialog .buttons input[type="submit"] {
    width: 100%;
    margin: .25em 0 0;
    padding: .55em 1em;
    background: linear-gradient(90deg, var(--imnd-teal), #0aa6c8);
    color: #031018;
    border: 0;
    border-radius: .4em;
    text-shadow: none;
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 700;
    box-shadow: 0 0 1.1em rgba(4, 208, 204, .45);
    transition: box-shadow .2s, filter .2s;
}

.login-ui .login-dialog .buttons input[type="submit"]:hover {
    filter: brightness(1.1);
    box-shadow: 0 0 1.6em rgba(4, 208, 204, .7);
}

.login-ui .login-dialog .buttons input[type="submit"]:active {
    filter: brightness(.9);
}

.login-ui .login-dialog .buttons input[type="submit"]:focus-visible {
    outline: 2px solid var(--imnd-text);
    outline-offset: 2px;
}

/* ---------- Aviso de acesso restrito ---------- */

.login-ui .login-dialog .aviso-restrito {
    margin-top: 1.25em;
    padding-top: .8em;
    border-top: 1px dashed rgba(4, 208, 204, .3);
    font-family: var(--imnd-mono);
    font-size: .62em;
    line-height: 1.55;
    text-align: center;
    color: #8fb0ba;
}

.login-ui .login-dialog .aviso-restrito strong {
    color: var(--imnd-teal);
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* ---------- Elementos globais (telas após o login seguem claras) ---------- */

a.button,
button,
input[type="submit"] {
    background-color: var(--imnd-blue);
    border: 1px solid var(--imnd-blue-dark);
    border-radius: .3em;
    text-shadow: none;
}

a.button:hover,
button:hover,
input[type="submit"]:hover {
    background-color: var(--imnd-blue-dark);
}

a.button:active,
button:active,
input[type="submit"]:active {
    background-color: var(--imnd-navy);
}

a.button.danger,
button.danger {
    background: #a43;
    border-color: #932;
}

a.button.danger:hover,
button.danger:hover {
    background: #932;
}

/* Cabeçalho das demais telas após o login: apenas uma linha de destaque, sem trocar cores de texto */
.header {
    border-bottom: 3px solid var(--imnd-teal);
}

/* ==========================================================================
 * Tela inicial (lista de servidores): mesmo tema escuro do login.
 * Tudo escopado em .home-view, então as telas de configuração não mudam.
 * ========================================================================== */

body:has(.home-view) {
    background: var(--imnd-ink);
}

.home-view {
    min-height: 100vh;
    color: var(--imnd-text);
    background-color: var(--imnd-ink);
    background-image:
        radial-gradient(60em 36em at 50% -10%, rgba(4, 208, 204, .18), transparent 60%),
        radial-gradient(44em 30em at 100% 110%, rgba(10, 108, 142, .28), transparent 60%),
        linear-gradient(rgba(4, 208, 204, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(4, 208, 204, .05) 1px, transparent 1px);
    background-size: auto, auto, 3em 3em, 3em 3em;
    background-attachment: fixed;
}

/* Faixa com o logo no topo */
.home-view .connection-list-ui::before {
    content: "";
    display: block;
    height: 4.25em;
    background-color: rgba(10, 22, 36, .92);
    background-image: url('app/ext/imnd-brand/resources/images/logo-imnd.png');
    background-repeat: no-repeat;
    background-position: 1.5em center;
    background-size: auto 2.1em;
    border-bottom: 1px solid rgba(4, 208, 204, .3);
}

/* Cabeçalhos das seções */
.home-view .header {
    background: rgba(10, 22, 36, .82);
    color: var(--imnd-text);
    border-bottom: 1px solid rgba(4, 208, 204, .3);
    box-shadow: none;
}

.home-view .header:not(.ng-hide) ~ .header,
.home-view .header:not(.ng-hide) ~ * .header {
    border-top: 1px solid rgba(4, 208, 204, .3);
}

.home-view .header h2 {
    padding-left: .6em;
    font-weight: 300;
    letter-spacing: .12em;
    color: var(--imnd-text);
}

/* Filtro */
.home-view .header .filter input {
    color: var(--imnd-text);
    font-family: var(--imnd-mono);
    border-left: 1px solid rgba(4, 208, 204, .3);
    caret-color: var(--imnd-teal);
}

.home-view .header .filter input::placeholder {
    color: #9dbec6;
    opacity: 1;
}

.home-view .header .filter input:focus {
    outline: none;
    box-shadow: inset 0 -2px 0 var(--imnd-teal);
}

/* Menu do usuário: ícones claros no cabeçalho escuro, painel claro tingido */
.home-view .menu-dropdown .menu-title {
    color: var(--imnd-text);
}

.home-view .user-menu .menu-dropdown .menu-title {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e8fafa'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8z'/%3E%3C/svg%3E");
}

.home-view .menu-dropdown .menu-indicator {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8fafa' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
}

.home-view .menu-dropdown:hover,
.home-view .menu-dropdown.open,
.home-view .menu-dropdown.open:hover {
    background: rgba(4, 208, 204, .15);
}

.home-view .menu-dropdown .menu-contents {
    background: #eef7f9;
    border: 1px solid rgba(4, 208, 204, .5);
    box-shadow: 0 .75em 2em rgba(0, 0, 0, .45);
}

.home-view .menu-dropdown .menu-contents li a:hover {
    background-color: rgba(4, 208, 204, .2);
}

.home-view .menu-dropdown .menu-contents .profile a,
.home-view .menu-dropdown .menu-contents .profile a:visited {
    color: var(--imnd-navy);
    text-decoration: none;
}

/* Lista de servidores */
.home-view .all-connections .group-list {
    margin: 1.25em;
    padding: .5em;
    background: rgba(10, 22, 36, .72);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(4, 208, 204, .22);
    border-radius: .75em;
}

.home-view .connection a,
.home-view .connection a:hover,
.home-view .connection a:visited,
.home-view .connection-group a,
.home-view .connection-group a:hover,
.home-view .connection-group a:visited,
.home-view .list-item .name,
.home-view .recent-connections .name {
    color: var(--imnd-text);
}

.home-view a.home-connection {
    padding: .1em .25em;
    border-radius: .4em;
}

.home-view .list-item:not(.selected) .caption:hover {
    background: rgba(4, 208, 204, .14);
    border-radius: .4em;
}

.home-view .caption .activeUserCount {
    color: #9dbec6;
}

/* Ícones por protocolo, em turquesa (os padrões são pretos e somem no fundo escuro) */
.home-view .connection .icon,
.home-view .connection .icon.rdp,
.home-view .connection .icon.vnc {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304d0cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4' width='19' height='12' rx='2'/%3E%3Cpath d='M8 20h8M12 16v4'/%3E%3C/svg%3E");
}

.home-view .connection .icon.ssh,
.home-view .connection .icon.telnet,
.home-view .connection .icon.kubernetes {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304d0cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4' width='19' height='16' rx='2'/%3E%3Cpath d='M7 10l3 2.5L7 15'/%3E%3Cpath d='M13 15h4'/%3E%3C/svg%3E");
}

.home-view .connection .icon {
    background-size: 18px 18px;
}

/* Ícones que só existem em preto (pastas, expandir, paginação, remover recente) */
.home-view .connection-group > .caption .icon,
.home-view .icon.expand,
.home-view .pager .icon,
.home-view .recent-connections .connection .remove-recent:after {
    -webkit-filter: invert(1);
    filter: invert(1);
}

/* Conexões recentes */
.home-view .recent-connections div.connection {
    background: rgba(10, 22, 36, .72);
    border: 1px solid rgba(4, 208, 204, .22);
    border-radius: .75em;
    transition: box-shadow .2s, border-color .2s;
}

.home-view .recent-connections .connection:hover {
    background: rgba(4, 208, 204, .12);
    border-color: var(--imnd-teal);
    box-shadow: 0 0 1.25em rgba(4, 208, 204, .3);
}

.home-view .recent-connections .connection .thumbnail > * {
    border: 1px solid rgba(4, 208, 204, .35);
    box-shadow: none;
}

.home-view .recent-connections .connection .remove-recent {
    opacity: .6;
}

/* Paginação */
.home-view .pager {
    color: var(--imnd-text);
}

.home-view .pager .set-page.current {
    background: rgba(4, 208, 204, .2);
    border-color: rgba(4, 208, 204, .5);
}