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

}
/*
 * TrustIT — tema visual para Apache Guacamole
 * Paleta extraída da marca: verde #a8cf45, cinza #727376
 */

:root {
    --tit-green:        #a8cf45;
    --tit-green-hi:     #b7da5e;
    --tit-green-lo:     #93bb32;
    --tit-green-tint:   #f3f8e7;
    --tit-green-tint-2: #e8f1d3;

    --tit-gray:         #727376;
    --tit-ink:          #23262b;
    --tit-ink-2:        #2e323a;
    --tit-ink-3:        #3a4049;

    --tit-text:         #24282f;
    --tit-muted:        #6d747f;
    --tit-faint:        #98a0ab;

    --tit-bg:           #f2f4f7;
    --tit-surface:      #ffffff;
    --tit-surface-2:    #f7f8fa;
    --tit-border:       #e4e8ec;
    --tit-border-2:     #d7dce2;

    --tit-danger:       #d93a3f;
    --tit-danger-hi:    #e5484d;

    --tit-r-sm:  8px;
    --tit-r-md:  10px;
    --tit-r-lg:  14px;
    --tit-r-xl:  18px;

    --tit-sh-sm: 0 1px 2px rgba(16, 24, 40, .06);
    --tit-sh-md: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 24px -12px rgba(16, 24, 40, .18);
    --tit-sh-lg: 0 4px 10px rgba(16, 24, 40, .06), 0 24px 48px -20px rgba(16, 24, 40, .28);

    --tit-font: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
                "Helvetica Neue", Carlito, FreeSans, Arial, sans-serif;
}

/* ------------------------------------------------------------------ base -- */

body,
input, textarea, select, button,
input[type="submit"], a.button,
.login-ui .login-dialog .login-fields input {
    font-family: var(--tit-font);
}

