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

}
/* =========================================================
   Vlcode Remote App – Branding conservador
   Mantém a UI padrão do Guacamole e ajusta apenas branding,
   superfícies escuras e destaque Vlcode.
   ========================================================= */

:root {
    --vl-bg: #141826;
    --vl-bg-soft: #1b2133;
    --vl-surface: #242c40;
    --vl-border: rgba(255, 255, 255, 0.08);
    --vl-text: #e7edf8;
    --vl-text-soft: #b8c3d9;
    --vl-accent: #1e4976;
    --vl-accent-soft: rgba(30, 73, 118, 0.20);
}

html,
body,
body.login,
body.home,
body.settings,
body.manage,
body.client,
body.view {
    background: var(--vl-bg) !important;
    color: var(--vl-text) !important;
}

.login-ui,
.login-ui .login-dialog {
    background: transparent !important;
}

.login-ui {
    background: radial-gradient(circle at top, #1f2b49 0%, var(--vl-bg) 58%) !important;
}

.login-ui .login-dialog {
    max-width: 420px !important;
    padding: 40px 36px 32px !important;
    border-radius: 16px !important;
    background: rgba(27, 33, 51, 0.96) !important;
    border: 1px solid var(--vl-border) !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45) !important;
}

.login-ui .login-dialog .logo,
.header .logo,
.page-header .logo {
    background-image: url('/app/ext/vlcode/images/vlcode-logo.jpg') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.login-ui .login-dialog h1,
.login-ui .login-dialog h2,
.login-ui .login-dialog .welcome h1,
.login-ui .login-dialog label,
.login-ui .login-dialog .version,
.login-ui .login-dialog p {
    color: var(--vl-text) !important;
}

.login-ui .login-dialog input[type="text"],
.login-ui .login-dialog input[type="password"],
.login-ui .login-dialog input.field,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
select,
textarea {
    background: var(--vl-surface) !important;
    color: var(--vl-text) !important;
    border: 1px solid var(--vl-border) !important;
    box-shadow: none !important;
}

.login-ui .login-dialog input[type="text"]::placeholder,
.login-ui .login-dialog input[type="password"]::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--vl-text-soft) !important;
}

.login-ui .login-dialog input:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--vl-accent) !important;
    box-shadow: 0 0 0 3px var(--vl-accent-soft) !important;
}

.login-ui .login-dialog .buttons input[type="submit"],
.login-ui .login-dialog .buttons button,
button,
input[type="button"],
input[type="submit"] {
    background: var(--vl-accent) !important;
    color: #1a1a1a !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    text-shadow: none !important;
}

.login-ui .login-dialog .buttons input[type="submit"]:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
    filter: brightness(1.05);
}

.header,
.page-header,
.top,
.connection-list-ui .header {
    background: var(--vl-bg-soft) !important;
    color: var(--vl-text) !important;
    border-bottom: 1px solid var(--vl-border) !important;
    box-shadow: none !important;
}

.header a,
.page-header a,
.header .menu-dropdown .menu-title,
.header .user-menu .username,
.connection-list-ui .header h2 {
    color: var(--vl-text-soft) !important;
}

guac-recent-connections,
.recent-connections,
.all-connections,
.group-list,
.group-list-page {
    background: var(--vl-bg-soft) !important;
    color: var(--vl-text) !important;
}

guac-recent-connections,
.recent-connections {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: 18px 18px 12px !important;
    border-bottom: 1px solid var(--vl-border) !important;
}

guac-recent-connections > .connection,
guac-recent-connections > .connection-group,
.recent-connections > .connection,
.recent-connections > .connection-group {
    width: 180px !important;
    flex: 0 0 180px !important;
    min-height: 148px !important;
    background: rgba(36, 44, 64, 0.88) !important;
    border: 1px solid var(--vl-border) !important;
    border-top: 4px solid var(--vl-accent) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

guac-recent-connections > .connection:hover,
guac-recent-connections > .connection-group:hover,
.recent-connections > .connection:hover,
.recent-connections > .connection-group:hover {
    border-color: rgba(30, 73, 118, 0.45) !important;
    box-shadow: 0 0 0 1px rgba(30, 73, 118, 0.22), 0 14px 30px rgba(0, 0, 0, 0.2) !important;
}

guac-recent-connections > .connection .caption,
guac-recent-connections > .connection-group .caption,
.recent-connections > .connection .caption,
.recent-connections > .connection-group .caption {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

guac-recent-connections > .connection a.home-connection,
guac-recent-connections > .connection-group a.home-connection-group,
.recent-connections > .connection a.home-connection,
.recent-connections > .connection-group a.home-connection-group {
    width: 100% !important;
}

.group-list-page {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    align-items: flex-start !important;
}

.list-item {
    width: 180px !important;
    flex: 0 0 180px !important;
}

.list-item > .connection,
.list-item > .connection-group {
    width: 100% !important;
    background: rgba(36, 44, 64, 0.88) !important;
    border: 1px solid var(--vl-border) !important;
    border-top: 4px solid var(--vl-accent) !important;
    border-radius: 14px !important;
    min-height: 148px !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16) !important;
}

guac-recent-connections .list-item,
.recent-connections .list-item {
    width: 180px !important;
    flex: 0 0 180px !important;
}

guac-recent-connections .list-item > .connection,
guac-recent-connections .list-item > .connection-group,
.recent-connections .list-item > .connection,
.recent-connections .list-item > .connection-group {
    width: 100% !important;
    min-height: 148px !important;
    border-top-color: var(--vl-accent) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

guac-recent-connections a.home-connection,
guac-recent-connections a.home-connection-group,
.recent-connections a.home-connection,
.recent-connections a.home-connection-group {
    width: 100% !important;
}

.list-item > .connection:hover,
.list-item > .connection-group:hover {
    border-color: rgba(30, 73, 118, 0.45) !important;
    box-shadow: 0 0 0 1px rgba(30, 73, 118, 0.22), 0 14px 30px rgba(0, 0, 0, 0.2) !important;
}

a.home-connection .name,
a.home-connection-group .name,
.list-item .name {
    color: var(--vl-text) !important;
    -webkit-text-fill-color: var(--vl-text) !important;
    font-weight: 600 !important;
    text-align: center !important;
}

a.home-connection,
a.home-connection-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    min-height: 148px !important;
    padding: 16px 12px !important;
    text-align: center !important;
}

a.home-connection .icon.type,
a.home-connection-group .icon {
    display: block !important;
    margin: 0 auto !important;
}

a.home-connection .name,
a.home-connection-group .name {
    display: block !important;
    margin: 0 auto !important;
    width: 100% !important;
}

.list-item .caption {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

@media (max-width: 900px) {
    .list-item {
        width: 160px !important;
        flex-basis: 160px !important;
    }

    guac-recent-connections,
    .recent-connections {
        padding: 16px 14px 10px !important;
    }
}

table,
.modal-dialog,
.dialog,
.notification {
    background: var(--vl-bg-soft) !important;
    color: var(--vl-text) !important;
    border-color: var(--vl-border) !important;
}

thead th,
label,
.tabs .tab,
.caption,
.copyright,
.footer {
    color: var(--vl-text-soft) !important;
}

.tabs .tab.current,
.tabs .tab:hover,
a,
a:hover {
    color: var(--vl-accent) !important;
}

.connection-list-ui .header h2 {
    color: var(--vl-text) !important;
}

.header .menu-dropdown:hover,
.header .menu-dropdown.open {
    background: rgba(30, 73, 118, 0.10) !important;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--vl-bg) !important;
}

::-webkit-scrollbar-thumb {
    background: #38425e !important;
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #4a587c !important;
}