/*
 * 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}:root{--bg:#02070d;--card:rgba(8,20,32,.94);--input:#081522;--border:#294963;--text:#eef6ff;--muted:#a9b8c7;--blue:#0878e8;--cyan:#16b8ff}
*{box-sizing:border-box}
html,body{margin:0!important;padding:0!important;min-height:100%!important;background:#02070d!important;color:var(--text)!important}
html{background-color:#02070d!important;overscroll-behavior-y:none!important}
body{background-color:#02070d!important;overscroll-behavior-y:none!important}
.login-ui{min-height:100vh!important;height:auto!important;overflow-x:hidden!important;background-color:#02070d!important;background:#02070d url('app/ext/remote-access-portal/resources/images/background.svg') center/cover fixed no-repeat!important;color:var(--text)!important}
.login-ui .login-dialog{width:min(540px,calc(100vw - 32px))!important;max-width:540px!important;padding:34px 46px 28px!important;background:var(--card)!important;border:1px solid rgba(36,104,150,.78)!important;border-radius:18px!important;box-shadow:0 25px 70px rgba(0,0,0,.55),0 0 45px rgba(8,120,232,.10)!important;color:var(--text)!important;backdrop-filter:blur(10px)}
.login-ui .login-dialog .logo{display:block!important;width:100%!important;height:142px!important;margin:0 auto 2px!important;background:url('app/ext/remote-access-portal/resources/images/logo.svg') center/contain no-repeat!important}
.login-ui .login-dialog .version{display:block!important;margin:0!important;padding:0!important;text-align:center!important;background:transparent!important;color:var(--text)!important}
.login-ui .login-dialog .version .app-name{display:block!important;color:#f2f7fc!important;font-size:27px!important;line-height:1.2!important;font-weight:700!important;letter-spacing:1.4px!important}
.login-ui .login-dialog .version .version-number{display:none!important}
.login-ui .login-dialog .version:after{content:"PORTAL";display:block!important;margin:7px auto 0!important;color:#dce8f3!important;font-size:16px!important;letter-spacing:8px!important;font-weight:500!important}
.rap-welcome{text-align:center;margin:26px 0 27px!important}.rap-welcome-title{color:#f1f7ff;font-size:20px;font-weight:600;margin-bottom:7px}.rap-welcome-text{color:#b9c7d4;font-size:14px}
.login-ui .login-fields{margin:0!important;color:var(--text)!important}
.login-ui .login-fields *{color:#e6eef6!important}
.login-ui .login-fields input,.login-ui .login-fields select,.login-ui .login-fields textarea{width:100%!important;min-height:50px!important;padding:12px 15px!important;color:#f6faff!important;-webkit-text-fill-color:#f6faff!important;background:var(--input)!important;border:1px solid var(--border)!important;border-radius:10px!important;outline:none!important;font-size:15px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important}
.login-ui .login-fields input::placeholder,.login-ui .login-fields textarea::placeholder{color:#a9b8c7!important;-webkit-text-fill-color:#a9b8c7!important;opacity:1!important}
.login-ui .login-fields input:focus{border-color:var(--cyan)!important;box-shadow:0 0 0 3px rgba(22,184,255,.13),0 0 20px rgba(22,184,255,.08)!important}
.login-ui .login-fields .form-field{margin-bottom:17px!important}.login-ui .buttons{margin:22px 0 0!important}.login-ui .buttons .login{width:100%!important;height:52px!important;border:0!important;border-radius:10px!important;color:#fff!important;background:linear-gradient(135deg,#0878e8,#16a8f5)!important;box-shadow:0 10px 28px rgba(8,120,232,.30)!important;font-size:16px!important;font-weight:600!important}.login-ui .buttons .login:hover{background:linear-gradient(135deg,#0a88fa,#20b7ff)!important}.login-ui .buttons .continue-login{display:none!important}
.rap-security{margin:27px 0 0;padding-top:20px;border-top:1px solid rgba(52,82,108,.45);text-align:center;color:#aebdcc;font-size:15px}.rap-shield{display:inline-block;margin-right:9px;color:#c7d7e6;font-size:17px}
.login-ui .login-error{color:#ffd9dd!important;background:rgba(255,95,109,.12)!important;border:1px solid rgba(255,95,109,.35)!important;border-radius:9px!important}
@media(max-width:600px){.login-ui .login-dialog{width:calc(100vw - 20px)!important;padding:28px 23px 24px!important}.login-ui .login-dialog .logo{height:112px!important}.login-ui .login-dialog .version .app-name{font-size:22px!important}.rap-welcome{margin:22px 0!important}}

/* =========================================================
   REMOTE ACCESS PORTAL - logged-in home screen
   ========================================================= */
