/* =========================
   Global background
   ========================= */

html, body {
  height: 100%;
}

.login-ui {
  background: url("app/ext/branding/images/bg.jpg") no-repeat center center fixed !important;
  background-size: cover !important;
}

/* Keep Guacamole's default white panels from washing out the background */
.login-ui,
.login-ui * {
  background-color: transparent !important;
}

/* =========================
   Remove Guacamole branding
   ========================= */

#custom-top-name,
.login-ui .logo,
.login-ui .header,
.login-ui .subtitle,
.login-ui .version,
.login-ui .footer,
.login-ui .login-ui-footer {
  display: none !important;
}

/* =========================
   Readability / colors
   ========================= */

.login-ui,
.login-ui label,
.login-ui .caption,
.login-ui .instruction,
.login-ui .help,
.login-ui input,
.login-ui button,
.login-ui a,
.login-ui p,
.login-ui h1,
.login-ui h2,
.login-ui h3,
.login-ui h4,
.login-ui h5,
.login-ui h6,
.login-ui .error,
.login-ui .warning {
  color: #fff !important;
}

/* Placeholders readable */
.login-ui input::placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Links readable */
.login-ui a {
  text-decoration: underline;
}

/* =========================
   Keep login perfectly centered
   (banner must NOT affect layout)
   ========================= */

.login-ui {
  min-height: 100vh;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 32px !important;
  box-sizing: border-box;
}

/* Login dialog "card" styling */
.login-ui .login-dialog,
.login-ui .login-dialog * {
/*  background-color: rgba(0, 0, 0, 0.55) !important;*/
}

.login-ui .login-dialog {
  position: relative;         /* ensure it can sit above the banner */
  z-index: 20;                /* above banner */
  border-radius: 12px !important;
  box-sizing: border-box;
}

/* Optional: ensure inner sections inherit rounded look cleanly */
.login-ui .login-dialog-top,
.login-ui .login-dialog-middle,
.login-ui .login-dialog-bottom {
  border-radius: 12px !important;
}

/* =========================
   Fixed side banner (background-like)
   Does not move/shift login
   ========================= */

#custom-auth-banner {
  position: fixed;            /* key: removed from flow, "background-like" */
  top: 24px;
  bottom: 24px;
  left: 24px;

  width: 360px;
  padding: 24px 22px;

  border-radius: 12px !important;
  background: rgba(0, 0, 0, 0.55) !important;

  /* subtle border like your earlier "card" feel */
  border: 1px solid rgba(255, 255, 255, 0.14);

  color: #fff !important;

  /* keep your readability spacing */
  line-height: 1.6 !important;
  font-size: 15px !important;

  display: flex;
  flex-direction: column;
  justify-content: center;

  overflow: auto;

  /* keep it behind the login dialog */
  z-index: 5;
}

/* Banner typography and spacing */
#custom-auth-banner p {
  margin: 0 0 14px 0 !important;
}

#custom-auth-banner ul {
  margin: 0 0 14px 18px !important;
  padding: 0 !important;
}

#custom-auth-banner li {
  margin: 0 0 8px 0 !important;
}

/* Optional title emphasis (if you use <strong> in banner HTML) */
#custom-auth-banner strong {
  font-size: 18px;
  letter-spacing: 0.3px;
}

/* =========================
   Responsiveness (mobile)
   Stack banner above login
   ========================= */

@media (max-width: 900px) {
  /* On small screens, banner becomes a normal block above login */
  #custom-auth-banner {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;

    width: auto;
    max-height: none;

    margin: 0 0 16px 0;
    overflow: visible;
    z-index: 10;
  }

  .login-ui {
    flex-direction: column;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 20px !important;
  }

  .login-ui .login-dialog {
    margin: 0 auto;
    z-index: 20;
  }
}



/* =========================
   Modern input styling
   Brand color: #004C6C
   ========================= */

