/*
 * 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}/* IMS Control — tela de login do Guacamole (dark, marca IMS) */
div.login-ui {
    background: radial-gradient(ellipse at top, #0E2C46 0%, #002040 55%, #001428 100%);
    color: #FFFFFF;
    font-family: 'Inter', 'Nunito', 'Avenir', sans-serif;
}
.login-ui .login-dialog {
    max-width: 3.6in;
    padding: 2em 2em 1.5em;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 16, 32, 0.6), 0 0 0 1px rgba(0, 107, 219, 0.15);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}
.login-ui .login-dialog .logo {
    width: 180px;
    height: 128px;
    margin: 0 auto 0.75em;
    background-image: url('app/ext/ims-branding/images/logo-dark.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.login-ui .login-dialog .version { padding: 0 0 1em; }
.login-ui .login-dialog .version .app-name {
    font-size: 0.55em;
    font-weight: 900;
    letter-spacing: 0.2em;
    color: #71C2F2;
}
.login-ui .login-dialog .version .version-number { display: none; }
.login-ui .login-dialog th { text-shadow: none; color: rgba(255, 255, 255, 0.8); }
/* O rótulo do campo é o "placeholder": na origem ele fica atrás do input
   (z-index -1) e some porque o input preenchido/focado ganha fundo branco
   opaco. Com o input translúcido o rótulo vazava por baixo do texto digitado,
   então ele é escondido explicitamente quando o campo tem valor. */
.login-ui .login-fields .labeled-field .field-header {
    color: #FFFFFF;
    opacity: 0.55;
    margin: 0;
    /* mesma caixa de texto do input (16px, padding 0.65em 0.9em + borda 1px) */
    padding: calc(10.4px + 1px) calc(14.4px + 1px);
    font-size: 16px;
    line-height: normal;
}
.login-ui .login-fields .labeled-field:not(.empty) .field-header,
.login-ui .login-fields .labeled-field:has(input:-webkit-autofill) .field-header { visibility: hidden; }
/* autopreenchimento do navegador: sem o fundo claro dele sobre a tela escura */
.login-ui .login-fields .labeled-field input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #0E2C46 inset;
    -webkit-text-fill-color: #FFFFFF;
    caret-color: #FFFFFF;
}
.login-ui .login-dialog .login-fields input,
.login-ui .login-fields .labeled-field.empty input,
.login-ui .login-fields .labeled-field input:focus {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: #FFFFFF;
    font-family: inherit;
    font-size: 16px;
    padding: 0.65em 0.9em;
    outline: none;
}
.login-ui .login-fields .labeled-field input:focus {
    border-color: #00ADFF;
    box-shadow: 0 0 0 2px rgba(0, 173, 255, 0.35);
}
.login-ui .login-dialog .buttons input[type=submit] {
    background: linear-gradient(90deg, #2060A0, #006BDB);
    border: none;
    border-radius: 10px;
    padding: 0.7em 1em;
    font-weight: 700;
    text-shadow: none;
    box-shadow: 0 8px 20px rgba(0, 107, 219, 0.35);
}
.login-ui .login-dialog .buttons input[type=submit]:hover { background: linear-gradient(90deg, #3382C1, #1A86F5); }
.login-ui.error p.login-error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.5);
    border-radius: 10px;
    color: #FECACA;
}
/* etapa do TOTP (continuação): mantém o QR legível */
.login-ui.continuation .login-dialog { max-width: 6in; }
.login-ui.continuation .login-dialog img { background: #FFFFFF; padding: 8px; border-radius: 8px; }
.login-ui.continuation .login-dialog a { color: #71C2F2; }
/* IMS Control — tela inicial (lista de conexões) do Guacamole, dark */
.home-view {
    min-height: 100vh;
    background: radial-gradient(ellipse at top, #0E2C46 0%, #002040 55%, #001428 100%);
    color: #FFFFFF;
    font-family: 'Inter', 'Nunito', 'Avenir', sans-serif;
}

/* faixa da marca acima das seções */
.home-view .connection-list-ui::before {
    content: "";
    display: block;
    height: 44px;
    margin: 0;
    padding: 14px 24px;
    background: url('app/ext/ims-branding/images/banner-dark.svg') no-repeat 24px center / auto 44px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background-color: rgba(0, 16, 32, 0.45);
}

/* cabeçalhos de seção */
.home-view .header {
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-top: none;
    box-shadow: none;
}
.home-view .header:not(.ng-hide) ~ .header { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.home-view .header h2 {
    color: #71C2F2;
    font-size: 0.75em;
    font-weight: 900;
    letter-spacing: 0.18em;
    padding: 1em 1.5em;
}

/* menu do usuário: título claro sobre o fundo escuro (texto e ícone são pretos na origem) */
.home-view .user-menu .menu-dropdown .menu-title,
.home-view .menu-dropdown .menu-indicator { color: #000000; filter: invert(1); }
.home-view .menu-dropdown:hover { background: rgba(255, 255, 255, 0.05); }
.home-view .menu-dropdown.open, .home-view .menu-dropdown.open:hover { background: rgba(0, 107, 219, 0.25); }
.home-view .menu-dropdown .menu-contents {
    background: #FFFFFF;
    border: none;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 12px 30px rgba(0, 16, 32, 0.5);
    overflow: hidden;
}
.home-view .menu-dropdown .menu-contents li a:hover { background-color: #E6EFF7; }

/* filtro */
.home-view .header .filter input {
    color: #FFFFFF;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    filter: none;
}
.home-view .header .filter .search-string { background-image: none; padding-left: 0.75em; }
.home-view .header .filter input::placeholder { color: rgba(255, 255, 255, 0.45); }

/* conexões recentes */
.home-view .recent-connections { padding: 1.5em 1em; }
.home-view .recent-connections .connection {
    border-radius: 14px;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s;
}
.home-view .recent-connections .connection:hover {
    background: rgba(0, 107, 219, 0.15);
    border-color: rgba(0, 173, 255, 0.35);
}
.home-view .recent-connections .connection .thumbnail > * {
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.home-view .recent-connections .connection .caption .name { color: #FFFFFF; font-weight: 600; }
.home-view .recent-connections .connection .remove-recent { filter: invert(1); }
.home-view .placeholder { color: rgba(255, 255, 255, 0.5); text-shadow: none; font-size: 1em; }

/* todas as conexões */
.home-view .all-connections { padding: 1em 1.5em; }
.home-view .list-item .name { color: #FFFFFF; }
.home-view .list-item .caption { border-radius: 8px; padding: 0.35em 0.5em; }
.home-view .list-item:not(.selected) .caption:hover { background: rgba(0, 107, 219, 0.2); }
.home-view .list-item.selected { background: rgba(0, 107, 219, 0.3); }
.home-view .connection .icon,
.home-view .connection-group .icon { filter: invert(1); opacity: 0.85; }
.home-view .caption .activeUserCount { color: #22C55E; }
.home-view .expandable.expanded > .children > .list-item::before,
.home-view .expandable.expanded > .children > .list-item::after { border-color: rgba(255, 255, 255, 0.2); }
.home-view a, .home-view a:visited { color: inherit; }