:root {
    --rap-bg: #02070d;
    --rap-panel: rgba(7, 18, 30, .94);
    --rap-border: rgba(74, 176, 235, .22);
    --rap-border-hover: rgba(66, 196, 255, .65);
    --rap-cyan: #35c8ff;
    --rap-text: #f4f8fc;
    --rap-muted: #91a5b8;
}
html, body, #content, #content > * {
    background: var(--rap-bg) !important;
    color: var(--rap-text) !important;
}
#content {
    background: radial-gradient(circle at 15% 0%, rgba(30,126,190,.13), transparent 35%), radial-gradient(circle at 90% 20%, rgba(0,150,255,.08), transparent 30%), var(--rap-bg) !important;
}
.home .connection, .home .connection-group, .connection, .connection-group, .recent-connection, .active-connection {
    background: linear-gradient(145deg, rgba(10,27,43,.96), rgba(5,16,27,.96)) !important;
    border: 1px solid var(--rap-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.28) !important;
    color: var(--rap-text) !important;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease !important;
}
.home .connection:hover, .home .connection-group:hover, .connection:hover, .connection-group:hover {
    border-color: var(--rap-border-hover) !important;
    box-shadow: 0 12px 30px rgba(0,125,220,.18) !important;
    transform: translateY(-2px);
}
.home .connection-name, .connection-name, .connection .name, .connection-group .name { color: var(--rap-text) !important; }
.home .connection-description, .connection-description, .connection .description { color: var(--rap-muted) !important; }
.home input[type="text"], .home input[type="search"], #content input[type="text"], #content input[type="search"], .filter input {
    background: #071624 !important; color: var(--rap-text) !important; -webkit-text-fill-color: var(--rap-text) !important;
    border: 1px solid var(--rap-border) !important; border-radius: 9px !important;
}
.home input[type="text"]:focus, .home input[type="search"]:focus, #content input[type="text"]:focus, #content input[type="search"]:focus {
    border-color: var(--rap-cyan) !important; box-shadow: 0 0 0 3px rgba(53,200,255,.10) !important; outline: none !important;
}
.home input::placeholder, #content input::placeholder { color: #8195a8 !important; opacity: 1 !important; }
.user-menu, .user-menu .menu, #content .menu, #content .dropdown-menu {
    background: #071624 !important; color: var(--rap-text) !important; border: 1px solid var(--rap-border) !important; box-shadow: 0 14px 35px rgba(0,0,0,.45) !important;
}
.user-menu a, .user-menu button, #content .menu a, #content .dropdown-menu a { color: var(--rap-text) !important; }
.user-menu a:hover, .user-menu button:hover, #content .menu a:hover, #content .dropdown-menu a:hover { background: rgba(53,200,255,.10) !important; }
#content a { color: #58cfff !important; }
.rap-home-brand { display:flex !important; align-items:center !important; gap:13px !important; padding:22px 28px 10px !important; color:#f4f8fc !important; }
.rap-home-logo { width:46px !important; height:46px !important; background:url('app/ext/remote-access-portal/resources/images/logo.svg') center/contain no-repeat !important; flex:0 0 46px !important; }
.rap-home-title { font-size:20px !important; font-weight:800 !important; letter-spacing:3px !important; line-height:1.05 !important; }
.rap-home-subtitle { font-size:10px !important; letter-spacing:5px !important; color:#43c9ff !important; margin-top:4px !important; }
#content ::-webkit-scrollbar { width:9px; height:9px; }
#content ::-webkit-scrollbar-track { background:#030b13; }
#content ::-webkit-scrollbar-thumb { background:#173b55; border-radius:9px; }
#content ::-webkit-scrollbar-thumb:hover { background:#236488; }

/* =========================================================
   REMOTE ACCESS PORTAL - global navigation / user menu
   Guacamole's user menu lives outside #content, so it needs
   its own dark-theme overrides.
   ========================================================= */
.user-menu,
.user-menu .menu,
.user-menu .menu-content,
.user-menu .menu-contents,
.user-menu .menu-body,
.user-menu .menu-section,
.user-menu .profile,
.user-menu .action-list,
.user-menu .page-list {
    color: #f4f8fc !important;
}

.user-menu .menu-dropdown,
.user-menu .menu-dropdown > *,
.user-menu .menu-contents,
.user-menu .menu-content {
    background: #071624 !important;
    color: #f4f8fc !important;
    border-color: rgba(74,176,235,.28) !important;
}

/* The username button in the upper-right corner */
.user-menu .menu-dropdown {
    color: #eef6ff !important;
    background: rgba(5,16,27,.94) !important;
    border: 1px solid rgba(74,176,235,.30) !important;
    border-radius: 9px !important;
    box-shadow: 0 5px 18px rgba(0,0,0,.25) !important;
}
.user-menu .menu-dropdown:hover,
.user-menu .menu-dropdown:focus,
.user-menu .menu-dropdown.open {
    color: #ffffff !important;
    background: rgba(11,34,53,.98) !important;
    border-color: rgba(53,200,255,.60) !important;
}

/* Dropdown panel */
.user-menu .menu-contents,
.user-menu .menu-content {
    min-width: 230px !important;
    background: rgba(7,22,36,.98) !important;
    border: 1px solid rgba(74,176,235,.30) !important;
    border-radius: 12px !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.55), 0 0 25px rgba(0,130,220,.08) !important;
    overflow: hidden !important;
}

.user-menu .profile {
    padding: 16px 18px !important;
    background: linear-gradient(135deg, rgba(15,48,72,.72), rgba(5,20,32,.72)) !important;
    border-bottom: 1px solid rgba(74,176,235,.20) !important;
}
.user-menu .profile .full-name,
.user-menu .profile .full-name a {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 700 !important;
}
.user-menu .profile .organizational-role,
.user-menu .profile .organization {
    color: #9fb4c7 !important;
    -webkit-text-fill-color: #9fb4c7 !important;
}

/* Menu entries - Guacamole uses action-list/page-list */
.user-menu .action-list,
.user-menu .page-list,
.user-menu ul {
    margin: 0 !important;
    padding: 6px 0 !important;
    list-style: none !important;
}
.user-menu .action-list li,
.user-menu .page-list li,
.user-menu ul li {
    background: transparent !important;
    border: 0 !important;
}
.user-menu .action-list a,
.user-menu .page-list a,
.user-menu ul a,
.user-menu a {
    display: block !important;
    color: #e8f2fb !important;
    -webkit-text-fill-color: #e8f2fb !important;
    background: transparent !important;
    text-decoration: none !important;
    padding: 10px 18px !important;
    border: 0 !important;
}
.user-menu .action-list a:hover,
.user-menu .action-list a:focus,
.user-menu .page-list a:hover,
.user-menu .page-list a:focus,
.user-menu ul a:hover,
.user-menu ul a:focus {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: rgba(53,200,255,.12) !important;
}

/* Make the menu separators dark instead of white */
.user-menu hr,
.user-menu .divider,
.user-menu .action-list + .action-list,
.user-menu .page-list + .action-list {
    border-color: rgba(74,176,235,.18) !important;
}

/* Generic Guacamole dropdown/menu text, including nested page lists */
.menu-dropdown,
.menu-dropdown .menu-contents,
.menu-dropdown .menu-content,
.menu-dropdown .menu-body,
.menu-dropdown .menu-section {
    color: #f4f8fc !important;
}
.menu-dropdown a,
.menu-dropdown button,
.menu-dropdown label,
.menu-dropdown span,
.menu-dropdown h2,
.menu-dropdown h3,
.menu-dropdown p {
    color: #e8f2fb !important;
    -webkit-text-fill-color: #e8f2fb !important;
}
.menu-dropdown a:hover,
.menu-dropdown button:hover {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: rgba(53,200,255,.12) !important;
}

/* Settings / management pages use the same user menu in the header */
.view .header .user-menu,
.header .user-menu {
    color: #f4f8fc !important;
}

/* Prevent any top-level white page area when navigating after login */
html, body {
    background-color: #02070d !important;
    color: #f4f8fc !important;
}

/* =========================================================
   REMOTE ACCESS PORTAL - readable hover / focus states
   Replace Guacamole's light/yellow selection states with
   dark blue/cyan states that keep text readable.
   ========================================================= */

/* Generic interactive elements inside the Guacamole web UI */
#content a:hover,
#content button:hover,
#content input[type="button"]:hover,
#content input[type="submit"]:hover,
#content [role="button"]:hover,
#content [ng-click]:hover,
#content .clickable:hover,
#content .action:hover,
#content .action-list-item:hover,
#content .menu-item:hover {
    background-color: rgba(20, 105, 155, .32) !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: none !important;
}

