/*
 * 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}/* =========================
   Guacamole 1.6.x Branding
   - Login: black, no logo, title "Login"
   - App: black background + readable white UI
   ========================= */

/* ---------- Global base ---------- */
html, body {
  background: #000 !important;
  color: rgba(255,255,255,.92);
}

/* Subtle vignette (optional) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(1200px 800px at 50% 20%, rgba(255,255,255,0.06), rgba(0,0,0,0) 60%),
    radial-gradient(1200px 800px at 50% 100%, rgba(255,255,255,0.03), rgba(0,0,0,0) 65%);
}

/* =========================================================
   LOGIN (guac-login + login dialog)
   ========================================================= */

/* Hide logos / branding / version (common selectors) */
.logo, .logo-container, .branding, .version, .footer,
img[alt*="Guacamole" i], img[src*="logo" i] {
  display: none !important;
  visibility: hidden !important;
}

/* Ensure login background always black (wrappers) */
body > guac-login,
guac-login,
guac-login .login-ui,
guac-login .login-ui-body,
guac-login #login-ui,
.login-ui,
.login-ui-body,
#login-ui {
  background: #000 !important;
}

/* Login dialog styling */
guac-login .login-dialog,
.login-dialog {
  background: rgba(20,20,20,.92) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.70) !important;
  padding-top: 18px !important; /* space for injected heading */
}

/* Ensure login text is readable */
guac-login .login-dialog,
guac-login .login-dialog *,
.login-dialog,
.login-dialog * {
  color: rgba(255,255,255,.92) !important;
}

/* Remove built-in title lines like "Apache Guacamole" inside the dialog */
.login-dialog .app-name,
.login-dialog .app-title,
.login-dialog .product-name,
.login-dialog .guacamole,
.login-dialog .guac-title,
.login-dialog .title,
.login-dialog .subtitle,
.login-dialog .header {
  display: none !important;
  visibility: hidden !important;
}

/* Add our own title */
guac-login .login-dialog::before,
.login-dialog::before {
  content: "Login";
  display: block;
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: .06em;
  margin: 6px 0 18px 0;
  color: rgba(255,255,255,.95) !important;
}

/* Make inputs visible */
.login-dialog input,
.login-dialog textarea {
  color: rgba(255,255,255,.92) !important;
  caret-color: rgba(255,255,255,.92) !important;
  background: rgba(0,0,0,.35) !important;
}

/* =========================================================
   AFTER LOGIN (main UI)
   ========================================================= */

#content,
#other-connections {
  background: #000 !important;
}

/* Common UI text white (broad, but we protect displays below) */
#content :where(h1,h2,h3,h4,p,span,div,li,td,th,label,a,button),
#other-connections :where(h1,h2,h3,h4,p,span,div,li,td,th,label,a,button) {
  color: rgba(255,255,255,.92) !important;
}

#content a,
#other-connections a {
  color: rgba(255,255,255,.92) !important;
}

/* List items / tiles */
#content .list-item,
#other-connections .list-item,
#content .connection,
#content .connection-group,
#content .client-panel-connection,
#other-connections .client-panel-connection,
#content .client-tile,
#other-connections .client-tile {
  background: rgba(20,20,20,.55) !important;
  border-color: rgba(255,255,255,.08) !important;
}

/* Hover state */
#content .list-item:hover,
#other-connections .list-item:hover,
#content .client-panel-connection:hover,
#other-connections .client-panel-connection:hover,
#content .client-tile:hover,
#other-connections .client-tile:hover {
  background: rgba(255,255,255,.10) !important;
}

/* Dialogs/modals inside app */
#content .modal-contents,
#content .notification,
#other-connections .modal-contents,
#other-connections .notification {
  background: rgba(20,20,20,.92) !important;
  color: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}

/* =========================================================
   TERMINAL / DISPLAY SAFETY
   - Prevent global white text rules from breaking remote display
   ========================================================= */

/* Do not force text colors inside display areas */
#content .display,
#content .display *,
#other-connections .display,
#other-connections .display * {
  color: inherit !important;
}

/* Do not force backgrounds on the actual remote display canvas */
#content .display canvas,
#other-connections .display canvas {
  background: transparent !important;
}

/* Text input bar (keep usable) */
#content .text-input,
#content .text-input *,
#other-connections .text-input,
#other-connections .text-input * {
  color: inherit !important;
}

/* =========================================================
   USER MENU (dropdown) – dark, readable, no green, stable icons
   ========================================================= */

/* Arrow indicator visible on dark */
.user-menu .menu-dropdown .menu-indicator,
guac-user-menu .menu-dropdown .menu-indicator {
  filter: invert(1) brightness(1.2) !important;
  opacity: 1 !important;
}

/* Text/links in user menu */
.user-menu,
.user-menu * {
  color: rgba(255,255,255,.92) !important;
}

