/*
 * 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}/* Custom logo on login screen */

.login-ui .login-dialog .logo {
    width: 220px;
    height: 100px;

    background-image:
        url('app/ext/jumpbox-branding/resources/images/logo.png');

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


/* Login dialog */

.login-ui .login-dialog {
    border-radius: 12px;
}


/* Application name */

.login-ui .login-dialog .app-name {
    font-size: 24px;
    font-weight: 600;
}


/* Login button */

.login-ui input[type="submit"].login {
    font-size: 16px;
    font-weight: 600;
}
/*
 * Apache Guacamole 1.6.x
 * Dark UI theme
 *
 * Intentionally does NOT alter the actual RDP/VNC/SSH display canvas.
 */

:root {
    --dark-bg: #111318;
    --dark-bg-secondary: #181b21;
    --dark-bg-tertiary: #20242b;

    --dark-panel: #1b1f26;
    --dark-panel-hover: #262b34;

    --dark-border: #343a45;
    --dark-border-light: #444b57;

    --dark-text: #e8eaed;
    --dark-text-secondary: #adb5c2;
    --dark-text-muted: #818a98;

    --dark-input: #22262e;
    --dark-input-focus: #292e38;

    --dark-link: #78b7ff;
    --dark-link-hover: #a4ceff;

    --dark-accent: #3f8cff;
    --dark-accent-hover: #579aff;

    --dark-danger: #e35d6a;
    --dark-success: #5fc98b;
    --dark-warning: #e4b95f;

    --dark-shadow: rgba(0, 0, 0, 0.45);
}


/* ============================================================
 * GLOBAL
 * ============================================================ */

html,
body {
    background: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

body {
    color-scheme: dark;
}

#content,
.page {
    background: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
label,
legend {
    color: var(--dark-text) !important;
}

p,
span {
    border-color: var(--dark-border);
}

hr {
    border-color: var(--dark-border) !important;
}


/* ============================================================
 * LINKS
 * ============================================================ */

a,
a:visited {
    color: var(--dark-link);
}

a:hover,
a:focus {
    color: var(--dark-link-hover);
}


/* ============================================================
 * HEADER
 * ============================================================ */

.header {
    background: var(--dark-bg-secondary) !important;
    color: var(--dark-text) !important;
    border-bottom: 1px solid var(--dark-border) !important;
    box-shadow: 0 2px 8px var(--dark-shadow);
}

.header .title,
.header .username {
    color: var(--dark-text) !important;
}

.header a {
    color: var(--dark-text) !important;
}


/* ============================================================
 * MENUS
 * ============================================================ */

.menu,
.menu-dropdown,
.dropdown,
.user-menu {
    background: var(--dark-panel) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
    box-shadow: 0 4px 16px var(--dark-shadow) !important;
}

.menu .menu-item,
.menu a,
.dropdown a {
    color: var(--dark-text) !important;
}

.menu .menu-item:hover,
.menu a:hover,
.dropdown a:hover {
    background: var(--dark-panel-hover) !important;
    color: #fff !important;
}


/* ============================================================
 * LOGIN
 * ============================================================ */

.login-ui {
    background: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

.login-ui .login-dialog {
    background: var(--dark-panel) !important;
    color: var(--dark-text) !important;

    border: 1px solid var(--dark-border) !important;
    border-radius: 12px !important;

    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.45) !important;
}

.login-ui .login-dialog .app-name {
    color: #fff !important;
}

.login-ui .login-dialog label {
    color: var(--dark-text-secondary) !important;
}

.login-ui .login-dialog .version {
    color: var(--dark-text-muted) !important;
}


/* ============================================================
 * INPUTS
 * ============================================================ */

input,
textarea,
select {
    background: var(--dark-input) !important;
    color: var(--dark-text) !important;

    border: 1px solid var(--dark-border-light) !important;
    border-radius: 4px;
}

input:hover,
textarea:hover,
select:hover {
    border-color: #5b6473 !important;
}

input:focus,
textarea:focus,
select:focus {
    background: var(--dark-input-focus) !important;
    color: #fff !important;

    border-color: var(--dark-accent) !important;
    outline: none !important;

    box-shadow:
        0 0 0 2px rgba(63, 140, 255, 0.2) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--dark-text-muted) !important;
}

input:disabled,
textarea:disabled,
select:disabled {
    background: #191c21 !important;
    color: #6f7783 !important;
    opacity: 1 !important;
}


/* Browser autocomplete */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--dark-text) !important;
    box-shadow:
        0 0 0 1000px var(--dark-input) inset !important;
}


/* ============================================================
 * BUTTONS
 * ============================================================ */