/* Connection tiles/cards - no pale yellow selection */
.home .connection:hover,
.home .connection-group:hover,
.connection:hover,
.connection-group:hover,
.recent-connection:hover,
.active-connection:hover,
.connection-list .connection:hover,
.connection-list .connection-group:hover {
    background: linear-gradient(145deg, rgba(12, 43, 66, .98), rgba(5, 23, 38, .98)) !important;
    background-color: #0b2b42 !important;
    border-color: #35c8ff !important;
    color: #ffffff !important;
    box-shadow: 0 12px 30px rgba(0, 140, 220, .20), inset 0 0 0 1px rgba(53, 200, 255, .08) !important;
}

.home .connection:hover *,
.home .connection-group:hover *,
.connection:hover *,
.connection-group:hover *,
.recent-connection:hover *,
.active-connection:hover * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Keyboard focus / selected state: cyan outline instead of yellow */
#content a:focus,
#content button:focus,
#content input:focus,
#content select:focus,
#content textarea:focus,
#content [role="button"]:focus,
#content [tabindex]:focus {
    outline: 2px solid rgba(53, 200, 255, .75) !important;
    outline-offset: 2px !important;
    background-color: rgba(20, 105, 155, .22) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Lists, action lists and page navigation */
#content .action-list,
#content .action-list li,
#content .page-list,
#content .page-list li,
#content .menu-contents,
#content .menu-content {
    background-color: transparent !important;
}