/* Dropdown panel */
.user-menu .menu-dropdown .menu-contents,
guac-user-menu .menu-dropdown .menu-contents {
  background: rgba(20,20,20,0.96) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,0.65) !important;
}

/* Entries: base */
.user-menu .menu-dropdown .menu-contents li a,
guac-user-menu .menu-contents a {
  color: rgba(255,255,255,0.92) !important;
  background-color: transparent !important; /* important: not shorthand */
  text-decoration: none !important;

  /* icon layout */
  background-repeat: no-repeat !important;
  background-size: 1em 1em !important;
  background-position: .75em 50% !important;
  padding-left: 2.5em !important;
}

/* Hover/active/current (NO shorthand "background") */
.user-menu .menu-dropdown .menu-contents li a:hover,
.user-menu .menu-dropdown .menu-contents li a:focus,
.user-menu .menu-dropdown .menu-contents li a:active,
.user-menu .menu-dropdown .menu-contents li a.current,
.user-menu .menu-dropdown .menu-contents li a.current:hover {
  background-color: rgba(255,255,255,0.10) !important;
  background-repeat: no-repeat !important;
  background-size: 1em 1em !important;
  background-position: .75em 50% !important;
}

.user-menu .menu-dropdown .menu-contents li a.current,
.user-menu .menu-dropdown .menu-contents li a.current:hover {
  background-color: rgba(255,255,255,0.16) !important;
  opacity: 1 !important;
}

/* Logout ("danger") readable but not a red block */
.user-menu .menu-dropdown .menu-contents li a.danger,
.user-menu .menu-dropdown .menu-contents li a.danger:hover {
  background-color: rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.92) !important;
  font-weight: 700 !important;
}

/* Replace dark icons with normal icons */
.user-menu .menu-dropdown .menu-contents li a[href="#/"] {
  background-image: url(images/action-icons/guac-home.svg) !important;
}
.user-menu .menu-dropdown .menu-contents li a[href^="#/settings/"] {
  background-image: url(images/action-icons/guac-config.svg) !important;
}
.user-menu .menu-dropdown .menu-contents li a.logout {
  background-image: url(images/action-icons/guac-logout.svg) !important;
}

/* Title line icon sizing */
.user-menu .menu-dropdown .menu-title {
  background-repeat: no-repeat !important;
  background-size: 1em 1em !important;
  background-position: .5em 50% !important;
  padding-left: 2em !important;
}

/* =========================================================
   SETTINGS TABS: remove green selection/hover
   ========================================================= */

.page-tabs .page-list li a[href],
.section-tabs li a {
  background-color: transparent !important;
}

.page-tabs .page-list li a[href]:hover,
.section-tabs li a:hover {
  background-color: rgba(255,255,255,0.08) !important;
}

.page-tabs .page-list li a[href].current,
.page-tabs .page-list li a[href].current:hover,
.section-tabs li a.current,
.section-tabs li a.current:hover {
  background-color: rgba(255,255,255,0.14) !important;
  color: #fff !important;
}

.page-tabs .page-list ul,
.section-tabs ul {
  background-color: transparent !important;
}

/* =========================================================
   HOME (Overview): remove green highlight + restore hover
   ========================================================= */

/* "All Connections" list */
.list-item:not(.selected) .caption:hover {
  background-color: rgba(255,255,255,0.08) !important;
}

.list-item.selected {
  background-color: rgba(255,255,255,0.14) !important;
}

/* =========================================================
   RECENT CONNECTIONS: unified card hover + remove light gray areas
   ========================================================= */

.recent-connections .connection {
  border-radius: 14px !important;
  overflow: hidden !important;
  transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.recent-connections .connection > a {
  display: block !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  cursor: pointer !important;
  background-color: rgba(255,255,255,0.02) !important;
  transition: background-color 120ms ease, box-shadow 120ms ease;
}

/* Hover: subtle lift + crisp outline */
.recent-connections .connection:hover {
  transform: translateY(-2px) !important;
}

.recent-connections .connection:hover > a,
.recent-connections .connection > a:hover,
.recent-connections .connection > a:focus {
  background-color: rgba(255,255,255,0.04) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.22) inset,
    0 18px 40px rgba(0,0,0,0.60) !important;
}

/* Caption clean (no separate bar) */
.recent-connections .connection .caption {
  background: transparent !important;
  padding: 10px 12px !important;
}

/* Text contrast */
.recent-connections .connection .name {
  color: rgba(255,255,255,0.88) !important;
}
.recent-connections .connection:hover .name,
.recent-connections .connection > a:hover .name {
  color: rgba(255,255,255,0.98) !important;
}

/* IMPORTANT: remove the "lighter gray" letterboxing around thumbnails */
.recent-connections .connection .thumbnail,
.recent-connections .connection .thumbnail > *,
.recent-connections .connection .thumbnail canvas,
.recent-connections .connection .thumbnail img {
  background: #111 !important;
}

/* Keep thumbnail container itself neutral */
.recent-connections .connection .thumbnail {
  background-color: #111 !important;
}