button,
input[type="submit"],
input[type="button"],
.button {
    background: var(--dark-bg-tertiary) !important;
    color: var(--dark-text) !important;

    border: 1px solid var(--dark-border-light) !important;
    border-radius: 4px !important;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.button:hover {
    background: var(--dark-panel-hover) !important;
    color: #fff !important;

    border-color: #596271 !important;
}


/* Primary/login buttons */

.login-ui input[type="submit"],
.login-ui button[type="submit"] {
    background: var(--dark-accent) !important;
    border-color: var(--dark-accent) !important;
    color: #fff !important;
}

.login-ui input[type="submit"]:hover,
.login-ui button[type="submit"]:hover {
    background: var(--dark-accent-hover) !important;
}


/* ============================================================
 * CONNECTION HOME SCREEN
 * ============================================================ */

.home-page {
    background: var(--dark-bg) !important;
}

.connection,
.connection-list .connection,
.connection-group {
    background: var(--dark-panel) !important;
    color: var(--dark-text) !important;

    border-color: var(--dark-border) !important;
}

.connection:hover,
.connection-list .connection:hover,
.connection-group:hover {
    background: var(--dark-panel-hover) !important;
}

.connection .name,
.connection-group .name {
    color: var(--dark-text) !important;
}


/* ============================================================
 * LIST ITEMS
 * ============================================================ */

.list-item,
.list-item.selected,
.object-list-item {
    background: var(--dark-panel) !important;
    color: var(--dark-text) !important;

    border-color: var(--dark-border) !important;
}

.list-item:hover,
.object-list-item:hover {
    background: var(--dark-panel-hover) !important;
}


/* ============================================================
 * SETTINGS / USERS / GROUPS / CONNECTION EDITING
 * ============================================================ */

.settings,
.settings-page,
.preferences,
.properties,
.form,
.section {
    background: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

.settings .header,
.preferences .header {
    background: var(--dark-bg-secondary) !important;
}

.settings-tabs,
.tabs {
    background: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
}

.settings-tabs a,
.tabs a {
    color: var(--dark-text-secondary) !important;
}

.settings-tabs a:hover,
.tabs a:hover {
    color: #fff !important;
}

.settings-tabs .current,
.tabs .current,
.tabs .selected {
    color: #fff !important;
    border-color: var(--dark-accent) !important;
}


/* Parameter / property sections */

.properties .property,
.form .field,
.section {
    border-color: var(--dark-border) !important;
}

.section h2,
.section h3,
.properties h2,
.properties h3 {
    color: var(--dark-text) !important;
}


/* ============================================================
 * TABLES
 * History, users, connections, active sessions
 * ============================================================ */

table {
    background: var(--dark-panel) !important;
    color: var(--dark-text) !important;

    border-color: var(--dark-border) !important;
}

thead,
thead tr,
th {
    background: var(--dark-bg-secondary) !important;
    color: var(--dark-text) !important;

    border-color: var(--dark-border) !important;
}

tbody,
tbody tr,
td {
    background: var(--dark-panel) !important;
    color: var(--dark-text) !important;

    border-color: var(--dark-border) !important;
}

tbody tr:nth-child(even) td {
    background: #1d2128 !important;
}

tbody tr:hover td {
    background: var(--dark-panel-hover) !important;
}


/* ============================================================
 * HISTORY
 * ============================================================ */

.history,
.history-page {
    background: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

.history .filter,
.history-page .filter {
    background: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
}


/* ============================================================
 * DIALOGS / MODALS
 * ============================================================ */

.modal,
.dialog,
guac-modal,
.notification,
.global-status-modal {
    color: var(--dark-text) !important;
}

.modal-content,
.dialog,
.notification,
guac-modal > div {
    background: var(--dark-panel) !important;
    color: var(--dark-text) !important;

    border-color: var(--dark-border) !important;

    box-shadow:
        0 10px 40px var(--dark-shadow) !important;
}

.notification {
    border-color: var(--dark-border) !important;
}


/* ============================================================
 * ERROR / WARNING / STATUS
 * ============================================================ */

.error,
.error-message {
    color: #ff8893 !important;
}

.warning {
    color: var(--dark-warning) !important;
}

.success {
    color: var(--dark-success) !important;
}


/* ============================================================
 * PAGINATION
 * ============================================================ */

.pager,
.pagination {
    color: var(--dark-text-secondary) !important;
}

.pager button,
.pagination button {
    background: var(--dark-panel) !important;
}


/* ============================================================
 * SCROLLBARS
 * Chromium / Edge / Safari
 * ============================================================ */

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

::-webkit-scrollbar-track {
    background: #111318;
}

::-webkit-scrollbar-thumb {
    background: #3b414c;
    border-radius: 6px;
    border: 2px solid #111318;
}

::-webkit-scrollbar-thumb:hover {
    background: #505866;
}


/* Firefox */

* {
    scrollbar-color: #3b414c #111318;
}


/* ============================================================
 * RECORDING PLAYER
 * ============================================================ */

.recording-player,
.recording-player .controls,
.playback,
.player {
    background: var(--dark-bg-secondary) !important;
    color: var(--dark-text) !important;
}

.recording-player button,
.playback button,
.player button {
    background: var(--dark-bg-tertiary) !important;
    color: var(--dark-text) !important;
}


/* ============================================================
 * CONNECTION CLIENT MENU
 *
 * Styles only menus / UI chrome.
 * Does NOT alter the remote desktop display itself.
 * ============================================================ */

.client-menu,
.client-menu .menu,
.client-panel {
    background: var(--dark-panel) !important;
    color: var(--dark-text) !important;
}

.client-menu h2,
.client-menu h3,
.client-panel h2,
.client-panel h3 {
    color: var(--dark-text) !important;
}


/* ============================================================
 * CHECKBOX / RADIO ACCENT
 * ============================================================ */

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


/* ============================================================
 * TEXT SELECTION
 * ============================================================ */

::selection {
    background: #315f9c;
    color: #fff;
}


/* ============================================================
 * KEEP REMOTE DISPLAY UNTOUCHED
 *
 * Important: don't filter/invert RDP/VNC content.
 * ============================================================ */

.guac-client,
.guac-display,
.display,
canvas {
    filter: none !important;
}
/* ============================================================
 * FIX: USER MENU
 * ============================================================ */

.user-menu .menu-contents {
    background: #1b1f26 !important;
    color: #e8eaed !important;

    border: 1px solid #343a45 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55) !important;
}

/* Profile area */
.user-menu .menu-contents .profile,
.user-menu .menu-contents .profile div {
    background: #1b1f26 !important;
    color: #e8eaed !important;
}

.user-menu .menu-contents .profile .full-name,
.user-menu .menu-contents .profile .full-name a {
    color: #ffffff !important;
}

.user-menu .menu-contents .organizational-role,
.user-menu .menu-contents .organization {
    color: #aeb6c2 !important;
}

/* Separators */
.user-menu .menu-contents hr,
.user-menu .menu-contents .profile {
    border-color: #3a414c !important;
}

/* Menu items */
.user-menu .menu-contents ul,
.user-menu .menu-contents li {
    background: transparent !important;
}

.user-menu .menu-contents a {
    color: #e8eaed !important;
    background: transparent !important;
    text-decoration: none !important;
}

/* Hovered menu item */
.user-menu .menu-contents li:hover,
.user-menu .menu-contents a:hover {
    background: #2a3039 !important;
    color: #ffffff !important;
}

/* Selected/current page */
.user-menu .menu-contents .current,
.user-menu .menu-contents .selected,
.user-menu .menu-contents li.current,
.user-menu .menu-contents li.selected {
    background: #315f9c !important;
    color: #ffffff !important;
}

.user-menu .menu-contents .current a,
.user-menu .menu-contents .selected a {
    color: #ffffff !important;
}

/* Logout */
.user-menu .menu-contents .logout {
    color: #ff929b !important;
}

.user-menu .menu-contents .logout:hover {
    color: #ffffff !important;
}


/* ============================================================
 * FIX: CONNECTION LIST
 * ============================================================ */

/* Default rows */
.all-connections .connection,
.all-connections .group,
.connection-list .connection,
.connection-list .group {
    background: #1b1f26 !important;
    color: #e8eaed !important;
}

/* Captions */
.all-connections .connection .caption,
.all-connections .group .caption,
.connection-list .connection .caption,
.connection-list .group .caption {
    background: transparent !important;
    color: #e8eaed !important;
}

/* Connection names and links */
.all-connections .connection a,
.all-connections .connection .name,
.all-connections .group a,
.all-connections .group .name,
.connection-list .connection a,
.connection-list .connection .name,
.connection-list .group a,
.connection-list .group .name {
    color: #e8eaed !important;
}

/* Hover row */
.all-connections .connection:hover,
.all-connections .group:hover,
.connection-list .connection:hover,
.connection-list .group:hover {
    background: #29313b !important;
    color: #ffffff !important;
}

.all-connections .connection:hover a,
.all-connections .connection:hover .name,
.all-connections .group:hover a,
.all-connections .group:hover .name,
.connection-list .connection:hover a,
.connection-list .connection:hover .name,
.connection-list .group:hover a,
.connection-list .group:hover .name {
    color: #ffffff !important;
}

/* Keyboard focus / selected */
.all-connections .connection:focus-within,
.connection-list .connection:focus-within,
.all-connections .connection.selected,
.connection-list .connection.selected {
    background: #315f9c !important;
    color: #ffffff !important;
}

.all-connections .connection:focus-within a,
.connection-list .connection:focus-within a,
.all-connections .connection.selected a,
.connection-list .connection.selected a {
    color: #ffffff !important;
}


/* ============================================================
 * FILTER BOX
 * ============================================================ */

.all-connections input,
.connection-list input,
.filter input {
    background: #22262e !important;
    color: #ffffff !important;
    border: 1px solid #444b57 !important;
}

.all-connections input::placeholder,
.connection-list input::placeholder,
.filter input::placeholder {
    color: #9aa3af !important;
}
/* ============================================================
 * GUACAMOLE 1.6.0 - SETTINGS TABS FIX
 * ============================================================ */

/* Entire settings navigation bar */
.settings-view .page-tabs,
.settings-view .page-tabs .page-list,
.settings-view .page-tabs .page-list ul {
    background: #181b21 !important;
    color: #e8eaed !important;
    border-color: #343a45 !important;
}

/* Normal tabs */
.settings-view .page-tabs .page-list li a[href],
.settings-view .page-tabs .page-list li a[href]:visited {
    background: #181b21 !important;
    color: #cbd2dc !important;

    text-decoration: none !important;

    border: none !important;
    border-bottom: 3px solid transparent !important;
}

/* Tab hover */
.settings-view .page-tabs .page-list li a[href]:hover {
    background: #29313b !important;
    color: #ffffff !important;

    border-bottom-color: #579aff !important;
}

/* Currently-selected tab */
.settings-view .page-tabs .page-list li a[href].current,
.settings-view .page-tabs .page-list li a[href].current:hover {
    background: #315f9c !important;
    color: #ffffff !important;

    border-bottom: 3px solid #78b7ff !important;
    cursor: default !important;
}

/* Remove the original pale-green Guacamole highlight */
.settings-view .page-tabs .page-list li:hover,
.settings-view .page-tabs .page-list li.current {
    background: transparent !important;
}


/* ============================================================
 * USER MENU - DARK BACKGROUND
 * ============================================================ */

.user-menu .menu-dropdown .menu-contents {
    background: #1b1f26 !important;
    color: #e8eaed !important;

    border: 1px solid #343a45 !important;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.55) !important;
}

/* Profile */
.user-menu .menu-dropdown .menu-contents .profile {
    color: #e8eaed !important;
    border-bottom-color: #3a414c !important;
}

.user-menu .menu-dropdown .menu-contents .profile .full-name,
.user-menu .menu-dropdown .menu-contents .profile .full-name a {
    color: #ffffff !important;
}

.user-menu .menu-dropdown .menu-contents .organization,
.user-menu .menu-dropdown .menu-contents .organizational-role {
    color: #aeb6c2 !important;
}


/* ============================================================
 * USER MENU - WHITE ICONS
 * ============================================================ */

/*
 * Username icon in top-right header
 */
.user-menu .menu-dropdown .menu-title {
    color: #ffffff !important;

    background-image:
        url('images/user-icons/guac-user-white.svg') !important;
}


/*
 * Make ALL settings links use the WHITE configuration icon.
 *
 * This also fixes History and Groups, which otherwise inherit
 * Guacamole's black monitor icon.
 */
.user-menu .menu-dropdown .menu-contents
a[href^="#/settings/"] {

    background-image:
        url('images/action-icons/guac-config.svg') !important;

    background-repeat: no-repeat !important;
    background-position: 0.75em center !important;
    background-size: 1em !important;

    color: #e8eaed !important;
}


/*
 * Home uses the white home icon
 */
.user-menu .menu-dropdown .menu-contents
a[href="#/"] {

    background-image:
        url('images/action-icons/guac-home.svg') !important;

    background-repeat: no-repeat !important;
    background-position: 0.75em center !important;
    background-size: 1em !important;

    color: #e8eaed !important;
}


/*
 * Logout uses the white logout icon
 */
.user-menu .menu-dropdown .menu-contents
a.logout {

    background-image:
        url('images/action-icons/guac-logout.svg') !important;

    background-repeat: no-repeat !important;
    background-position: 0.75em center !important;
    background-size: 1em !important;

    color: #ff929b !important;
}


/* ============================================================
 * USER MENU - ITEMS / HOVER
 * ============================================================ */

.user-menu .menu-dropdown .menu-contents li {
    background: transparent !important;
}

.user-menu .menu-dropdown .menu-contents li a {
    color: #e8eaed !important;
    background-color: transparent !important;
}

/* Hover */
.user-menu .menu-dropdown .menu-contents li a:hover {
    background-color: #29313b !important;
    color: #ffffff !important;
}

/* Current menu destination */
.user-menu .menu-dropdown .menu-contents li a.current,
.user-menu .menu-dropdown .menu-contents li a.current:hover {
    background-color: #315f9c !important;
    color: #ffffff !important;
}


/* ============================================================
 * SETTINGS PAGE CONTENT
 * ============================================================ */

.settings-view {
    background: #111318 !important;
    color: #e8eaed !important;
}

.settings-view .settings {
    background: #111318 !important;
    color: #e8eaed !important;
}

/* Help/instruction text */
.settings-view p,
.settings-view .help-text {
    color: #d9dee6 !important;
}


/* ============================================================
 * SETTINGS TABLES
 * ============================================================ */

.settings-view table {
    background: #1b1f26 !important;
    color: #e8eaed !important;
}

.settings-view table th {
    background: #181b21 !important;
    color: #ffffff !important;
    border-color: #343a45 !important;
}

.settings-view table td {
    background: #1b1f26 !important;
    color: #e8eaed !important;
    border-color: #343a45 !important;
}

.settings-view table tbody tr:hover td {
    background: #29313b !important;
}


/* ============================================================
 * SETTINGS BUTTONS
 * ============================================================ */

.settings-view button,
.settings-view input[type="button"],
.settings-view input[type="submit"] {

    background: #252a32 !important;
    color: #ffffff !important;

    border: 1px solid #48505e !important;
}

.settings-view button:hover,
.settings-view input[type="button"]:hover,
.settings-view input[type="submit"]:hover {

    background: #315f9c !important;
    border-color: #579aff !important;
}
/* ============================================================
 * GUACAMOLE 1.6.0
 * DARK THEME - USERS + CONNECTIONS CONTRAST FIX
 * ============================================================ */


/* ============================================================
 * USERS PAGE
 * ============================================================ */

/*
 * Username link.
 * Guacamole's stock user-list CSS has a more-specific selector,
 * therefore we override that exact structure.
 */
.settings.users table.user-list
tr.user td.username a[href] {
    color: #e8eaed !important;
    background-color: transparent !important;
    text-decoration: none !important;
}

/* Username text itself */
.settings.users table.user-list
tr.user td.username a[href] .name {
    color: #e8eaed !important;
}

/*
 * User icon is a dark/black image in the stock theme.
 * Invert ONLY this icon - not all icons globally.
 */
.settings.users table.user-list
tr.user td.username .icon.user {
    filter: invert(1) brightness(1.6) !important;
    opacity: 0.90 !important;
}

/* User row hover */
.settings.users table.user-list
tbody tr.user:hover td {
    background-color: #29313b !important;
}

/* Keep link/text bright while hovering */
.settings.users table.user-list
tbody tr.user:hover td.username a[href],
.settings.users table.user-list
tbody tr.user:hover td.username a[href] .name {
    color: #ffffff !important;
}

/* Other cells */
.settings.users table.user-list
tbody tr.user td.organization,
.settings.users table.user-list
tbody tr.user td.full-name,
.settings.users table.user-list
tbody tr.user td.last-active {
    color: #e8eaed !important;
}

/*
 * Disabled users still need to look disabled,
 * but should remain readable against dark background.
 */
.settings.users table.user-list
tr.user.disabled,
.settings.users table.user-list
tr.user.disabled td.username a[href],
.settings.users table.user-list
tr.user.disabled td.username a[href] .name {
    color: #8993a1 !important;
}


/* ============================================================
 * USER TABLE HEADINGS
 * ============================================================ */

.settings.users table.user-list thead th {
    background-color: #181b21 !important;
    color: #ffffff !important;
    border-color: #343a45 !important;
}

.settings.users table.user-list tbody td {
    background-color: #1b1f26 !important;
    color: #e8eaed !important;
    border-color: #343a45 !important;
}


/* ============================================================
 * CONNECTIONS ADMIN PAGE
 * ============================================================ */

/*
 * Connection row text
 */
.settings.connections .connection,
.settings.connections .connection a,
.settings.connections .connection .name,
.settings.connections a.connection,
.settings.connections a.connection .name {
    color: #e8eaed !important;
}

/*
 * RDP / SSH / VNC protocol icon.
 *
 * IMPORTANT:
 * Only invert .icon.type.
 * Do NOT invert generic .icon because that would also affect
 * expand/collapse controls, plus buttons, etc.
 */
.settings.connections .connection .icon.type,
.settings.connections a.connection .icon.type {
    filter: invert(1) brightness(1.6) !important;
    opacity: 0.90 !important;
}


/* Connection group names */
.settings.connections .connection-group,
.settings.connections .connection-group .name,
.settings.connections .connection-group a,
.settings.connections .connection-group span {
    color: #e8eaed !important;
}


/* ============================================================
 * CONNECTION TREE ROWS
 * ============================================================ */

/*
 * Different Guacamole components wrap group-list rows slightly
 * differently. These selectors intentionally cover both cases.
 */
.settings.connections guac-group-list li,
.settings.connections .group-list li {
    color: #e8eaed !important;
}

/* Links */
.settings.connections guac-group-list li a,
.settings.connections .group-list li a {
    color: #e8eaed !important;
}

/* Hover */
.settings.connections guac-group-list li:hover,
.settings.connections .group-list li:hover {
    background-color: #29313b !important;
    color: #ffffff !important;
}

.settings.connections guac-group-list li:hover a,
.settings.connections .group-list li:hover a,
.settings.connections guac-group-list li:hover .name,
.settings.connections .group-list li:hover .name {
    color: #ffffff !important;
}


/* ============================================================
 * SETTINGS CONNECTION ROW BACKGROUND
 * ============================================================ */

.settings.connections .connection,
.settings.connections .connection-group {
    background-color: transparent !important;
}

/*
 * Hover only the selectable connection, maintaining strong
 * contrast between row and text.
 */
.settings.connections a.connection:hover {
    background-color: #29313b !important;
    color: #ffffff !important;
}

.settings.connections a.connection:hover .name {
    color: #ffffff !important;
}


/* ============================================================
 * FILTER BAR
 * ============================================================ */

.settings.users .toolbar input,
.settings.connections .toolbar input,
.settings.users guac-filter input,
.settings.connections guac-filter input {
    background: #22262e !important;
    color: #ffffff !important;
    border: 1px solid #48505e !important;
}

.settings.users .toolbar input::placeholder,
.settings.connections .toolbar input::placeholder {
    color: #a5adba !important;
}


/* ============================================================
 * SORT ARROWS
 * ============================================================ */

/*
 * Some sort indicators are dark images/pseudo-elements.
 * Brighten only those inside table headers.
 */
.settings.users table.user-list th::before,
.settings.users table.user-list th::after {
    filter: invert(1) brightness(1.5);
}


/* ============================================================
 * GENERAL TEXT SAFETY FOR THESE TWO SCREENS ONLY
 * ============================================================ */

.settings.users,
.settings.connections {
    color: #e8eaed !important;
}

.settings.users p,
.settings.connections p {
    color: #e8eaed !important;
}
/* ============================================================
 * USER / GROUP EDIT
 * CONNECTION PERMISSION TREE
 * ============================================================ */

/* Base tree rows */
.manage-user .connection-list li,
.manage-user-group .connection-list li,
.manage-user .group-list li,
.manage-user-group .group-list li {
    background: #1b1f26 !important;
    color: #e8eaed !important;
}

/* Names/labels */
.manage-user .connection-list li a,
.manage-user-group .connection-list li a,
.manage-user .group-list li a,
.manage-user-group .group-list li a,
.manage-user .connection-list .name,
.manage-user-group .connection-list .name,
.manage-user .group-list .name,
.manage-user-group .group-list .name {
    color: #e8eaed !important;
}


/* ============================================================
 * HOVER
 * Replace Guacamole pale-green highlight
 * ============================================================ */

.manage-user .connection-list li:hover,
.manage-user-group .connection-list li:hover,
.manage-user .group-list li:hover,
.manage-user-group .group-list li:hover {
    background: #29313b !important;
    color: #ffffff !important;
}

.manage-user .connection-list li:hover a,
.manage-user-group .connection-list li:hover a,
.manage-user .group-list li:hover a,
.manage-user-group .group-list li:hover a,
.manage-user .connection-list li:hover .name,
.manage-user-group .connection-list li:hover .name,
.manage-user .group-list li:hover .name,
.manage-user-group .group-list li:hover .name {
    color: #ffffff !important;
}


/* ============================================================
 * SELECTED / CURRENT / ACTIVE ROW
 * Use same blue as Settings tabs
 * ============================================================ */

.manage-user .connection-list li.selected,
.manage-user-group .connection-list li.selected,
.manage-user .group-list li.selected,
.manage-user-group .group-list li.selected,

.manage-user .connection-list li.current,
.manage-user-group .connection-list li.current,
.manage-user .group-list li.current,
.manage-user-group .group-list li.current,

.manage-user .connection-list li.active,
.manage-user-group .connection-list li.active,
.manage-user .group-list li.active,
.manage-user-group .group-list li.active {
    background: #315f9c !important;
    color: #ffffff !important;
}

.manage-user .connection-list li.selected a,
.manage-user-group .connection-list li.selected a,
.manage-user .group-list li.selected a,
.manage-user-group .group-list li.selected a,

.manage-user .connection-list li.selected .name,
.manage-user-group .connection-list li.selected .name,
.manage-user .group-list li.selected .name,
.manage-user-group .group-list li.selected .name {
    color: #ffffff !important;
}


/* ============================================================
 * GUAC GROUP-LIST CAPTION / ROW
 * This catches the actual Guacamole permission-tree component.
 * ============================================================ */

.manage-user guac-group-list .caption,
.manage-user-group guac-group-list .caption {
    background-color: #1b1f26 !important;
    color: #e8eaed !important;
}

/* Hover */
.manage-user guac-group-list .caption:hover,
.manage-user-group guac-group-list .caption:hover {
    background-color: #29313b !important;
    color: #ffffff !important;
}

/* Selected/focused */
.manage-user guac-group-list .caption.selected,
.manage-user-group guac-group-list .caption.selected,
.manage-user guac-group-list .caption.current,
.manage-user-group guac-group-list .caption.current {
    background-color: #315f9c !important;
    color: #ffffff !important;
}


/* ============================================================
 * IMPORTANT:
 * Guacamole sometimes applies hover to the row container
 * rather than the LI itself.
 * ============================================================ */

.manage-user guac-group-list .connection:hover > .caption,
.manage-user-group guac-group-list .connection:hover > .caption,
.manage-user guac-group-list .connection-group:hover > .caption,
.manage-user-group guac-group-list .connection-group:hover > .caption {
    background-color: #29313b !important;
    color: #ffffff !important;
}


/* ============================================================
 * TEXT WHILE HOVERED / SELECTED
 * ============================================================ */

.manage-user guac-group-list .caption:hover *,
.manage-user-group guac-group-list .caption:hover *,
.manage-user guac-group-list .caption.selected *,
.manage-user-group guac-group-list .caption.selected * {
    color: #ffffff !important;
}


/* ============================================================
 * CONNECTION / PROTOCOL ICONS
 * ============================================================ */

.manage-user guac-group-list .icon.type,
.manage-user-group guac-group-list .icon.type {
    filter: invert(1) brightness(1.5) !important;
    opacity: 0.95 !important;
}


/* ============================================================
 * CONNECTION PERMISSION SECTION TABS
 * "Current Connections" / "All Connections"
 * ============================================================ */

.manage-user .page-tabs .page-list li a,
.manage-user-group .page-tabs .page-list li a {
    background: #181b21 !important;
    color: #cbd2dc !important;
}

.manage-user .page-tabs .page-list li a:hover,
.manage-user-group .page-tabs .page-list li a:hover {
    background: #29313b !important;
    color: #ffffff !important;
}

.manage-user .page-tabs .page-list li a.current,
.manage-user-group .page-tabs .page-list li a.current {
    background: #315f9c !important;
    color: #ffffff !important;
    border-bottom-color: #78b7ff !important;
}
/* ============================================================
 * GUACAMOLE 1.6.0
 * CONNECTION PERMISSION EDITOR - FINAL DARK FIX
 * ============================================================ */


/* ------------------------------------------------------------
 * Connection permission area
 * ------------------------------------------------------------ */

.connection-permissions,
.connection-permissions .section {
    background: #111318 !important;
    color: #e8eaed !important;
}


/* ------------------------------------------------------------
 * "Current Connections" / "All Connections"
 * ------------------------------------------------------------ */

.connection-permissions .section-tabs,
.connection-permissions .section-tabs ul {
    background: #181b21 !important;
    color: #e8eaed !important;
    border-color: #343a45 !important;
}

.connection-permissions .section-tabs li {
    background: transparent !important;
}

.connection-permissions .section-tabs li a,
.connection-permissions .section-tabs li a:visited {
    background: #181b21 !important;
    color: #cbd2dc !important;
    text-decoration: none !important;
}

/* Tab hover */
.connection-permissions .section-tabs li a:hover {
    background: #29313b !important;
    color: #ffffff !important;
}

/* Selected tab */
.connection-permissions .section-tabs li a.current,
.connection-permissions .section-tabs li a.current:hover {
    background: #315f9c !important;
    color: #ffffff !important;
    border-bottom: 3px solid #78b7ff !important;
}


/* ------------------------------------------------------------
 * Connection tree - NORMAL STATE
 * ------------------------------------------------------------ */

.connection-permissions .group-list .connection,
.connection-permissions .group-list .group,
.connection-permissions .group-list .sharing-profile {
    background: #1b1f26 !important;
    color: #e8eaed !important;
}

/* Actual captions */
.connection-permissions .group-list .connection > .caption,
.connection-permissions .group-list .group > .caption,
.connection-permissions .group-list .sharing-profile > .caption {
    background: #1b1f26 !important;
    color: #e8eaed !important;
}

/* Names */
.connection-permissions .group-list .name,
.connection-permissions .group-list .choice,
.connection-permissions .group-list span {
    color: #e8eaed !important;
}


/* ------------------------------------------------------------
 * Connection tree - HOVER
 *
 * THIS overrides Guacamole's global:
 * .connection:hover { background: #CDA; }
 * ------------------------------------------------------------ */

.connection-permissions .group-list .connection:hover,
.connection-permissions .group-list .group:hover,
.connection-permissions .group-list .sharing-profile:hover {
    background: #29313b !important;
    color: #ffffff !important;
}

.connection-permissions .group-list .connection:hover > .caption,
.connection-permissions .group-list .group:hover > .caption,
.connection-permissions .group-list .sharing-profile:hover > .caption {
    background: #29313b !important;
    color: #ffffff !important;
}

/* EVERYTHING inside hovered row becomes readable */
.connection-permissions .group-list .connection:hover > .caption *,
.connection-permissions .group-list .group:hover > .caption *,
.connection-permissions .group-list .sharing-profile:hover > .caption * {
    color: #ffffff !important;
}


/* ------------------------------------------------------------
 * Specifically defeat stock green .connection:hover
 * High specificity intentionally used.
 * ------------------------------------------------------------ */

body .connection-permissions .group-list .list-item .connection:hover {
    background-color: #29313b !important;
}

body .connection-permissions .group-list .list-item .connection:hover > .caption {
    background-color: #29313b !important;
}


/* ------------------------------------------------------------
 * Optional BLUE highlight for focused/active rows
 * ------------------------------------------------------------ */

.connection-permissions .group-list .connection:focus-within,
.connection-permissions .group-list .group:focus-within {
    background: #315f9c !important;
    color: #ffffff !important;
}

.connection-permissions .group-list .connection:focus-within > .caption,
.connection-permissions .group-list .group:focus-within > .caption {
    background: #315f9c !important;
    color: #ffffff !important;
}


/* ------------------------------------------------------------
 * Permission checkbox/name area
 *
 * connectionPermission.html uses:
 * <div class="choice">
 *   icon
 *   checkbox
 *   <span class="name">
 * ------------------------------------------------------------ */

.connection-permissions .group-list .choice {
    background: transparent !important;
    color: #e8eaed !important;
}

.connection-permissions .group-list .choice .name {
    color: #e8eaed !important;
}

.connection-permissions .group-list .connection:hover .choice,
.connection-permissions .group-list .connection:hover .choice .name,
.connection-permissions .group-list .group:hover .choice,
.connection-permissions .group-list .group:hover .choice .name {
    color: #ffffff !important;
}


/* ------------------------------------------------------------
 * Protocol icons
 * Only protocol icons - don't invert expand/collapse controls.
 * ------------------------------------------------------------ */

.connection-permissions .group-list .choice .icon.type {
    filter: invert(1) brightness(1.6) !important;
    opacity: 0.95 !important;
}


/* ------------------------------------------------------------
 * Keep checkboxes clearly visible
 * ------------------------------------------------------------ */

.connection-permissions input[type="checkbox"] {
    accent-color: #3f8cff !important;
}


/* ------------------------------------------------------------
 * Child indentation area
 * ------------------------------------------------------------ */

.connection-permissions .group-list .children {
    background: #1b1f26 !important;
}


/* ------------------------------------------------------------
 * Strong override against inherited black links/text
 * ------------------------------------------------------------ */

.connection-permissions .group-list a,
.connection-permissions .group-list a:visited {
    color: #e8eaed !important;
}

.connection-permissions .group-list a:hover {
    color: #ffffff !important;
}
/* ============================================================
 * CONNECTION / GROUP LOCATION CHOOSER
 * ============================================================ */

.manage .location-chooser {
    color: #e8eaed !important;
}

/* Currently-selected location, e.g. ROOT */
.manage .location-chooser .location {
    background: #22262e !important;
    color: #e8eaed !important;

    border: 1px solid #48505e !important;
    border-radius: 4px !important;

    padding: 0.35em 0.6em !important;

    cursor: pointer !important;
}

/* Hover */
.manage .location-chooser .location:hover {
    background: #29313b !important;
    color: #ffffff !important;
    border-color: #579aff !important;
}

/* Open dropdown */
.manage .location-chooser .dropdown {
    background: #1b1f26 !important;
    color: #e8eaed !important;

    border: 1px solid #48505e !important;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.55) !important;
}

/* Location tree */
.manage .location-chooser .dropdown .connection-group,
.manage .location-chooser .dropdown .group,
.manage .location-chooser .dropdown .caption {
    background: #1b1f26 !important;
    color: #e8eaed !important;
}

/* Location tree hover */
.manage .location-chooser .dropdown .connection-group:hover,
.manage .location-chooser .dropdown .group:hover,
.manage .location-chooser .dropdown .caption:hover {
    background: #29313b !important;
    color: #ffffff !important;
}

.manage .location-chooser .dropdown .name,
.manage .location-chooser .dropdown a,
.manage .location-chooser .dropdown span {
    color: #e8eaed !important;
}

.manage .location-chooser .dropdown *:hover > .name {
    color: #ffffff !important;
}
/* ============================================================
 * READ-ONLY DATA SOURCE / SHARED CONNECTIONS
 * ============================================================ */

.manage-user p.notice.read-only,
.manage-user-group p.notice.read-only {
    background: #1e3a5f !important;
    color: #eef6ff !important;

    border: 1px solid #3f6fa7 !important;
    border-left: 4px solid #579aff !important;

    border-radius: 4px !important;

    padding: 1em !important;
}

/* Ensure no child text inherits white-on-yellow styling */
.manage-user p.notice.read-only *,
.manage-user-group p.notice.read-only * {
    color: #eef6ff !important;
}
/* Read-only data-source tabs */
.manage-user .page-tabs .page-list li a.read-only,
.manage-user-group .page-tabs .page-list li a.read-only {
    color: #c5ced9 !important;
}

/* Selected read-only tab */
.manage-user .page-tabs .page-list li a.read-only.current,
.manage-user-group .page-tabs .page-list li a.read-only.current {
    background: #315f9c !important;
    color: #ffffff !important;
}

/* Lock icon, if rendered as a dark asset */
.manage-user .page-tabs .read-only .icon,
.manage-user-group .page-tabs .read-only .icon {
    filter: invert(1) brightness(1.5) !important;
}

/* Recording View action */
.settings.history table td:last-child a,
.history table td:last-child a {
    display: inline-block !important;

    background: #315f9c !important;
    color: #ffffff !important;

    border: 1px solid #579aff !important;
    border-radius: 4px !important;

    padding: 0.2em 0.65em !important;

    font-weight: 600 !important;
    text-decoration: none !important;
}

.settings.history table td:last-child a:hover,
.history table td:last-child a:hover {
    background: #3f78bd !important;
    color: #ffffff !important;
}
/* ============================================================
 * HISTORY - RECORDING "VIEW" LINKS
 * ============================================================ */

/* Normal recording link */
.settings.history table a,
.history table a,
.history-page table a {
    color: #78b7ff !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

/* Hover */
.settings.history table a:hover,
.history table a:hover,
.history-page table a:hover {
    color: #ffffff !important;
    text-decoration: underline !important;
}

/* Visited links - don't allow dark/purple browser default */
.settings.history table a:visited,
.history table a:visited,
.history-page table a:visited {
    color: #9ecbff !important;
}

/* Keyboard focus */
.settings.history table a:focus,
.history table a:focus,
.history-page table a:focus {
    color: #ffffff !important;
    outline: 2px solid #579aff !important;
    outline-offset: 2px !important;
}
/* Recording View action */
.settings.history table td:last-child a,
.history table td:last-child a {
    display: inline-block !important;

    background: #315f9c !important;
    color: #ffffff !important;

    border: 1px solid #579aff !important;
    border-radius: 4px !important;

    padding: 0.2em 0.65em !important;

    font-weight: 600 !important;
    text-decoration: none !important;
}

.settings.history table td:last-child a:hover,
.history table td:last-child a:hover {
    background: #3f78bd !important;
    color: #ffffff !important;
}

/* ============================================================
 * HISTORY - RECORDING VIEW LINK
 * ============================================================ */

/* Recording "View" link in final Logs column */
table tbody tr td:last-child a,
table tbody tr td:last-child a:visited,
table tbody tr td:last-child a:active {
    color: #8fc7ff !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

/* Guacamole may put the text/icon inside child elements */
table tbody tr td:last-child a *,
table tbody tr td:last-child a::before,
table tbody tr td:last-child a::after {
    color: #8fc7ff !important;
}

/* Hover */
table tbody tr td:last-child a:hover,
table tbody tr td:last-child a:hover *,
table tbody tr td:last-child a:hover::before,
table tbody tr td:last-child a:hover::after {
    color: #ffffff !important;
    text-decoration: underline !important;
}

/* Keyboard focus */
table tbody tr td:last-child a:focus {
    color: #ffffff !important;
    outline: 1px solid #78b7ff !important;
    outline-offset: 2px !important;
}
/* ============================================================
 * SETTINGS > CONNECTIONS
 * CONNECTION GROUPS - SAME STYLE AS CONNECTIONS
 * ============================================================ */

/* Normal connection-group row */
.settings.connections .connection-group,
.settings.connections .connection-group > .caption {
    background: #1b1f26 !important;
    color: #e8eaed !important;
}

/* Group name */
.settings.connections .connection-group > .caption .name,
.settings.connections .connection-group > .caption a,
.settings.connections .connection-group > .caption span {
    color: #e8eaed !important;
}


/* ------------------------------------------------------------
 * GROUP HOVER
 * Same hover as connections
 * ------------------------------------------------------------ */

.settings.connections .connection-group:hover,
.settings.connections .connection-group:hover > .caption {
    background: #29313b !important;
    color: #ffffff !important;
}

.settings.connections .connection-group:hover > .caption .name,
.settings.connections .connection-group:hover > .caption a,
.settings.connections .connection-group:hover > .caption span {
    color: #ffffff !important;
}


/* ------------------------------------------------------------
 * GROUP SELECTED / FOCUSED
 * Same blue used elsewhere
 * ------------------------------------------------------------ */

.settings.connections .connection-group:focus-within,
.settings.connections .connection-group:focus-within > .caption,
.settings.connections .connection-group.selected,
.settings.connections .connection-group.selected > .caption {
    background: #315f9c !important;
    color: #ffffff !important;
}

.settings.connections .connection-group:focus-within .name,
.settings.connections .connection-group.selected .name {
    color: #ffffff !important;
}


/* ------------------------------------------------------------
 * GROUP/FOLDER ICON
 * ------------------------------------------------------------ */

.settings.connections .connection-group > .caption .icon {
    filter: invert(1) brightness(1.5) !important;
    opacity: 0.95 !important;
}


/* ------------------------------------------------------------
 * CHILD CONNECTIONS INSIDE GROUP
 * ------------------------------------------------------------ */

.settings.connections .connection-group .connection,
.settings.connections .connection-group .connection > .caption {
    background: #1b1f26 !important;
    color: #e8eaed !important;
}

.settings.connections .connection-group .connection:hover,
.settings.connections .connection-group .connection:hover > .caption {
    background: #29313b !important;
    color: #ffffff !important;
}

.settings.connections .connection-group .connection:hover .name {
    color: #ffffff !important;
}


/* ------------------------------------------------------------
 * "New Connection / New Group / New Sharing Profile"
 * Keep them muted but readable
 * ------------------------------------------------------------ */

.settings.connections .connection-group .new-connection,
.settings.connections .connection-group .new-connection-group,
.settings.connections .connection-group .new-sharing-profile {
    color: #7f8997 !important;
    background: transparent !important;
    font-style: italic !important;
}

.settings.connections .connection-group .new-connection:hover,
.settings.connections .connection-group .new-connection-group:hover,
.settings.connections .connection-group .new-sharing-profile:hover {
    color: #cbd2dc !important;
    background: #29313b !important;
}
/* ============================================================
 * SETTINGS > CONNECTIONS
 * "NEW CONNECTION" / "NEW GROUP" / "NEW SHARING PROFILE"
 * Match normal connection colors
 * ============================================================ */

/* Remove Guacamole's built-in faded appearance */
.settings.connections .connection-list .new-connection,
.settings.connections .connection-list .new-connection-group,
.settings.connections .connection-list .new-sharing-profile {
    opacity: 1 !important;
    font-style: italic !important;

    background: #1b1f26 !important;
    color: #e8eaed !important;
}


/* The clickable link itself */
.settings.connections .connection-list .new-connection > a,
.settings.connections .connection-list .new-connection-group > a,
.settings.connections .connection-list .new-sharing-profile > a,

.settings.connections .connection-list .new-connection > a:visited,
.settings.connections .connection-list .new-connection-group > a:visited,
.settings.connections .connection-list .new-sharing-profile > a:visited {

    display: block !important;

    background: #1b1f26 !important;
    color: #cbd2dc !important;

    text-decoration: none !important;
}


/* Any nested text */
.settings.connections .connection-list .new-connection > a *,
.settings.connections .connection-list .new-connection-group > a *,
.settings.connections .connection-list .new-sharing-profile > a * {
    color: #cbd2dc !important;
}


/* ============================================================
 * HOVER
 * Same as existing connection/group hover
 * ============================================================ */

.settings.connections .connection-list .new-connection:hover,
.settings.connections .connection-list .new-connection-group:hover,
.settings.connections .connection-list .new-sharing-profile:hover,

.settings.connections .connection-list .new-connection:hover > a,
.settings.connections .connection-list .new-connection-group:hover > a,
.settings.connections .connection-list .new-sharing-profile:hover > a {

    background: #29313b !important;
    color: #ffffff !important;
}


/* Force nested text white while hovering */
.settings.connections .connection-list .new-connection:hover > a *,
.settings.connections .connection-list .new-connection-group:hover > a *,
.settings.connections .connection-list .new-sharing-profile:hover > a * {
    color: #ffffff !important;
}


/* ============================================================
 * KEYBOARD FOCUS
 * Same blue used by selected Settings tabs
 * ============================================================ */

.settings.connections .connection-list .new-connection:focus-within,
.settings.connections .connection-list .new-connection-group:focus-within,
.settings.connections .connection-list .new-sharing-profile:focus-within,

.settings.connections .connection-list .new-connection > a:focus,
.settings.connections .connection-list .new-connection-group > a:focus,
.settings.connections .connection-list .new-sharing-profile > a:focus {

    background: #315f9c !important;
    color: #ffffff !important;

    outline: none !important;
}

.settings.connections .connection-list .new-connection > a:focus *,
.settings.connections .connection-list .new-connection-group > a:focus *,
.settings.connections .connection-list .new-sharing-profile > a:focus * {
    color: #ffffff !important;
}


/* ============================================================
 * ACTIVE / CLICK
 * ============================================================ */

.settings.connections .connection-list .new-connection > a:active,
.settings.connections .connection-list .new-connection-group > a:active,
.settings.connections .connection-list .new-sharing-profile > a:active {

    background: #315f9c !important;
    color: #ffffff !important;
}
/* ============================================================
 * GUACAMOLE 1.6.0
 * NEW CONNECTION / GROUP / SHARING PROFILE - EXACT FIX
 * ============================================================ */

/* Normal state */
.settings.connections .connection-list a.new-connection,
.settings.connections .connection-list a.new-connection-group,
.settings.connections .connection-list a.new-sharing-profile,

.settings.connections .connection-list a.new-connection:visited,
.settings.connections .connection-list a.new-connection-group:visited,
.settings.connections .connection-list a.new-sharing-profile:visited {

    display: block !important;

    background-color: #1b1f26 !important;
    color: #cbd2dc !important;

    opacity: 1 !important;
    font-style: italic !important;

    text-decoration: none !important;
}


/* Text inside the link */
.settings.connections .connection-list a.new-connection .name,
.settings.connections .connection-list a.new-connection-group .name,
.settings.connections .connection-list a.new-sharing-profile .name {
    color: #cbd2dc !important;
}


/* ============================================================
 * HOVER
 * Same appearance as normal connection/group hover
 * ============================================================ */

.settings.connections .connection-list a.new-connection:hover,
.settings.connections .connection-list a.new-connection-group:hover,
.settings.connections .connection-list a.new-sharing-profile:hover {

    background-color: #29313b !important;
    color: #ffffff !important;

    opacity: 1 !important;
    text-decoration: none !important;
}

.settings.connections .connection-list a.new-connection:hover .name,
.settings.connections .connection-list a.new-connection-group:hover .name,
.settings.connections .connection-list a.new-sharing-profile:hover .name {
    color: #ffffff !important;
}


/* ============================================================
 * KEYBOARD FOCUS
 * ============================================================ */

.settings.connections .connection-list a.new-connection:focus,
.settings.connections .connection-list a.new-connection-group:focus,
.settings.connections .connection-list a.new-sharing-profile:focus {

    background-color: #315f9c !important;
    color: #ffffff !important;

    outline: none !important;
}

.settings.connections .connection-list a.new-connection:focus .name,
.settings.connections .connection-list a.new-connection-group:focus .name,
.settings.connections .connection-list a.new-sharing-profile:focus .name {
    color: #ffffff !important;
}


/* ============================================================
 * CLICK / ACTIVE
 * ============================================================ */

.settings.connections .connection-list a.new-connection:active,
.settings.connections .connection-list a.new-connection-group:active,
.settings.connections .connection-list a.new-sharing-profile:active {

    background-color: #315f9c !important;
    color: #ffffff !important;
}
/* ============================================================
 * FINAL FIX:
 * NEW CONNECTION / NEW GROUP / NEW SHARING PROFILE
 * Remove remaining Guacamole green frame
 * ============================================================ */

/* Normal state */
.settings.connections .connection-list a.new-connection,
.settings.connections .connection-list a.new-connection-group,
.settings.connections .connection-list a.new-sharing-profile {
    background: #1b1f26 !important;
    color: #cbd2dc !important;

    border: none !important;
    outline: none !important;
    box-shadow: none !important;

    opacity: 1 !important;
}


/* Hover */
.settings.connections .connection-list a.new-connection:hover,
.settings.connections .connection-list a.new-connection-group:hover,
.settings.connections .connection-list a.new-sharing-profile:hover {
    background: #29313b !important;
    color: #ffffff !important;

    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}


/* Nested text */
.settings.connections .connection-list a.new-connection:hover *,
.settings.connections .connection-list a.new-connection-group:hover *,
.settings.connections .connection-list a.new-sharing-profile:hover * {
    color: #ffffff !important;
}


/* Remove green styling from the containing list row */
.settings.connections .connection-list .list-item:has(a.new-connection:hover),
.settings.connections .connection-list .list-item:has(a.new-connection-group:hover),
.settings.connections .connection-list .list-item:has(a.new-sharing-profile:hover) {
    background: #29313b !important;

    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}


/* Also catch focus/click state of parent */
.settings.connections .connection-list .list-item:has(a.new-connection:focus),
.settings.connections .connection-list .list-item:has(a.new-connection-group:focus),
.settings.connections .connection-list .list-item:has(a.new-sharing-profile:focus) {
    background: #315f9c !important;

    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}


/* Mouse focus should not leave an outline/frame */
.settings.connections .connection-list a.new-connection:focus:not(:focus-visible),
.settings.connections .connection-list a.new-connection-group:focus:not(:focus-visible),
.settings.connections .connection-list a.new-sharing-profile:focus:not(:focus-visible) {
    background: #29313b !important;

    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}


/* Keep an accessible keyboard focus indicator,
   but use our theme blue instead of green */
.settings.connections .connection-list a.new-connection:focus-visible,
.settings.connections .connection-list a.new-connection-group:focus-visible,
.settings.connections .connection-list a.new-sharing-profile:focus-visible {
    background: #315f9c !important;
    color: #ffffff !important;

    border: none !important;
    outline: 2px solid #78b7ff !important;
    outline-offset: -2px !important;

    box-shadow: none !important;
}


/* Brute-force removal of inherited green frame
   specifically for these three actions */
.settings.connections .connection-list
.new-connection:hover,
.settings.connections .connection-list
.new-connection-group:hover,
.settings.connections .connection-list
.new-sharing-profile:hover {
    border-color: transparent !important;
    outline-color: transparent !important;
    box-shadow: none !important;
}
/* ============================================================
 * PERMISSION TREES
 * CONNECTION GROUP HOVER - FINAL OVERRIDE
 * ============================================================ */

/* Normal connection-group row */
.connection-permissions .connection-group,
.connection-permissions .connection-group > .caption,
.connection-permissions .connection-group > .caption > .choice,
.connection-permissions .connection-group .choice {
    background-color: #1b1f26 !important;
    color: #e8eaed !important;
}


/* ------------------------------------------------------------
 * HOVER
 * Kill Guacamole's default pale-green #CDA highlight
 * ------------------------------------------------------------ */

.connection-permissions .connection-group:hover,
.connection-permissions .connection-group:hover > .caption,
.connection-permissions .connection-group:hover > .caption > .choice,
.connection-permissions .connection-group:hover .choice {
    background-color: #29313b !important;
    color: #ffffff !important;

    border-color: transparent !important;
    outline-color: transparent !important;
    box-shadow: none !important;
}


/* Everything inside hovered group becomes white */
.connection-permissions .connection-group:hover *,
.connection-permissions .connection-group:hover > .caption *,
.connection-permissions .connection-group:hover .choice * {
    color: #ffffff !important;
}


/* Group name specifically */
.connection-permissions .connection-group .name {
    color: #e8eaed !important;
}

.connection-permissions .connection-group:hover .name {
    color: #ffffff !important;
}


/* ------------------------------------------------------------
 * Also override any generic Guacamole hover applied to caption
 * ------------------------------------------------------------ */

body .connection-permissions
.group-list
.connection-group:hover > .caption {
    background: #29313b !important;
    color: #ffffff !important;
}


/* Catch the row if Guacamole places hover on .caption itself */
body .connection-permissions
.group-list
.connection-group > .caption:hover {
    background: #29313b !important;
    color: #ffffff !important;
}


/* ------------------------------------------------------------
 * Keyboard focus / selected row
 * ------------------------------------------------------------ */

.connection-permissions .connection-group:focus-within,
.connection-permissions .connection-group:focus-within > .caption {
    background: #315f9c !important;
    color: #ffffff !important;
}

.connection-permissions .connection-group:focus-within * {
    color: #ffffff !important;
}


/* ------------------------------------------------------------
 * Group/folder icon
 * ------------------------------------------------------------ */

.connection-permissions .connection-group .icon {
    filter: invert(1) brightness(1.5) !important;
}
/* ============================================================
 * CONNECTION PERMISSIONS
 * Do NOT turn whole row blue when checkbox receives focus
 * ============================================================ */

/* Normal focused connection/group stays dark */
.connection-permissions .connection:focus-within,
.connection-permissions .connection-group:focus-within,

.connection-permissions .connection:focus-within > .caption,
.connection-permissions .connection-group:focus-within > .caption,

.connection-permissions .connection:focus-within .choice,
.connection-permissions .connection-group:focus-within .choice {
    background-color: #1b1f26 !important;
    color: #e8eaed !important;

    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}


/* Text remains readable */
.connection-permissions .connection:focus-within .name,
.connection-permissions .connection-group:focus-within .name {
    color: #e8eaed !important;
}


/* ============================================================
 * If focused row is ALSO being hovered, use normal hover color
 * ============================================================ */

.connection-permissions .connection:focus-within:hover,
.connection-permissions .connection-group:focus-within:hover,

.connection-permissions .connection:focus-within:hover > .caption,
.connection-permissions .connection-group:focus-within:hover > .caption,

.connection-permissions .connection:focus-within:hover .choice,
.connection-permissions .connection-group:focus-within:hover .choice {
    background-color: #29313b !important;
    color: #ffffff !important;
}

.connection-permissions .connection:focus-within:hover .name,
.connection-permissions .connection-group:focus-within:hover .name {
    color: #ffffff !important;
}


/* ============================================================
 * Keep keyboard accessibility on checkbox itself
 * instead of highlighting the whole row
 * ============================================================ */

.connection-permissions input[type="checkbox"]:focus {
    outline: none !important;
}

.connection-permissions input[type="checkbox"]:focus-visible {
    outline: 2px solid #78b7ff !important;
    outline-offset: 2px !important;
}
/* ============================================================
 * FINAL FIX - PERMISSION TREE CHECKBOX FOCUS
 *
 * Do NOT highlight parent connection/group when a child
 * checkbox receives focus.
 * ============================================================ */


/* Connection wrapper */
html body .connection-permissions
.group-list .connection:focus-within {
    background: #1b1f26 !important;
    color: #e8eaed !important;

    outline: none !important;
    box-shadow: none !important;
}


/* Connection caption */
html body .connection-permissions
.group-list .connection:focus-within > .caption {
    background: #1b1f26 !important;
    color: #e8eaed !important;

    outline: none !important;
    box-shadow: none !important;
}


/* Children below that connection */
html body .connection-permissions
.group-list .connection:focus-within > .children {
    background: #1b1f26 !important;
    color: #e8eaed !important;
}


/* Connection group wrapper */
html body .connection-permissions
.group-list .connection-group:focus-within {
    background: #1b1f26 !important;
    color: #e8eaed !important;

    outline: none !important;
    box-shadow: none !important;
}


/* Connection group caption */
html body .connection-permissions
.group-list .connection-group:focus-within > .caption {
    background: #1b1f26 !important;
    color: #e8eaed !important;

    outline: none !important;
    box-shadow: none !important;
}


/* Children below a focused group */
html body .connection-permissions
.group-list .connection-group:focus-within > .children {
    background: #1b1f26 !important;
}


/* Sharing profile */
html body .connection-permissions
.group-list .sharing-profile:focus-within,
html body .connection-permissions
.group-list .sharing-profile:focus-within > .caption {
    background: #1b1f26 !important;
    color: #e8eaed !important;

    outline: none !important;
    box-shadow: none !important;
}


/* ============================================================
 * MOUSE HOVER STILL WORKS
 * ============================================================ */

html body .connection-permissions
.group-list .connection:focus-within:hover > .caption,

html body .connection-permissions
.group-list .connection-group:focus-within:hover > .caption,

html body .connection-permissions
.group-list .sharing-profile:focus-within:hover > .caption {
    background: #29313b !important;
    color: #ffffff !important;
}


/* ============================================================
 * CHECKBOX FOCUS
 *
 * Show focus only around checkbox itself.
 * ============================================================ */

html body .connection-permissions
input[type="checkbox"]:focus {
    outline: none !important;
}

html body .connection-permissions
input[type="checkbox"]:focus-visible {
    outline: 2px solid #78b7ff !important;
    outline-offset: 2px !important;
}
/* ============================================================
 * LOGIN - OPENID / SSO PROVIDERS
 * ============================================================ */

.login-ui .sso-providers,
.login-ui .sso-provider-list {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    position: static !important;

    width: 100% !important;
    max-width: 320px !important;

    margin: 1.2em auto 0 auto !important;
    padding: 0 !important;

    list-style: none !important;

    text-align: center !important;
}


/* OpenID item */
.login-ui .sso-provider-openid {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    margin: 0.5em 0 !important;
    padding: 0 !important;

    background: transparent !important;
}


/* OpenID login button/link */
.login-ui .sso-provider-openid a,
.login-ui .sso-provider-openid a:visited {
    display: block !important;

    background: #315f9c !important;
    color: #ffffff !important;

    border: 1px solid #579aff !important;
    border-radius: 4px !important;

    padding: 0.65em 1em !important;

    font-weight: 600 !important;
    text-decoration: none !important;

    box-sizing: border-box !important;
}


/* Hover */
.login-ui .sso-provider-openid a:hover {
    background: #3f78bd !important;
    color: #ffffff !important;

    border-color: #78b7ff !important;
}


/* Keyboard focus */
.login-ui .sso-provider-openid a:focus-visible {
    outline: 2px solid #78b7ff !important;
    outline-offset: 2px !important;
}


/* Optional divider/label area */
.login-ui .sso-providers::before,
.login-ui .sso-provider-list::before {
    display: block;
    content: "or";

    margin: 0.8em 0 !important;

    color: #8993a1 !important;
    text-align: center !important;
}

/* ============================================================
 * LOGIN - LOCAL + OPENID
 * ============================================================ */

/*
 * Divider now physically lives INSIDE .login-dialog
 */
.login-ui .login-dialog .jump-sso-divider {
    display: flex;
    align-items: center;
    gap: 0.75em;

    margin: 0.8em 1.25em;

    color: #8993a1;
    font-size: 0.9em;
    text-align: center;
}

.login-ui .login-dialog .jump-sso-divider::before,
.login-ui .login-dialog .jump-sso-divider::after {
    content: "";
    flex: 1;

    height: 1px;
    background: #3a414c;
}

.login-ui .login-dialog .jump-sso-divider span {
    color: #8993a1 !important;
}


/* ============================================================
 * OPENID AREA INSIDE LOGIN CARD
 * ============================================================ */

.login-ui .login-dialog .jump-sso-login {
    position: static !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 1.25em 1.25em 1.25em !important;

    box-sizing: border-box !important;

    text-align: center !important;

    background: transparent !important;
}


/* OpenID provider wrapper */

.login-ui .login-dialog
.jump-sso-login .sso-provider-openid {
    position: static !important;

    display: block !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
}


/* Actual OpenID button */

.login-ui .login-dialog
.jump-sso-login .sso-provider-openid a,
.login-ui .login-dialog
.jump-sso-login .sso-provider-openid a:visited {

    display: block !important;

    width: 100% !important;

    box-sizing: border-box !important;

    padding: 0.65em 1em !important;

    background: #315f9c !important;
    color: #ffffff !important;

    border: 1px solid #579aff !important;
    border-radius: 4px !important;

    font-weight: 600 !important;
    text-align: center !important;
    text-decoration: none !important;
}


/* Hover */

.login-ui .login-dialog
.jump-sso-login .sso-provider-openid a:hover {

    background: #3f78bd !important;
    color: #ffffff !important;

    border-color: #78b7ff !important;
}


/* Keyboard focus */

.login-ui .login-dialog
.jump-sso-login .sso-provider-openid a:focus-visible {

    outline: 2px solid #78b7ff !important;
    outline-offset: 2px !important;
}
/*
 * 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.
 */

.login-ui .sso-providers {

    padding: 0.25em 0.5em;
    position: absolute;
    bottom: 0;
    left: 0;

}

.sso-providers ul {
    list-style: none;
}

.sso-providers ul, .sso-providers li {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.sso-providers li::before {
    content: ' / ';
}

.sso-providers li:first-child::before {
    display: none;
}