#content .action-list a:hover,
#content .action-list button:hover,
#content .page-list a:hover,
#content .page-list button:hover,
#content .action-list li:hover,
#content .page-list li:hover {
    background: rgba(53, 200, 255, .13) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Header/user menu hover */
.user-menu a:hover,
.user-menu button:hover,
.user-menu .menu-item:hover,
.user-menu [role="menuitem"]:hover {
    background: rgba(53, 200, 255, .13) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Remove common browser/default yellow-ish selection backgrounds */
#content ::selection,
.user-menu ::selection {
    background: rgba(53, 200, 255, .35) !important;
    color: #ffffff !important;
}

/* Buttons must remain readable when hovered/pressed */
#content button:hover,
#content input[type="button"]:hover,
#content input[type="submit"]:hover {
    border-color: rgba(53, 200, 255, .65) !important;
    box-shadow: 0 0 0 1px rgba(53, 200, 255, .10) inset !important;
}

#content button:active,
#content input[type="button"]:active,
#content input[type="submit"]:active {
    background: rgba(9, 91, 140, .55) !important;
    color: #ffffff !important;
}

/* =========================================================
   REMOTE ACCESS PORTAL - precise Guacamole 1.6.0 home list
   The selectable targets on the home page use .home-connection.
   Override the stock light hover state explicitly.
   ========================================================= */
#content .home-connection,
#content .home-connection-group {
    -webkit-tap-highlight-color: transparent !important;
    color: #eef6ff !important;
    -webkit-text-fill-color: #eef6ff !important;
}

#content .home-connection:hover,
#content .home-connection:focus,
#content .home-connection:active,
#content .home-connection.active,
#content .home-connection-group:hover,
#content .home-connection-group:focus,
#content .home-connection-group:active {
    background: linear-gradient(90deg, rgba(10,43,67,.98), rgba(8,31,49,.98)) !important;
    background-color: #0a2b43 !important;
    background-image: linear-gradient(90deg, rgba(10,43,67,.98), rgba(8,31,49,.98)) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: rgba(53,200,255,.78) !important;
    box-shadow: inset 0 0 0 1px rgba(53,200,255,.10), 0 5px 18px rgba(0,130,210,.16) !important;
    outline: none !important;
}

#content .home-connection:hover *,
#content .home-connection:focus *,
#content .home-connection:active *,
#content .home-connection.active *,
#content .home-connection-group:hover *,
#content .home-connection-group:focus *,
#content .home-connection-group:active * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Connection icons should remain dark/cyan, never acquire a light hover fill. */
#content .home-connection:hover .icon,
#content .home-connection:focus .icon,
#content .home-connection.active .icon {
    background-color: transparent !important;
    color: #35c8ff !important;
}

/* =========================================================
   REMOTE ACCESS PORTAL - safe opaque navigation menu
   IMPORTANT: do not override Guacamole's positioning/display rules.
   The native menu controls its visibility and geometry.
   ========================================================= */