body {
    background: var(--tit-bg);
    color: var(--tit-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection      { background: var(--tit-green-tint-2); color: var(--tit-ink); }
::-moz-selection { background: var(--tit-green-tint-2); color: var(--tit-ink); }

:focus-visible {
    outline: 2px solid var(--tit-green-lo);
    outline-offset: 2px;
}

/* Barras de rolagem discretas */
* { scrollbar-width: thin; scrollbar-color: #c6ccd4 transparent; }
::-webkit-scrollbar             { width: 10px; height: 10px; }
::-webkit-scrollbar-track       { background: transparent; }
::-webkit-scrollbar-thumb       { background: #c6ccd4; border-radius: 8px;
                                  border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #adb5bf; background-clip: content-box; }

/* Indicador de carregamento na cor da marca */
.loading::before {
    background-image: url('app/ext/trustit/images/icon-spinner.svg');
    width: 56px; height: 56px;
    margin-left: -28px; margin-top: -28px;
    background-size: 56px 56px;
    animation-duration: .9s;
}

/* ----------------------------------------------------------------- login -- */

div.login-ui {
    background:
        radial-gradient(1000px 560px at 50% -8%, rgba(168, 207, 69, .30), transparent 60%),
        radial-gradient(820px 480px at 88% 112%, rgba(168, 207, 69, .16), transparent 58%),
        linear-gradient(162deg, #282c33 0%, #1c1f24 55%, #131518 100%);
}

div.login-ui::before {
    content: '';
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px);
    background-size: 22px 22px;
    pointer-events: none;
}

.login-ui .login-dialog-middle { position: relative; }

.login-ui .login-dialog {
    max-width: 3.95in;
    padding: 2.5em 2.25em 2.1em;
    font-size: 1.15em;
    background: var(--tit-surface);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: var(--tit-r-xl);
    box-shadow: 0 34px 80px -24px rgba(0, 0, 0, .62), 0 2px 10px rgba(0, 0, 0, .28);
    animation: tit-rise .32s cubic-bezier(.22, .9, .3, 1) both;
    position: relative;
    overflow: hidden;
}

/* Fio na cor da marca no topo do cartão */
.login-ui .login-dialog::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--tit-green), #cfe68a, var(--tit-green));
}

@keyframes tit-rise {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to   { opacity: 1; transform: none; }
}

.login-ui .login-dialog .logo {
    width: 9.4em;
    height: 4.2em;
    margin: 0 auto .35em;
    background-image: url('app/ext/trustit/images/trustit-logo.png');
    background-size: contain;
    background-position: center;
}

/* O nome do produto já está no logotipo */
.login-ui .login-dialog .version .app-name,
.login-ui .login-dialog .version .version-number { display: none; }
.login-ui .login-dialog .version { padding: 0; }

.login-ui .login-dialog .tit-tagline {
    text-align: center;
    color: var(--tit-muted);
    font-size: .72em;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin: 0 0 1.9em;
}

.login-ui .login-dialog .tit-tagline::after {
    content: '';
    display: block;
    width: 2.6em;
    height: 3px;
    margin: 1.05em auto 0;
    border-radius: 3px;
    background: var(--tit-green);
}

/* Campos com rótulo flutuante (o rótulo fica atrás do input transparente) */
.login-ui .login-fields .labeled-field {
    background: var(--tit-surface-2);
    border: 1.5px solid var(--tit-border);
    border-radius: var(--tit-r-md);
    margin-bottom: .7em;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.login-ui .login-fields .labeled-field:focus-within {
    background: var(--tit-surface);
    border-color: var(--tit-green);
    box-shadow: 0 0 0 4px rgba(168, 207, 69, .22);
}

.login-ui .login-dialog .login-fields input {
    background: var(--tit-surface-2);
    border: none;
    border-radius: var(--tit-r-md);
    padding: .92em 1em;
    margin: 0;
    font-size: .8em;
    color: var(--tit-text);
}

.login-ui .login-dialog .login-fields input:focus { outline: none; }

/* No Guacamole original o rótulo some ao focar o campo vazio (ele fica atrás de
   um input opaco). Mantemos o rótulo até que algo seja digitado. */
.login-ui .login-fields .labeled-field.empty input,
.login-ui .login-fields .labeled-field.empty input:focus { background: transparent; }

.login-ui .login-fields .labeled-field .field-header {
    margin: 0;
    padding: .92em 1em;
    font-size: .8em;
    font-weight: 500;
    opacity: 1;
    color: var(--tit-faint);
}

.login-ui .login-dialog .buttons { margin-top: 1.35em; }

.login-ui .login-dialog .buttons input[type="submit"] {
    padding: .78em 1em;
    font-size: .82em;
    letter-spacing: .04em;
    border-radius: var(--tit-r-md);
}

/* Mensagem de erro de autenticação */
.login-ui.error p.login-error {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    top: 1.25em;
    max-width: 90vw;
    padding: .85em 1.35em;
    background: #fff1f1;
    border: 1px solid #f3c3c4;
    border-left: 4px solid var(--tit-danger);
    border-radius: var(--tit-r-md);
    box-shadow: var(--tit-sh-lg);
    color: #9a2b2f;
    font-size: .9em;
    font-weight: 600;
}

.login-ui .login-dialog .tit-login-footer {
    margin: 1.6em 0 0;
    padding-top: 1.2em;
    border-top: 1px solid var(--tit-border);
    text-align: center;
    font-size: .68em;
    line-height: 1.5;
    color: var(--tit-faint);
}

/* Etapas adicionais de autenticação (ex.: troca de senha, TOTP) */
.login-ui.continuation .login-dialog { max-width: 5.2in; }

/* --------------------------------------------------------------- cabeçalho -- */

div.header {
    background: var(--tit-ink);
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, .35);
    box-shadow: 0 10px 24px -18px rgba(16, 20, 26, .9);
    align-items: center;
    padding: .35em .6em;
    position: sticky;
    top: 0;
    z-index: 8;
}

div.header::before {
    content: '';
    display: block;
    flex: 0 0 auto;
    width: 6.6em;
    height: 2.5em;
    margin: 0 .9em 0 .55em;
    background: url('app/ext/trustit/images/trustit-logo-light.png') left center / contain no-repeat;
}

div.header h2 {
    color: rgba(255, 255, 255, .82);
    font-size: .82em;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    padding: .5em 0 .5em 1.15em;
    border-left: 1px solid rgba(255, 255, 255, .14);
    align-self: center;
}

/* Apenas o primeiro cabeçalho visível exibe a marca */
div.header:not(.ng-hide) ~ div.header,
div.header:not(.ng-hide) ~ * div.header { position: static; }

div.header:not(.ng-hide) ~ div.header::before,
div.header:not(.ng-hide) ~ * div.header::before { display: none; }

div.header:not(.ng-hide) ~ div.header h2,
div.header:not(.ng-hide) ~ * div.header h2 { border-left: none; padding-left: 1.05em; }

div.header:not(.ng-hide) ~ div.header,
div.header:not(.ng-hide) ~ * div.header { border-top: none; }

/* Campo de busca embutido no cabeçalho */
div.header .filter { padding: .35em .5em; display: flex; align-items: center; }

div.header .filter input,
div.header .filter .search-string {
    background-color: rgba(255, 255, 255, .09);
    background-image: url('app/ext/trustit/images/icon-search.svg');
    background-size: 1.05em;
    background-position: .8em center;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 999px;
    color: #fff;
    padding: .55em .9em .55em 2.5em;
    min-width: 2.6in;
    font-size: .82em;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

div.header .filter input::placeholder { color: rgba(255, 255, 255, .45); }

div.header .filter input:focus {
    outline: none;
    background-color: rgba(255, 255, 255, .15);
    border-color: var(--tit-green);
    box-shadow: 0 0 0 3px rgba(168, 207, 69, .2);
}

/* ------------------------------------------------ menu do usuário (topo) -- */

div.header .menu-dropdown {
    background: transparent;
    border-left: 1px solid rgba(255, 255, 255, .12);
    border-radius: 0;
    margin-left: .4em;
    transition: background-color .15s ease;
}

div.header .menu-dropdown:hover            { background: rgba(255, 255, 255, .07); }
div.header .menu-dropdown.open,
div.header .menu-dropdown.open:hover       { background: rgba(255, 255, 255, .12); }

div.header .menu-dropdown .menu-title {
    color: #fff;
    font-size: .85em;
    font-weight: 600;
    padding: .85em 2.4em .85em 2.5em;
    max-width: 2.6in;
}

.user-menu .menu-dropdown .menu-title {
    background-image: url('app/ext/trustit/images/icon-user.svg');
    background-size: 1.1em;
    background-position: .85em center;
}

.menu-dropdown .menu-indicator {
    background-image: url('app/ext/trustit/images/icon-chevron-down.svg');
    background-size: .8em;
    opacity: .75;
    transition: transform .18s ease;
}

.menu-dropdown.open .menu-indicator { transform: rotate(180deg); }

.menu-dropdown .menu-contents {
    background: var(--tit-surface);
    border: 1px solid var(--tit-border);
    border-radius: var(--tit-r-lg);
    box-shadow: var(--tit-sh-lg);
    overflow: hidden;
    margin-top: .4em;
    padding: .35em;
    min-width: 2.5in;
}

.menu-dropdown .menu-contents li a {
    border-radius: var(--tit-r-sm);
    color: var(--tit-text);
    font-size: .88em;
    font-weight: 500;
    padding: .7em .85em;
    transition: background-color .12s ease, color .12s ease;
}

.menu-dropdown .menu-contents li a:hover { background-color: var(--tit-green-tint); }

.menu-dropdown .menu-contents li a.current,
.menu-dropdown .menu-contents li a.current:hover {
    background-color: var(--tit-green-tint-2);
    color: var(--tit-ink);
    font-weight: 600;
    opacity: 1;
}

.menu-dropdown .menu-contents li a.danger,
.menu-dropdown .menu-contents li a.logout {
    background-color: transparent;
    color: var(--tit-danger);
    font-weight: 600;
}

.menu-dropdown .menu-contents li a.danger:hover,
.menu-dropdown .menu-contents li a.logout:hover { background-color: #fdeeee; }

.user-menu .menu-dropdown .menu-contents li a {
    background-size: 1.05em;
    background-position: .8em center;
    padding-left: 2.6em;
    background-image: url('app/ext/trustit/images/icon-monitor-gray.svg');
}

.user-menu .menu-dropdown .menu-contents li a[href="#/"] {
    background-image: url('app/ext/trustit/images/icon-home.svg');
}

.user-menu .menu-dropdown .menu-contents li a[href^="#/settings/"] {
    background-image: url('app/ext/trustit/images/icon-cog.svg');
}

.user-menu .menu-dropdown .menu-contents li a.change-password {
    background-image: url('app/ext/trustit/images/icon-key.svg');
}

.user-menu .menu-dropdown .menu-contents li a.logout {
    background-image: url('app/ext/trustit/images/icon-logout.svg');
}

.user-menu .menu-dropdown .menu-contents .profile {
    margin: .35em .35em .5em;
    padding: .9em .85em 1em;
    border-bottom: 1px solid var(--tit-border);
    width: auto;
    min-width: 2.2in;
}

.user-menu .menu-dropdown .menu-contents .profile .full-name { font-size: .95em; }

.user-menu .menu-dropdown .menu-contents .profile .full-name a {
    color: var(--tit-text);
    text-decoration: none;
}

.user-menu .menu-dropdown .menu-contents .profile .organization,
.user-menu .menu-dropdown .menu-contents .profile .organizational-role {
    color: var(--tit-muted);
    font-size: .78em;
}

/* --------------------------------------------------------------- conteúdo -- */

/* Nas telas de edição o <h2 class="header"> é um título de seção, não a barra
   superior — precisa ser neutralizado explicitamente. */
.view h2.header,
div.header:not(.ng-hide) ~ h2.header,
div.header:not(.ng-hide) ~ * h2.header {
    display: block;
    position: static;
    background: transparent;
    border: none;
    border-top: 1px solid var(--tit-border);
    box-shadow: none;
    max-width: 1180px;
    margin: 2em auto .2em;
    padding: 1.15em .35em 0;
    color: var(--tit-muted);
    font-size: .82em;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

h2.header::before { display: none; }

div.all-connections,
div.recent-connections,
div.clipboardDiv {
    max-width: 1180px;
    margin: 1.35em auto;
}

/* Blocos de conteúdo como cartões */
div.all-connections,
div.settings.section,
.view div.section,
.view div.attributes {
    background: var(--tit-surface);
    border: 1px solid var(--tit-border);
    border-radius: var(--tit-r-lg);
    box-shadow: var(--tit-sh-md);
    max-width: 1180px;
    margin: 1.1em auto;
    padding: 1.15em 1.3em;
}

div.all-connections { padding: .65em; }

.view div.attributes:empty { display: none; }

/* Barra de ações acima das listas (novo usuário, nova conexão, filtro…) */
.toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6em;
    margin-bottom: 1em;
}

.toolbar .action-buttons { margin: 0; text-align: left; flex: 0 0 auto; }
.toolbar .filter         { margin: 0; flex: 1 1 14em; max-width: 22em; }

/* Linha de Salvar/Clonar/Cancelar/Excluir (fora da barra de ferramentas) */
management-buttons { display: block; }

management-buttons > .action-buttons,
.settings > .action-buttons,
.view > .action-buttons {
    display: block;
    max-width: 1180px;
    margin: 1.4em auto;
    text-align: center;
}

/* Campo de filtro fora da barra superior */
.filter .search-string {
    background-image: url('app/ext/trustit/images/icon-search-gray.svg');
    background-size: 1.05em;
    background-position: .85em center;
    border-radius: 999px;
    padding: .6em 1em .6em 2.6em;
}

/* ------------------------------------------------------- lista de conexões -- */

.list-item .caption {
    display: flex;
    align-items: center;
    gap: .15em;
    padding: .5em .6em;
    border-radius: var(--tit-r-md);
    transition: background-color .13s ease;
}

.list-item:not(.selected) .caption:hover { background: var(--tit-green-tint); }
.list-item.selected                      { background: transparent; }
.list-item.selected > .caption           { background: var(--tit-green-tint-2); }

.list-item .name {
    color: var(--tit-text);
    font-weight: 500;
    margin-left: 0;
}

a.home-connection,
a.home-connection-group,
a.settings-connection,
a.settings-connection-group,
a.settings-sharing-profile {
    display: flex;
    align-items: center;
    gap: .7em;
    flex: 1 1 auto;
    min-width: 0;
    padding: .1em 0;
}

a.home-connection .name,
a.home-connection-group .name,
a.settings-connection .name,
a.settings-connection-group .name,
a.settings-sharing-profile .name { flex: 1 1 auto; min-width: 0;
                                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Ícone da conexão como "badge" na cor da marca */
.connection > .caption .icon.type,
.connection-group.empty.balancer > .caption .icon.type {
    width: 2.05em;
    height: 2.05em;
    flex: 0 0 auto;
    border-radius: var(--tit-r-md);
    background-color: var(--tit-green);
    background-size: 1.1em 1.1em;
    background-position: center center;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .05), 0 1px 2px rgba(16, 24, 40, .12);
    background-image: url('app/ext/trustit/images/icon-plug.svg');
}

.connection > .caption .icon.rdp,
.connection > .caption .icon.vnc,
.connection-group.empty.balancer > .caption .icon.type {
    background-image: url('app/ext/trustit/images/icon-monitor.svg');
}

.connection > .caption .icon.ssh,
.connection > .caption .icon.telnet,
.connection > .caption .icon.kubernetes {
    background-color: var(--tit-gray);
    background-image: url('app/ext/trustit/images/icon-terminal.svg');
}

/* Pastas / grupos de conexão */
.connection-group > .caption .icon:not(.expand) {
    width: 2.05em;
    height: 2.05em;
    border-radius: var(--tit-r-md);
    background-color: var(--tit-gray);
    background-size: 1.1em 1.1em;
    background-image: url('app/ext/trustit/images/icon-folder.svg');
}

.connection-group.expanded > .caption .icon:not(.expand) {
    background-image: url('app/ext/trustit/images/icon-folder-open.svg');
}

.all-connections .connection-group > .caption .name {
    font-weight: 700;
    font-size: .82em;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tit-muted);
}

/* Seta de expandir/recolher */
.expandable > .caption .icon.expand,
.expandable.expanded > .caption .icon.expand,
.expandable.empty > .caption .icon.expand {
    width: 1.35em;
    height: 1.35em;
    flex: 0 0 auto;
    background-size: .8em .8em;
    border-radius: var(--tit-r-sm);
    background-image: url('app/ext/trustit/images/icon-chevron-right-gray.svg');
    transition: background-color .12s ease;
}

.expandable.expanded > .caption .icon.expand {
    background-image: url('app/ext/trustit/images/icon-chevron-down-gray.svg');
}

.expandable > .caption .icon.expand:hover { background-color: var(--tit-border); }

.expandable > .children { margin-left: 18px; padding-left: 18px; }
.expandable.expanded > .children > .list-item:before { border-left: 1px solid var(--tit-border); left: -18px; }
.expandable.expanded > .children > .list-item:after  { border-bottom: 1px solid var(--tit-border); left: -18px; width: 18px; }

.caption .activeUserCount {
    flex: 0 0 auto;
    float: none;
    margin-right: .35em;
    font-style: normal;
    font-size: .72em;
    font-weight: 600;
    color: #5d7a1c;
    background: var(--tit-green-tint-2);
    border-radius: 999px;
    padding: .3em .7em;
}

.caption.active * { opacity: 1; }

/* ----------------------------------------------------- conexões recentes -- */

div.recent-connections { text-align: left; padding: 0 .1em; }

div.recent-connections div.connection {
    background: var(--tit-surface);
    border: 1px solid var(--tit-border);
    border-radius: var(--tit-r-lg);
    box-shadow: var(--tit-sh-sm);
    padding: .85em;
    margin: 0 .9em .9em 0;
    vertical-align: top;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

div.recent-connections div.connection:hover {
    background: var(--tit-surface);
    border-color: #cfd9bd;
    box-shadow: var(--tit-sh-md);
    transform: translateY(-2px);
}

.recent-connections .connection .thumbnail > * {
    border: none;
    border-radius: var(--tit-r-sm);
    box-shadow: 0 2px 8px rgba(16, 24, 40, .22);
    max-width: 100%;
}

/* ---------------------------------------------------------------- botões -- */

input[type="submit"], button, a.button {
    -webkit-appearance: none;
    background-color: var(--tit-green);
    background-image: linear-gradient(180deg, var(--tit-green-hi), var(--tit-green));
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: var(--tit-r-md);
    color: var(--tit-ink);
    text-shadow: none;
    font-size: .9em;
    font-weight: 600;
    letter-spacing: .01em;
    padding: .58em 1.15em;
    box-shadow: var(--tit-sh-sm);
    transition: background-color .13s ease, box-shadow .13s ease,
                transform .08s ease, filter .13s ease;
}

input[type="submit"]:hover, button:hover, a.button:hover {
    background-color: var(--tit-green-hi);
    background-image: linear-gradient(180deg, #bfe06a, var(--tit-green-hi));
    box-shadow: 0 2px 6px rgba(16, 24, 40, .12);
}

input[type="submit"]:active, button:active, a.button:active {
    background-image: linear-gradient(180deg, var(--tit-green), var(--tit-green-lo));
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .18);
    transform: translateY(1px);
}

input[type="submit"]:disabled, button:disabled {
    background-image: none;
    background-color: #dfe3e8;
    color: #9aa2ad;
    box-shadow: none;
    opacity: 1;
    cursor: not-allowed;
}

/* Ações secundárias — escuras, preservando os ícones brancos originais */
button.cancel,      a.button.cancel,
button.back,        a.button.back,
button.home,        a.button.home,
button.manage,      a.button.manage,
button.clone,       a.button.clone,
button.reconnect,   a.button.reconnect,
button.logout,      a.button.logout,
button.change-password, a.button.change-password,
button.close-other-connection,
a.button.add-user, a.button.add-user-group,
a.button.add-connection, a.button.add-connection-group,
a.button.import-connections, a.button.upload {
    background-image: none;
    background-color: var(--tit-ink-3);
    border-color: rgba(0, 0, 0, .18);
    color: #fff;
}

button.cancel:hover,      a.button.cancel:hover,
button.back:hover,        a.button.back:hover,
button.home:hover,        a.button.home:hover,
button.manage:hover,      a.button.manage:hover,
button.clone:hover,       a.button.clone:hover,
button.reconnect:hover,   a.button.reconnect:hover,
button.logout:hover,      a.button.logout:hover,
button.change-password:hover, a.button.change-password:hover,
button.close-other-connection:hover,
a.button.add-user:hover, a.button.add-user-group:hover,
a.button.add-connection:hover, a.button.add-connection-group:hover,
a.button.import-connections:hover, a.button.upload:hover {
    background-image: none;
    background-color: #4a515c;
}

button.danger, a.button.danger, button.danger:disabled {
    background-image: none;
    background-color: var(--tit-danger);
    border-color: rgba(0, 0, 0, .12);
    color: #fff;
}

button.danger:hover, a.button.danger:hover {
    background-image: none;
    background-color: var(--tit-danger-hi);
}

button.danger:disabled { opacity: .45; }

/* ------------------------------------------------------ formulários/campos -- */

div.location,
input[type="text"], input[type="email"], input[type="number"],
input[type="password"], input[type="search"], textarea, select {
    border: 1.5px solid var(--tit-border);
    border-radius: var(--tit-r-sm);
    padding: .5em .7em;
    font-size: .85em;
    color: var(--tit-text);
    background: var(--tit-surface);
    transition: border-color .13s ease, box-shadow .13s ease;
}

div.location:focus,
input[type="text"]:focus, input[type="email"]:focus, input[type="number"]:focus,
input[type="password"]:focus, input[type="search"]:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--tit-green);
    box-shadow: 0 0 0 3px rgba(168, 207, 69, .2);
}

input[type="checkbox"], input[type="radio"] { accent-color: var(--tit-green-lo); }

.form table.fields th,
table.properties th {
    color: var(--tit-muted);
    font-size: .88em;
    font-weight: 500;
    text-align: left;
    padding: .4em 1.25em .4em 0;
}

/* Espaço para o botão de mostrar/ocultar senha */
.form-field .password-field .icon.toggle-password { margin-left: .45em; }

/* Tabelas simples dentro de cartões (histórico, sessões…) */
.view div.section table:not(.sorted):not(.fields):not(.properties) {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .92em;
}

.view div.section table:not(.sorted):not(.fields):not(.properties) th {
    text-align: left;
    color: var(--tit-muted);
    font-weight: 600;
    font-size: .85em;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .55em .9em;
    border-bottom: 1px solid var(--tit-border-2);
}

.view div.section table:not(.sorted):not(.fields):not(.properties) td {
    padding: .6em .9em;
    border-bottom: 1px solid var(--tit-border);
}

.view div.section table:not(.sorted):not(.fields):not(.properties) tr:last-child td {
    border-bottom: none;
}

/* -------------------------------------------------------------- tabelas -- */

table.sorted {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--tit-border);
    border-radius: var(--tit-r-md);
    overflow: hidden;
    background: var(--tit-surface);
    font-size: .92em;
}

table.sorted th {
    background: var(--tit-surface-2);
    color: var(--tit-muted);
    font-weight: 600;
    font-size: .82em;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: left;
}

table.sorted th, table.sorted td {
    border: none;
    border-bottom: 1px solid var(--tit-border);
    padding: .7em 1em;
}

table.sorted tr:last-child td { border-bottom: none; }
table.sorted tbody tr:hover td { background: var(--tit-green-tint); }
table.sorted th.sort-primary  { color: var(--tit-ink); }

/* ----------------------------------------------------------------- abas -- */

.page-tabs .page-list ul,
.section-tabs ul {
    background: transparent;
    border-bottom: 1px solid var(--tit-border);
    padding: 0 .4em;
}

.page-tabs .page-list li a[href],
.section-tabs li a {
    color: var(--tit-muted);
    font-size: .88em;
    font-weight: 600;
    padding: .85em 1.05em;
    border-bottom: 2px solid transparent;
    transition: color .13s ease, border-color .13s ease, background-color .13s ease;
}

.page-tabs .page-list li a[href]:hover,
.section-tabs li a:hover {
    background-color: transparent;
    color: var(--tit-text);
    border-bottom-color: var(--tit-border-2);
}

.page-tabs .page-list li a[href].current,
.page-tabs .page-list li a[href].current:hover,
.section-tabs li a.current,
.section-tabs li a.current:hover {
    background: transparent;
    color: var(--tit-ink);
    border-bottom-color: var(--tit-green);
}

/* -------------------------------------------------------------- paginação -- */

.pager .set-page {
    text-decoration: none;
    color: var(--tit-muted);
    border-radius: var(--tit-r-sm);
    min-width: 2em;
    padding: .4em .5em;
    font-size: .9em;
    transition: background-color .12s ease;
}

.pager .set-page:hover { background: var(--tit-border); color: var(--tit-text); }

.pager .set-page.current,
.pager .set-page.current:hover {
    background: var(--tit-green);
    border: 1px solid transparent;
    color: var(--tit-ink);
}

/* ------------------------------------------------------ modais e avisos -- */

guac-modal {
    background: rgba(18, 21, 25, .55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.global-status-modal guac-modal { background: rgba(18, 21, 25, .55); }

.notification {
    border: 1px solid var(--tit-border);
    border-radius: var(--tit-r-lg);
    box-shadow: var(--tit-sh-lg);
    overflow: hidden;
    animation: tit-rise .22s ease both;
}

.notification .title-bar {
    background: var(--tit-surface-2);
    border-bottom: 1px solid var(--tit-border);
    box-shadow: none;
    color: var(--tit-ink);
    font-size: 1em;
    font-weight: 700;
    letter-spacing: .08em;
    padding: .95em 1.25em;
    margin-bottom: 0;
}

.notification.error                 { background: var(--tit-surface); }
.notification.error .title-bar      { background: #fdeeee; color: #9a2b2f; border-bottom-color: #f3c3c4; }

.notification .progress {
    background-color: var(--tit-border);
    background-image: none;
    border: none;
    border-radius: 999px;
    overflow: hidden;
    padding: 0;
    height: .75em;
    animation: none;
}

.notification .progress .bar {
    background: linear-gradient(90deg, var(--tit-green-lo), var(--tit-green));
    box-shadow: none;
}

.notification .progress .text { font-size: .75em; }

/* --------------------------------------- menu lateral durante a sessão -- */

.menu {
    background: var(--tit-bg);
    box-shadow: 8px 0 32px -12px rgba(0, 0, 0, .55);
}

/* O painel lateral tem 480px — a marca não cabe; usa-se um cabeçalho compacto */
.menu div.header {
    position: static;
    padding: .3em .45em;
    box-shadow: none;
}

.menu div.header::before { display: none; }

.menu div.header h2 {
    border-left: none;
    padding-left: .6em;
    font-size: .88em;
    letter-spacing: .04em;
    text-transform: none;
    color: #fff;
}

.menu div.header .menu-dropdown { border-left: none; }
.menu div.header .menu-dropdown .menu-title { padding-top: .6em; padding-bottom: .6em; }

.menu div.header.breadcrumbs { background: var(--tit-ink-2); padding: .2em .5em; }

.menu div.header.breadcrumbs .breadcrumb {
    color: rgba(255, 255, 255, .8);
    font-size: .82em;
}

/* Seletor de conexões dentro do painel: não é o cartão da tela inicial */
.menu-contents div.all-connections,
.connection-select-menu div.all-connections {
    max-width: none;
    margin: 0;
    padding: .3em;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.connection-select-menu .menu-dropdown .menu-contents .filter { margin: 0 0 .4em; }

.connection-select-menu .menu-dropdown .menu-contents .filter input {
    border: 1px solid var(--tit-border);
    border-radius: var(--tit-r-sm);
    background-color: var(--tit-surface-2);
    color: var(--tit-text);
    min-width: 0;
}

.menu-body .menu-section {
    background: var(--tit-surface);
    border: 1px solid var(--tit-border);
    border-radius: var(--tit-r-lg);
    box-shadow: var(--tit-sh-sm);
    padding: 1em 1.15em;
    margin-bottom: .9em;
}

.menu-section ~ .menu-section h3 { padding-top: 0; }

.menu-section h3 {
    color: var(--tit-muted);
    font-size: .8em;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* ------------------------------------- demais acentos do tema original -- */

#filesystem-menu div.header.breadcrumbs .breadcrumb:hover { background-color: rgba(255, 255, 255, .12); }

.client-zoom .client-zoom-out:hover,
.client-zoom .client-zoom-in:hover {
    border: 1px solid var(--tit-green-lo);
    background: var(--tit-green-tint);
}

.settings table.session-list tr.session:hover { background: var(--tit-green-tint); }

.transfer .progress .bar {
    background: linear-gradient(90deg, var(--tit-green-lo), var(--tit-green));
    box-shadow: none;
}

.transfer.error { background: #fdeeee; }

#other-connections button.close-other-connection img          { background: var(--tit-danger); }
#other-connections button.close-other-connection:hover img    { background: var(--tit-danger-hi); }

/* ---------------------------------------------------------------- extras -- */

/* Rótulo de conexão compartilhada (extensão JDBC) — na cor da marca */
.jdbc-share-tag {
    background: var(--tit-gray);
    border-radius: 999px;
    padding: .25em .6em;
    font-weight: 600;
}

.settings.connections .connection-list .new-connection,
.settings.connections .connection-list .new-connection-group,
.settings.connections .connection-list .new-sharing-profile {
    font-style: normal;
    opacity: .65;
}

.placeholder { color: var(--tit-faint); text-shadow: none; opacity: .8; font-size: 1.1em; font-weight: 600; }

/* Telas menores */
@media (max-width: 700px) {
    div.header { flex-wrap: wrap; padding: .4em; }
    div.header::before { width: 5.4em; height: 2.1em; }
    div.header h2 { font-size: .75em; padding-left: .9em; }
    div.header .filter { order: 3; flex: 1 1 100%; }
    div.header .filter input, div.header .filter .search-string { min-width: 0; width: 100%; }
    div.all-connections, div.recent-connections, div.settings { margin: .8em .6em; }
    .login-ui .login-dialog { padding: 2em 1.5em 1.7em; }
}