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

}
/*
 * Horizon Acesso — visual do Apache Guacamole 1.6 com a marca Horizon.
 * Paleta igual ao tema Horizon do webmail: lima → verde → esmeralda sobre tinta escura.
 * Este arquivo é concatenado ao app.css do Guacamole; não usar @import aqui (a fonte vem do horizon.js).
 */

:root {
    --hz-lime: #a3e635;
    --hz-green: #22c55e;
    --hz-emerald: #10b981;
    --hz-deep: #0c7a45;
    --hz-ink: #050907;
    --hz-night: #0b1411;
    --hz-night-2: #13221c;
    --hz-text: #13221c;
    --hz-muted: #5d7168;
    --hz-line: #e1eae5;
    --hz-bg: #f3f6f4;
    --hz-card: #ffffff;
    --hz-gradient: linear-gradient(135deg, #a3e635 0%, #22c55e 48%, #10b981 100%);
    --hz-font: 'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
    --hz-radius: 14px;
    --hz-shadow: 0 1px 2px rgba(16, 40, 30, .06), 0 6px 20px rgba(16, 40, 30, .06);
}

body { font-family: var(--hz-font); background: var(--hz-bg); color: var(--hz-text); }
body.client { background: #000; }

/* ------------------------------------------------------------------ LOGIN */

div.login-ui {
    display: flex;
    background: var(--hz-ink);
    font-family: var(--hz-font);
}

/* Painel da marca (esquerda) */
.hz-hero {
    flex: 1 1 55%;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 48px 56px;
    color: #e8f2ed;
    background:
        radial-gradient(900px 600px at 0% 0%, rgba(163, 230, 53, .20), transparent 60%),
        radial-gradient(800px 700px at 100% 100%, rgba(16, 185, 129, .22), transparent 60%),
        radial-gradient(500px 400px at 70% 20%, rgba(34, 197, 94, .12), transparent 70%),
        var(--hz-ink);
}
.hz-hero:before {               /* grade sutil */
    content: "";
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 30%, transparent 75%);
            mask-image: radial-gradient(ellipse at 30% 40%, #000 30%, transparent 75%);
    pointer-events: none;
}
.hz-hero:after {                /* brilho do "horizonte" */
    content: "";
    position: absolute; left: -10%; right: -10%; bottom: -260px; height: 420px;
    border-radius: 50%;
    border-top: 1px solid rgba(163, 230, 53, .45);
    box-shadow: 0 -30px 120px rgba(34, 197, 94, .25);
    pointer-events: none;
}
.hz-hero > * { position: relative; z-index: 1; }

.hz-hero-brand { display: flex; align-items: center; gap: 14px; }
.hz-hero-brand img { width: 48px; height: 48px; filter: drop-shadow(0 6px 18px rgba(34, 197, 94, .35)); }
.hz-hero-brand strong { display: block; font-size: 20px; letter-spacing: .14em; font-weight: 800; color: #fff; }
.hz-hero-brand span { display: block; font-size: 13px; color: #9fb8ad; letter-spacing: .04em; }

.hz-hero-text { max-width: 520px; text-align: left; }
.hz-hero-text h1 {
    font-size: clamp(32px, 3.4vw, 48px);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #fff;
    margin: 0 0 18px;
}
.hz-hero-text h1 em {
    font-style: normal;
    background: var(--hz-gradient);
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
}
.hz-hero-text > p { font-size: 16px; line-height: 1.6; color: #a9bfb5; margin: 0 0 32px; }

.hz-hero-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.hz-hero-list li {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .07);
    backdrop-filter: blur(6px);
    font-size: 14px; line-height: 1.5; color: #a9bfb5;
}
.hz-hero-list li b { display: block; color: #fff; font-weight: 600; font-size: 15px; margin-bottom: 2px; }

.hz-ico {
    flex: 0 0 38px; height: 38px; border-radius: 10px;
    background-color: rgba(34, 197, 94, .14);
    background-repeat: no-repeat; background-position: center; background-size: 20px;
    border: 1px solid rgba(163, 230, 53, .25);
}
.hz-ico-screen { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3e635' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='3' width='20' height='14' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E"); }
.hz-ico-print  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3e635' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V2h12v7'/%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'/%3E%3Crect x='6' y='14' width='12' height='8'/%3E%3C/svg%3E"); }
.hz-ico-lock   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3e635' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); }

.hz-hero-foot { font-size: 12px; color: #6f8a7f; }

/* Coluna do formulário (direita) */
.login-ui .login-dialog-middle {
    flex: 0 0 min(520px, 45%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
    background: var(--hz-bg);
    position: relative;
    z-index: 2;
}
.login-ui .login-dialog,
.login-ui .login-dialog.notification {
    max-width: 400px;
    width: 100%;
    font-size: 15px;
    padding: 36px 32px 24px;
    background: var(--hz-card);
    color: var(--hz-text);
    border: 1px solid var(--hz-line);
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(10, 40, 25, .10), 0 2px 6px rgba(10, 40, 25, .05);
}
.login-ui .login-dialog .logo,
.login-ui .login-dialog .version { display: none; }

.hz-card-head { text-align: center; margin-bottom: 26px; }
.hz-card-head img {
    width: 72px; height: 72px; display: block; margin: 0 auto 16px;
    filter: drop-shadow(0 10px 22px rgba(34, 197, 94, .35));
}
.hz-card-head h2 { text-transform: none; margin: 0 0 6px; font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: var(--hz-text); }
.hz-card-head p { margin: 0; font-size: 14px; color: var(--hz-muted); }
.login-ui.continuation .hz-card-head img { display: none; }

/* Campos: rótulo em cima, ícone dentro */
.login-ui .login-fields .labeled-field { margin-bottom: 16px; z-index: auto; }
.login-ui .login-fields .labeled-field .field-header {
    position: static; z-index: auto; opacity: 1;
    margin: 0 0 7px; font-size: 13px; font-weight: 600; color: #33463e;
}
.login-ui .login-dialog .login-fields input,
.login-ui .login-fields .labeled-field.empty input {
    height: 50px;
    margin: 0;
    padding: 0 44px 0 46px;
    font-family: var(--hz-font);
    font-size: 15px;
    color: var(--hz-text);
    border: 1.5px solid #d5e2db;
    border-radius: 12px;
    background-color: #f8fbf9;
    background-repeat: no-repeat;
    background-position: 15px center;
    background-size: 19px;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
    outline: none;
}
.login-ui .login-fields .labeled-field .username-field input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b8077' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
.login-ui .login-fields .labeled-field .password-field input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b8077' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}
.login-ui .login-dialog .login-fields input:hover { border-color: #b9cfc3; }
.login-ui .login-dialog .login-fields input:focus,
.login-ui .login-fields .labeled-field input:focus {
    border-color: var(--hz-green);
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, .15);
}
/* senha salva pelo navegador: não deixar o fundo amarelo/azul */
.login-ui .login-fields input:-webkit-autofill,
.login-ui .login-fields input:-webkit-autofill:hover,
.login-ui .login-fields input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #f8fbf9 inset !important;
    -webkit-text-fill-color: var(--hz-text) !important;
}

/* botão de mostrar/ocultar senha */
.login-ui .password-field { position: relative; }
.login-ui .login-fields .form-field .password-field .toggle-password {
    display: block;
    position: absolute; right: 10px; top: 50%;
    width: 30px; height: 30px; margin-top: -15px;
    border-radius: 8px;
    background-size: 18px; background-position: center; background-repeat: no-repeat;
    opacity: .55; cursor: pointer;
}
.login-ui .login-fields .form-field .password-field .toggle-password:hover { opacity: .9; background-color: #edf4f0; }

/* botão Entrar */
.login-ui .login-dialog .buttons { margin: 8px 0 0; }
.login-ui .login-dialog .buttons input[type=submit] {
    height: 50px;
    border: 0;
    border-radius: 12px;
    background: var(--hz-gradient);
    color: #04130b;
    font-family: var(--hz-font);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .01em;
    text-shadow: none;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(34, 197, 94, .30);
    transition: transform .12s, box-shadow .12s, filter .12s;
}
.login-ui .login-dialog .buttons input[type=submit]:hover { filter: brightness(1.05); box-shadow: 0 14px 30px rgba(34, 197, 94, .38); }
.login-ui .login-dialog .buttons input[type=submit]:active { transform: translateY(1px); box-shadow: 0 6px 14px rgba(34, 197, 94, .3); }
.login-ui .login-dialog .buttons input[type=submit]:disabled { filter: grayscale(.4); opacity: .7; }

.hz-card-foot {
    margin-top: 22px; padding-top: 18px;
    border-top: 1px solid var(--hz-line);
    text-align: center; font-size: 13px; color: var(--hz-muted);
}
.hz-card-foot a { color: var(--hz-deep); font-weight: 600; text-decoration: none; }
.hz-card-foot a:hover { text-decoration: underline; }
.hz-card-foot .hz-sep { margin: 0 8px; opacity: .5; }
.hz-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: var(--hz-green); margin-right: 4px; vertical-align: 1px;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, .18);
}

/* erro de login: aviso flutuante */
.login-ui.error p.login-error {
    left: 50%; right: auto; top: 20px;
    transform: translateX(-50%);
    width: calc(100% - 32px); max-width: 420px;
    margin: 0; padding: 14px 18px 14px 46px;
    box-sizing: border-box;
    font-family: var(--hz-font); font-size: 14px; font-weight: 500; text-align: left;
    color: #8f1d1d;
    background: #fff5f5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E") no-repeat 16px center / 20px;
    border: 1px solid #f5c2c2;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(120, 20, 20, .12);
    z-index: 30;
}

/* tela pequena: só o cartão, sobre o fundo escuro da marca */
@media (max-width: 960px) {
    .hz-hero { display: none; }
    .login-ui .login-dialog-middle {
        flex: 1 1 auto;
        padding: 20px 16px;
        background:
            radial-gradient(600px 400px at 0% 0%, rgba(163, 230, 53, .18), transparent 60%),
            radial-gradient(600px 500px at 100% 100%, rgba(16, 185, 129, .22), transparent 60%),
            var(--hz-ink);
    }
    .login-ui .login-dialog,
    .login-ui .login-dialog.notification { padding: 30px 22px 20px; border: 0; }
}

/* --------------------------------------------------- ÁREA LOGADA: BARRA */

.view { position: relative; }

.hz-topbar {
    height: 64px;
    display: flex; align-items: center;
    padding: 0 24px;
    background: linear-gradient(90deg, var(--hz-night) 0%, #0f1f18 60%, #10291d 100%);
    border-bottom: 1px solid rgba(163, 230, 53, .14);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .2);
}
.hz-topbar-brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.hz-topbar-brand img { width: 34px; height: 34px; filter: drop-shadow(0 3px 10px rgba(34, 197, 94, .35)); }
.hz-topbar-brand span { font-size: 16px; color: #b9cdc4; font-weight: 500; }
.hz-topbar-brand strong { color: #fff; font-weight: 800; letter-spacing: .12em; margin-right: 4px; }

/* menu do usuário vai para a barra escura, à direita */
.home-view .header .user-menu,
.settings-view > .header .user-menu,
.manage-connection > .header .user-menu,
.manage-connection-group > .header .user-menu,
.manage-sharing-profile > .header .user-menu,
.manage-user > .header .user-menu,
.manage-user-group > .header .user-menu,
.import > .header .user-menu {
    position: absolute; top: 12px; right: 20px; z-index: 15;
}
.view .user-menu .menu-dropdown {
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    transition: background .15s;
}
.view .user-menu .menu-dropdown:hover { background: rgba(255, 255, 255, .12); }
.view .user-menu .menu-dropdown.open { background: rgba(255, 255, 255, .16); }
.view .user-menu .menu-dropdown .menu-title {
    color: #fff; font-weight: 600; font-size: 14px;
    padding: 9px 36px 9px 40px;
    background-position: 14px center; background-size: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3e635' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
.view .user-menu .menu-dropdown .menu-indicator {
    width: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-size: 14px;
}

/* lista suspensa (todos os menus) */
.menu-dropdown .menu-contents {
    top: calc(100% + 8px);
    min-width: 220px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--hz-line);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(10, 40, 25, .16);
    overflow: hidden;
}
.menu-dropdown .menu-contents li a {
    border-radius: 9px; padding: 10px 12px 10px 38px;
    font-size: 14px; color: var(--hz-text);
    background-position: 12px center;
}
.menu-dropdown .menu-contents li a:hover { background-color: #eef7f2; }
.menu-dropdown .menu-contents .page-list ul + ul,
.menu-dropdown .menu-contents ul + ul,
.menu-dropdown .menu-contents .page-list + ul { border-top: 1px solid var(--hz-line); margin-top: 4px; padding-top: 4px; }
.menu-dropdown .menu-contents li a.danger { background-color: transparent; color: #b42318; }
.menu-dropdown .menu-contents li a.danger:hover { background-color: #fdeeee; }
.user-menu .menu-dropdown .menu-contents .profile { width: auto; margin: 8px 10px 6px; padding-bottom: 10px; border-bottom: 1px solid var(--hz-line); }

/* ---------------------------------------------------- ÁREA LOGADA: HOME */

.hz-welcome,
.home-view .connection-list-ui { max-width: 1180px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.hz-welcome { padding-top: 32px; }
.hz-welcome h1 { text-align: left; margin: 0 0 8px; font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--hz-text); }
.hz-welcome p { margin: 0; max-width: 720px; font-size: 14.5px; line-height: 1.6; color: var(--hz-muted); }
.hz-welcome kbd, .hz-hero kbd {
    display: inline-block; padding: 1px 7px; border-radius: 6px;
    font-family: var(--hz-font); font-size: 12px; font-weight: 600;
    color: var(--hz-text); background: #fff; border: 1px solid #cfdcd5; border-bottom-width: 2px;
}
.home-view .connection-list-ui { padding-bottom: 56px; }

/* títulos de seção */
.view .header,
.view .header:not(.ng-hide) ~ .header,
.view .header:not(.ng-hide) ~ * .header {
    background: transparent; border: 0; box-shadow: none;
    align-items: center;
}
.view .header h2 {
    margin: 0; padding: 28px 0 14px;
    font-size: 17px; font-weight: 700; color: var(--hz-text);
    text-transform: none; letter-spacing: -.01em;
}
.home-view .header .filter { padding: 0; margin: 14px 0 0 16px; }
.view .header .filter input,
.filter .search-string {
    height: 40px; min-width: 260px;
    border: 1.5px solid #d5e2db !important;
    border-radius: 10px !important;
    background-color: #fff !important;
    font-family: var(--hz-font); font-size: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b8077' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: 17px !important; background-position: 12px center !important;
    padding-left: 38px !important;
    box-sizing: border-box;
    outline: none;
}
.filter .search-string:focus { border-color: var(--hz-green) !important; box-shadow: 0 0 0 4px rgba(34, 197, 94, .14); }

/* acessados recentemente: miniaturas */
div.recent-connections {
    margin: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px;
}
.recent-connections .connection {
    display: block; position: relative; margin: 0; padding: 0;
    background: var(--hz-card); border: 1px solid var(--hz-line); border-radius: var(--hz-radius);
    box-shadow: var(--hz-shadow); overflow: hidden;
    text-align: left;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.recent-connections .connection:hover {
    background: var(--hz-card); border-color: rgba(34, 197, 94, .55);
    transform: translateY(-2px); box-shadow: 0 14px 30px rgba(16, 60, 40, .12);
}
.recent-connections .connection a { color: inherit; text-decoration: none; display: block; }
.recent-connections .connection .thumbnail {
    margin: 0; aspect-ratio: 16 / 10;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 50% 120%, rgba(34, 197, 94, .25), transparent 60%), var(--hz-night);
}
.recent-connections .connection .thumbnail > * { border: 0; box-shadow: none; max-width: 100%; max-height: 100%; background: transparent; }
.recent-connections .connection .caption { padding: 12px 14px; }
.recent-connections .connection .caption .name { margin: 0; font-weight: 600; font-size: 14px; color: var(--hz-text); }
.recent-connections .connection .remove-recent {
    top: 8px; right: 8px; width: 24px; height: 24px; padding: 4px; box-sizing: border-box;
    border-radius: 8px; background: rgba(255, 255, 255, .9); opacity: .0;
}
.recent-connections .connection:hover .remove-recent { opacity: .8; }
.recent-connections p.placeholder {
    grid-column: 1 / -1; margin: 0; padding: 18px 20px;
    border: 1.5px dashed #cfdcd5; border-radius: var(--hz-radius);
    color: var(--hz-muted); font-size: 14px; background: rgba(255, 255, 255, .5);
}

/* todos os computadores: cartões */
div.all-connections { margin: 0; }
.all-connections .group-list-page,
.all-connections .connection-group > .children {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px;
}
.all-connections .list-item:has(> .connection-group) { grid-column: 1 / -1; }
.all-connections .list-item .caption,
.all-connections .list-item:not(.selected) .caption:hover { padding: 0; background: transparent; }

.all-connections .connection > .caption {
    background: var(--hz-card);
    border: 1px solid var(--hz-line);
    border-radius: var(--hz-radius);
    box-shadow: var(--hz-shadow);
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.all-connections .connection > .caption:hover {
    border-color: rgba(34, 197, 94, .6);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(16, 60, 40, .12);
}
a.home-connection {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 16px 16px 16px;
    text-decoration: none; color: var(--hz-text);
}
a.home-connection .icon.type {
    flex: 0 0 46px; width: 46px; height: 46px; margin: 0;
    border-radius: 12px;
    background-color: #e9f7ef;
    background-size: 24px; background-position: center; background-repeat: no-repeat;
    border: 1px solid #d3eedd;
}
a.home-connection .name {
    flex: 1 1 auto; margin: 0; padding: 0;
    font-size: 15px; font-weight: 600; color: var(--hz-text);
    line-height: 1.35; overflow: hidden; word-break: break-word;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
a.home-connection:after {
    content: "Abrir";
    flex: 0 0 auto;
    font-size: 13px; font-weight: 700; color: var(--hz-deep);
    padding: 7px 12px 7px 12px; border-radius: 999px;
    background: #eaf7ef;
    transition: background .15s, color .15s;
}
.all-connections .connection > .caption:hover a.home-connection:after { background: var(--hz-gradient); color: #04130b; }
.caption.active * { opacity: 1; }
.caption .activeUserCount,
a.home-connection .activeUserCount {
    float: none; margin: 0; font-style: normal;
    font-size: 11.5px; font-weight: 600; color: #8a5a00;
    background: #fff4d6; border: 1px solid #f6dd99; border-radius: 999px; padding: 3px 8px;
}

/* grupos de computadores */
.all-connections .connection-group > .caption {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 4px 6px;
    border-bottom: 1px solid var(--hz-line);
    margin-bottom: 12px;
}
.all-connections .connection-group > .caption .icon.expand { width: 22px; height: 22px; background-size: 16px; cursor: pointer; }
a.home-connection-group {
    color: var(--hz-text); text-decoration: none;
    font-size: 15px; font-weight: 700;
}
.expandable.expanded > .children > .list-item:before,
.expandable.expanded > .children > .list-item:after { display: none; }
.all-connections .connection-group > .children { margin: 0 0 18px; padding: 0; }

/* paginação */
.pager .set-page.current { background: var(--hz-night); color: #fff; border-color: var(--hz-night); border-radius: 8px; }

/* ------------------------------------- CONFIGURAÇÕES E TELAS DE CADASTRO */

.settings-view .page-tabs,
.manage-user .page-tabs,
.manage-user-group .page-tabs { max-width: 1180px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.page-tabs .page-list ul,
.section-tabs ul {
    background: transparent; border: 0;
    display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 8px;
}
.page-tabs .page-list ul + ul,
.section-tabs ul + ul { font-size: 13px; }
.page-tabs .page-list li a[href],
.section-tabs li a {
    border-radius: 999px; padding: 8px 16px;
    font-size: 14px; font-weight: 600; color: #33463e;
    background: #fff; border: 1px solid var(--hz-line);
}
.page-tabs .page-list li a[href]:hover,
.section-tabs li a:hover { background: #eef7f2; }
.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: var(--hz-night); color: #fff; border-color: var(--hz-night); }

.settings-view > .header,
.manage-connection > .header,
.manage-connection-group > .header,
.manage-sharing-profile > .header,
.manage-user > .header,
.manage-user-group > .header,
.import > .header { max-width: 1180px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }

div.settings,
.settings-view .settings.section,
.view > .section,
.view .settings.section {
    max-width: 1132px;
    margin: 12px auto 20px;
    padding: 22px 24px;
    background: var(--hz-card);
    border: 1px solid var(--hz-line);
    border-radius: 16px;
    box-shadow: var(--hz-shadow);
    box-sizing: border-box;
}
.settings-view .preferences > .header { max-width: 1132px; margin: 8px auto 0; padding: 0; }
.settings p, .view .section p { color: var(--hz-muted); font-size: 14px; line-height: 1.6; }

/* botões */
a.button, button, input[type=submit] {
    font-family: var(--hz-font);
    font-weight: 600; font-size: 14px;
    border: 0; border-radius: 10px;
    padding: 9px 16px;
    background-color: var(--hz-night-2);
    color: #fff; text-shadow: none;
    cursor: pointer;
    transition: background-color .15s, box-shadow .15s;
}
a.button:hover, button:hover, input[type=submit]:hover { background-color: #1f3a2f; }
a.button:active, button:active, input[type=submit]:active { box-shadow: none; background-color: #0b1411; }
button:disabled, input[type=submit]:disabled, button.danger:disabled { background-color: #9fb0a8; color: #fff; opacity: .7; }
a.button.danger, button.danger { background: #dc2626; }
a.button.danger:hover, button.danger:hover { background: #b91c1c; }
a.button.add-connection, a.button.add-connection-group, a.button.add-user,
a.button.add-user-group, a.button.import-connections { font-size: 13px; padding: 9px 16px; }
a.button.add-connection:before, a.button.add-connection-group:before, a.button.add-user:before,
a.button.add-user-group:before, a.button.import-connections:before { display: none; }
a.button.add-connection, a.button.add-user { background: var(--hz-gradient); color: #04130b; }
a.button.add-connection:hover, a.button.add-user:hover { filter: brightness(1.05); background: var(--hz-gradient); }

/* campos dos formulários de cadastro */
.view input[type=text], .view input[type=password], .view input[type=number], .view input[type=email],
.view input[type=date], .view input[type=time], .view select, .view textarea {
    font-family: var(--hz-font); font-size: 14px; color: var(--hz-text);
    border: 1.5px solid #d5e2db; border-radius: 9px;
    padding: 7px 10px; background: #fff; box-sizing: border-box; outline: none;
}
.view input[type=text]:focus, .view input[type=password]:focus, .view input[type=number]:focus,
.view input[type=email]:focus, .view select:focus, .view textarea:focus {
    border-color: var(--hz-green); box-shadow: 0 0 0 3px rgba(34, 197, 94, .14);
}
.view .form .form-header, .view h3 { font-size: 15px; font-weight: 700; color: var(--hz-text); }
.settings table.properties th, .view table.properties th { color: #33463e; font-weight: 600; font-size: 14px; }
.settings table.session-list tr.session:hover,
.list-item:not(.selected) .caption:hover,
.menu-dropdown .menu-contents li a:hover { background-color: #eef7f2; }
.list-item.selected { background: #e2f5ea; }
.list-item .name { color: var(--hz-text); }
table.history-list, table.sorted { border-collapse: collapse; }
table.sorted th, table.history-list th { font-weight: 600; color: #33463e; border-bottom: 1px solid var(--hz-line); }
table.sorted td, table.history-list td { border-bottom: 1px solid #eef3f0; }

/* ------------------------------------------------ AVISOS E JANELAS */

.notification {
    font-family: var(--hz-font);
    border: 1px solid var(--hz-line);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(10, 40, 25, .20);
    overflow: hidden;
}
.notification.error { background: #fff; border-color: #f5c2c2; }
.notification.error .title-bar { color: #b42318; }
.notification .title-bar {
    font-size: 17px; font-weight: 700; text-transform: none;
    background: transparent; box-shadow: none;
    border-bottom: 1px solid var(--hz-line);
    padding: 16px 20px; margin-bottom: 4px;
}
.notification .progress { border-radius: 999px; overflow: hidden; }
.notification .progress .bar { background: var(--hz-gradient); box-shadow: none; }

/* botão de mostrar senha: olho próprio */
/* (o Guacamole troca o ícone conforme o tipo do campo: senha oculta → olho, visível → olho riscado) */
.login-ui .form-field .password-field input[type=password] ~ .icon.toggle-password {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2333463e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
.login-ui .form-field .password-field input[type=text] ~ .icon.toggle-password {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2333463e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 19c-6.5 0-10-7-10-7a18.5 18.5 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c6.5 0 10 7 10 7a18.5 18.5 0 0 1-2.16 3.19'/%3E%3Cpath d='M14.12 14.12a3 3 0 1 1-4.24-4.24'/%3E%3Cpath d='m1 1 22 22'/%3E%3C/svg%3E");
}
.login-ui .form-field .password-field .icon.toggle-password { background-size: 18px; cursor: pointer; }
/* o Guacamole centraliza todo h1 */
.hz-hero-text h1, .hz-welcome h1 { text-align: left; padding: 0; }
.recent-connections p.placeholder { text-align: left; font-weight: 400; }

/* Ícones dos campos de login: travados aqui porque a regra do Guacamole
   ".labeled-field input:focus { background: #fff }" (shorthand) volta o fundo para "repeat"
   e o bonequinho/cadeado se multiplica pelo campo inteiro em alguns navegadores. */
.login-ui .login-fields .labeled-field .username-field input,
.login-ui .login-fields .labeled-field .username-field input:focus,
.login-ui .login-fields .labeled-field .username-field input:hover,
.login-ui .login-fields .labeled-field.empty .username-field input,
.login-ui .login-fields .labeled-field .password-field input,
.login-ui .login-fields .labeled-field .password-field input:focus,
.login-ui .login-fields .labeled-field .password-field input:hover,
.login-ui .login-fields .labeled-field.empty .password-field input {
    background-repeat: no-repeat !important;
    background-position: 15px center !important;
    background-size: 19px 19px !important;
}
.login-ui .login-fields .labeled-field .username-field input:focus,
.login-ui .login-fields .labeled-field .password-field input:focus { background-color: #fff !important; }
.login-ui .login-fields .form-field .password-field .icon.toggle-password {
    width: 30px !important; height: 30px !important;
    background-size: 18px 18px !important; background-repeat: no-repeat !important; background-position: center !important;
}