.user-menu,
.user-menu .menu-dropdown,
.user-menu .menu-contents,
.user-menu .menu-content,
.user-menu .menu-body,
.user-menu .menu-section,
.user-menu .action-list,
.user-menu .page-list,
.user-menu ul,
.user-menu li,
#user-menu,
#user-menu .menu-dropdown,
#user-menu .menu-contents,
#user-menu .menu-content,
#user-menu .action-list,
#user-menu .page-list {
    color: #f4f8fc !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    mix-blend-mode: normal !important;
}

/* Keep Guacamole's native position/display/visibility behavior intact. */
.user-menu .menu-dropdown,
#user-menu .menu-dropdown {
    background: #071624 !important;
    background-color: #071624 !important;
    background-image: none !important;
    border-color: rgba(53,200,255,.30) !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.70), 0 0 0 1px rgba(0,0,0,.35) !important;
}

/* Actual dropdown contents: opaque, but without changing layout/position. */
.user-menu .menu-contents,
.user-menu .menu-content,
#user-menu .menu-contents,
#user-menu .menu-content {
    background: #071624 !important;
    background-color: #071624 !important;
    background-image: none !important;
    opacity: 1 !important;
    border-color: rgba(53,200,255,.30) !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.70), 0 0 0 1px rgba(0,0,0,.35) !important;
}

.user-menu .menu-contents::before,
.user-menu .menu-contents::after,
.user-menu .menu-content::before,
.user-menu .menu-content::after,
#user-menu .menu-contents::before,
#user-menu .menu-contents::after,
#user-menu .menu-content::before,
#user-menu .menu-content::after {
    background: #071624 !important;
    opacity: 1 !important;
}

.user-menu .menu-contents > *,
.user-menu .menu-content > *,
#user-menu .menu-contents > *,
#user-menu .menu-content > * {
    color: #e8f2fb !important;
}

.user-menu .action-list a,
.user-menu .page-list a,
.user-menu .menu-contents a,
.user-menu .menu-content a,
#user-menu .action-list a,
#user-menu .page-list a,
#user-menu .menu-contents a,
#user-menu .menu-content a {
    color: #e8f2fb !important;
    -webkit-text-fill-color: #e8f2fb !important;
    background-color: transparent !important;
}

.user-menu .action-list a:hover,
.user-menu .page-list a:hover,
.user-menu .menu-contents a:hover,
.user-menu .menu-content a:hover,
#user-menu .action-list a:hover,
#user-menu .page-list a:hover,
#user-menu .menu-contents a:hover,
#user-menu .menu-content a:hover {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: rgba(53,200,255,.13) !important;
}

/* On some views (e.g. Settings), the user-menu dropdown ends up nested
   INSIDE #content instead of being a sibling of it. #content is an ID
   selector, so the generic "#content .menu-contents { background:
   transparent }" rule above (needed for other nested lists) would win
   over the plain ".user-menu .menu-contents" rules by specificity alone,
   making the reopened menu transparent. Pin it back down with an
   ID + 2-class selector, which always outranks a bare ID + 1-class one. */
#content .user-menu .menu-dropdown,
#content #user-menu .menu-dropdown {
    background: #071624 !important;
    background-color: #071624 !important;
    background-image: none !important;
    border-color: rgba(53,200,255,.30) !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.70), 0 0 0 1px rgba(0,0,0,.35) !important;
}
#content .user-menu .menu-contents,
#content .user-menu .menu-content,
#content #user-menu .menu-contents,
#content #user-menu .menu-content {
    background: #071624 !important;
    background-color: #071624 !important;
    background-image: none !important;
    opacity: 1 !important;
    border-color: rgba(53,200,255,.30) !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.70), 0 0 0 1px rgba(0,0,0,.35) !important;
}

/* =========================================================
   REMOTE ACCESS PORTAL - ALL CONNECTIONS hover (verified DOM)
   Confirmed structure from Guacamole 1.6.0 source
   (groupList/templates/guacGroupList.html + home/templates/connection.html):

     .list-item > .connection > .caption > a.home-connection
                                              > .icon.type.<protocol>
                                              > span.name
                                              > span.activeUserCount

   Previous attempts used ".connection > a.home-connection" (direct-child "> "),
   but a.home-connection is actually a GRANDCHILD of .connection (nested one
   level deeper inside .caption), so that selector never matched and
   Guacamole's own pale/yellow hover kept showing through on .caption and
   a.home-connection. Fix: neutralize every level's own paint, then apply
   the SAME visual regardless of which nested level is actually :hover'd,
   so there is no visible "transition" through the old colors.
   ========================================================= */