/* Base input appearance */
.login-ui input[type="text"],
.login-ui input[type="password"],
.login-ui input[type="email"],
.login-ui input[type="number"] {
  background-color: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 6px;
  padding: 10px 12px;
  color: #fff !important;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

/* Hover: slightly brighter border */
.login-ui input:hover {
  border-color: rgba(255, 255, 255, 0.45) !important;
}

/* Focus: brand accent */
.login-ui input:focus {
  outline: none !important;
  border-color: #004C6C !important;
  background-color: rgba(0, 0, 0, 0.45) !important;

  box-shadow:
    0 0 0 1px rgba(0, 76, 108, 0.8),
    0 0 0 4px rgba(0, 76, 108, 0.25);
}

/* Disabled inputs */
.login-ui input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* =========================
   Login card brand accent
   ========================= */

/* Subtle brand tint to the login card */
/*.login-ui .login-dialog {
  background:
    linear-gradient(
      180deg,
      rgba(0, 76, 108, 0.25) 0%,
      rgba(0, 0, 0, 0.55) 35%,
      rgba(0, 0, 0, 0.55) 100%
    ) !important;

  border: 1px solid rgba(0, 76, 108, 0.45);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
*/

/* Glassy brand-tinted login card */
.login-ui .login-dialog {
  /* Fallback background (for browsers without backdrop-filter) */
  background:
    linear-gradient(
      180deg,
      rgba(0, 76, 108, 0.28) 0%,
      rgba(0, 0, 0, 0.55) 40%,
      rgba(0, 0, 0, 0.55) 100%
    ) !important;

  /* Glass effect */
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);

  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;

  box-shadow:
    0 25px 45px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);

  /* Helps text clarity on blur */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}


/* Optional: accent the login button */
.login-ui button,
.login-ui .login-button {
  background-color: #004C6C !important;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff !important;

  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.05s ease;
}

.login-ui button:hover,
.login-ui .login-button:hover {
  background-color: #006A99 !important;
}

.login-ui button:active,
.login-ui .login-button:active {
  transform: translateY(1px);
}

/* Optional: error messages more visible */
.login-ui .error {
  color: #ffb3b3 !important;
}

/* =========================
   Login form container polish
   ========================= */

/* The inner login form block */
.login-form {
  border-radius: 12px !important;

  /* Slightly lighter than pure black */
  background: none;
/*    linear-gradient(
      180deg,
      rgba(0, 76, 108, 0.18) 0%,
      rgba(0, 0, 0, 0.45) 40%,
      rgba(0, 0, 0, 0.45) 100%
    ) !important;
*/
  border: none; /* 1px solid rgba(0, 76, 108, 0.35);*/

  padding: 18px 18px 16px 18px;

  box-shadow: none;
/*    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 18px rgba(0, 0, 0, 0.45);
*/
}

/* Ensure children inherit rounded corners visually */
.login-form > *:first-child {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.login-form > *:last-child {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* =========================
   Buttons (ALL variants)
   ========================= */

/* Base button style */
.login-ui button,
.login-ui input[type="submit"],
.login-ui .continue-login {
  background-color: #004C6C !important;
  color: #fff !important;

  border-radius: 8px;
  border: 1px solid rgba(0, 76, 108, 0.75);

  padding: 10px 14px;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 2px 6px rgba(0, 0, 0, 0.4);

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.05s ease;
}

/* Hover */
.login-ui button:hover,
.login-ui input[type="submit"]:hover,
.login-ui .continue-login:hover {
  background-color: #006A99 !important;
  border-color: #0082B8;
}

/* Active / pressed */
.login-ui button:active,
.login-ui input[type="submit"]:active,
.login-ui .continue-login:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* Disabled state */
.login-ui button:disabled,
.login-ui input[type="submit"]:disabled,
.login-ui .continue-login[disabled] {
  background-color: rgba(0, 76, 108, 0.35) !important;
  border-color: rgba(0, 76, 108, 0.35);
  opacity: 0.6;
  cursor: not-allowed;
}


/* =========================
   POST-LOGIN HARD RESET
   Remove background image & effects
   ========================= */

/* Ensure no background image survives after login */
[ng-switch-when="ready"],
[ng-switch-when="ready"] body {
  background-image: none !important;
}

/*

[ng-switch-when="ready"],
[ng-switch-when="ready"] .guacamole-client {
  background-color: #ffffff !important;
  color: #000000 !important;
}

[ng-switch-when="ready"],
[ng-switch-when="ready"] * {
  box-shadow: none !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

[ng-switch-when="ready"] input,
[ng-switch-when="ready"] textarea,
[ng-switch-when="ready"] select {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #cccccc !important;
}

[ng-switch-when="ready"] button,
[ng-switch-when="ready"] input[type="submit"] {
  background-color: #f5f5f5 !important;
  color: #000000 !important;
  border: 1px solid #cccccc !important;
}

[ng-switch-when="ready"] #custom-auth-banner {
  display: none !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.
 */

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