#content .all-connections .list-item,
#content .all-connections .connection,
#content .all-connections .caption,
#content .all-connections a.home-connection {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    color: #eef6ff !important;
    -webkit-text-fill-color: #eef6ff !important;
}

#content .all-connections .connection {
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: background .12s ease, border-color .12s ease !important;
}

/* One single hover/focus look, applied no matter which nested element
   (.connection, .caption, or a.home-connection) is actually being hovered. */
#content .all-connections .connection:hover,
#content .all-connections .connection:focus-within,
#content .all-connections .caption:hover,
#content .all-connections .caption:focus,
#content .all-connections a.home-connection:hover,
#content .all-connections a.home-connection:focus,
#content .all-connections a.home-connection.active {
    background: linear-gradient(90deg, #0c2f49 0%, #0a2439 100%) !important;
    background-color: #0c2f49 !important;
    background-image: linear-gradient(90deg, #0c2f49 0%, #0a2439 100%) !important;
    border-color: #35c8ff !important;
    box-shadow: inset 0 0 0 1px rgba(53,200,255,.16), 0 5px 18px rgba(0,130,210,.16) !important;
}

#content .all-connections .connection:hover *,
#content .all-connections .connection:focus-within *,
#content .all-connections .caption:hover *,
#content .all-connections .caption:focus *,
#content .all-connections a.home-connection:hover *,
#content .all-connections a.home-connection:focus * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

#content .all-connections a.home-connection .icon {
    background-color: transparent !important;
}
#content .all-connections .connection:hover .icon,
#content .all-connections .connection:focus-within .icon,
#content .all-connections a.home-connection:hover .icon,
#content .all-connections a.home-connection:focus .icon {
    color: #35c8ff !important;
    background-color: transparent !important;
}

/* =========================================================
   REMOTE ACCESS PORTAL - global notification / logged-out modal
   Verified via DevTools (Elements panel):

     body.home > div.logged-out-modal[ng-switch-when="loggedOut"]
       > guac-modal (Guacamole's own CSS sets background:#fff here,
                     position:fixed, full-viewport, flex-centered)
       > div.modal-contents
         > ng-transclude > div.notification
             > p (message text, e.g. "You have been logged out.")
             > p (contains the action button, e.g. "Re-login")

   This modal lives completely outside #content and .login-ui, so
   none of the rules above ever reached it - it's Guacamole's
   generic app-wide notification dialog, also used for other
   messages (fatal errors, disconnect notices, etc.), not just logout.
   ========================================================= */
.logged-out-modal,
guac-modal {
    background: rgba(2,7,13,.82) !important;
    justify-content: center !important;
}

.logged-out-modal .modal-contents,
guac-modal .modal-contents {
    background: rgba(7,18,30,.97) !important;
    border: 1px solid rgba(74,176,235,.30) !important;
    border-radius: 14px !important;
    box-shadow: 0 25px 70px rgba(0,0,0,.55), 0 0 45px rgba(8,120,232,.10) !important;
    padding: 32px 40px !important;
    max-width: 420px !important;
    color: #f4f8fc !important;
}

.logged-out-modal .notification,
guac-modal .notification {
    background: transparent !important;
    text-align: center !important;
    color: #f4f8fc !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

.logged-out-modal .notification p,
guac-modal .notification p {
    color: #f4f8fc !important;
    font-size: 16px !important;
    margin: 0 0 22px !important;
}
.logged-out-modal .notification p:last-child,
guac-modal .notification p:last-child {
    margin-bottom: 0 !important;
}

.logged-out-modal .notification button,
.logged-out-modal .notification input[type="submit"],
.logged-out-modal .notification input[type="button"],
.logged-out-modal .notification .button,
guac-modal .notification button,
guac-modal .notification input[type="submit"],
guac-modal .notification input[type="button"],
guac-modal .notification .button {
    background: linear-gradient(135deg,#0878e8,#16a8f5) !important;
    background-image: linear-gradient(135deg,#0878e8,#16a8f5) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 0 !important;
    border-radius: 10px !important;
    padding: 12px 28px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: 0 10px 28px rgba(8,120,232,.30) !important;
}
.logged-out-modal .notification button:hover,
.logged-out-modal .notification input[type="submit"]:hover,
guac-modal .notification button:hover,
guac-modal .notification input[type="submit"]:hover {
    background: linear-gradient(135deg,#0a88fa,#20b7ff) !important;
    background-image: linear-gradient(135deg,#0a88fa,#20b7ff) !important;
}