/*
 * 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}/* ================================
   KIMBALIX Dark-Grey Theme
   ================================ */
/* Guacamole-Standardlogo entfernen */
.app-logo,
guac-login .logo {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Eigenes Logo anzeigen */
.login-ui .logo {
    background-image: url("images/kimbalix2.png") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;

    width: 180px !important;     /* Logo-Breite */
    height: 180px !important;    /* Logo-Höhe */

    max-width: none !important;  /* <<< WICHTIG */
    max-height: none !important; /* <<< WICHTIG */

    margin: 0 auto 20px auto !important;
    display: block !important;
    opacity: 1 !important;
}


/* Hintergrund allgemein */
body,
.login-ui,
.login-background,
.login-dialog-wrapper {
  background-color: #3a3a3a !important; /* Grau */
}

body {
  color: #e0e0e0 !important;
  font-family: Arial, sans-serif;
}

/* Logo-Bereich bewusst hell lassen */
.login-logo {
  background-image: url("images/kimbalix.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  min-height: 150px;
  margin: 20px auto;
  background-color: #ffffff; /* Weißer Hintergrund für bessere Logo-Sichtbarkeit */
  border-radius: 8px;
  padding: 10px;
}

/* Eingabefelder */
input[type="text"],
input[type="password"] {
  background-color: #3a3a3a !important; /* Mittelgrau */
  border: 2px solid #ffffff !important; /* Weißer Rahmen */
  color: #ffffff !important;
  padding: 8px;
  border-radius: 4px;
}

/* Buttons */
button[translate="APP.ACTION_LOGIN"],
button[translate="APP.ACTION_LOGIN_AGAIN"],
input[type="submit"].login,
input[type="submit"].continue-login {
  background-color: #3a3a3a !important; /* Weiß */
  color: #ffffff !important;            /* Weißer Text */
  border: none !important;
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: bold;


  cursor: pointer;
}

button[translate="APP.ACTION_LOGIN"]:hover,
button[translate="APP.ACTION_LOGIN_AGAIN"]:hover,
input[type="submit"].login:hover,
input[type="submit"].continue-login:hover {
  background-color: #d5d5d5 !important; /* Hellere Pink-Variante beim Hover */
  color: #ffffff !important;
}

/* Modale Fenster und Panels */
.login-dialog,
.notification,
.fatal-page-error,
.automatic-login-rejected-modal {
  background-color: #333333 !important; /* Dunkelgrau */
  color: #e0e0e0 !important;
  border-radius: 6px;
  padding: 15px;
  border: 1px solid #ffffff !important; /* Pinker Rahmen */
}

/* Versionstext ausblenden (falls störend) */
.version {
  display: none !important;
}
/* Originaltitel entfernen */
.login-dialog .login-dialog-title {
    font-size: 0 !important;
    line-height: 0 !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
}

/* Eigenes Logo einfügen */
/* Eigenes Logo anzeigen */
.login-ui .logo {
    background-image: url("images/kimbalix2.png") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;

    width: 180px !important;     /* Logo-Breite */
    height: 180px !important;    /* Logo-Höhe */

    max-width: none !important;  /* <<< WICHTIG */
    max-height: none !important; /* <<< WICHTIG */

    margin: 0 auto 20px auto !important;
    display: block !important;
    opacity: 1 !important;
}


/* Hintergrund allgemein */
body,
.login-ui,
.login-background,
.login-dialog-wrapper {
  background-color: #3a3a3a !important; /* Grau */
}

body {
  color: #e0e0e0 !important;
  font-family: Arial, sans-serif;
}

/* Logo-Bereich bewusst hell lassen */
.login-logo {
  background-image: url("images/kimbalix.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  min-height: 150px;
  margin: 20px auto;
  background-color: #ffffff; /* Weißer Hintergrund für bessere Logo-Sichtbarkeit */
  border-radius: 8px;
  padding: 10px;
}

/* Eingabefelder */
input[type="text"],
input[type="password"] {
  background-color: #3a3a3a !important; /* Mittelgrau */
  border: 2px solid #ffffff !important; /* Weißer Rahmen */
  color: #ffffff !important;
  padding: 8px;
  border-radius: 4px;
}

/* Buttons */
button[translate="APP.ACTION_LOGIN"],
button[translate="APP.ACTION_LOGIN_AGAIN"],
input[type="submit"].login,
input[type="submit"].continue-login {
  background-color: #3a3a3a !important; /* Weiß */
  color: #ffffff !important;            /* Weißer Text */
  border: none !important;
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: bold;


  cursor: pointer;
}

button[translate="APP.ACTION_LOGIN"]:hover,
button[translate="APP.ACTION_LOGIN_AGAIN"]:hover,
input[type="submit"].login:hover,
input[type="submit"].continue-login:hover {
  background-color: #d5d5d5 !important; /* Hellere Pink-Variante beim Hover */
  color: #ffffff !important;
}

/* Modale Fenster und Panels */
.login-dialog,
.notification,
.fatal-page-error,
.automatic-login-rejected-modal {
  background-color: #333333 !important; /* Dunkelgrau */
  color: #e0e0e0 !important;
  border-radius: 6px;
  padding: 15px;
  border: 1px solid #ffffff !important; /* Pinker Rahmen */
}

/* Versionstext ausblenden (falls störend) */
.version {
  display: none !important;
}
/* Originaltitel entfernen */
.login-dialog .login-dialog-title {
    font-size: 0 !important;
    line-height: 0 !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
}

/* Eigenes Logo einfügen */
/* Eigenes Logo anzeigen */
.login-ui .logo {
    background-image: url("images/kimbalix2.png") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;

    width: 180px !important;     /* Logo-Breite */
    height: 180px !important;    /* Logo-Höhe */

    max-width: none !important;  /* <<< WICHTIG */
    max-height: none !important; /* <<< WICHTIG */

    margin: 0 auto 20px auto !important;
    display: block !important;
    opacity: 1 !important;
}


/* Hintergrund allgemein */
body,
.login-ui,
.login-background,
.login-dialog-wrapper {
  background-color: #3a3a3a !important; /* Grau */
}

body {
  color: #e0e0e0 !important;
  font-family: Arial, sans-serif;
}

/* Logo-Bereich bewusst hell lassen */
.login-logo {
  background-image: url("images/kimbalix.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  min-height: 150px;
  margin: 20px auto;
  background-color: #ffffff; /* Weißer Hintergrund für bessere Logo-Sichtbarkeit */
  border-radius: 8px;
  padding: 10px;
}

/* Eingabefelder */
input[type="text"],
input[type="password"] {
  background-color: #3a3a3a !important; /* Mittelgrau */
  border: 2px solid #ffffff !important; /* Weißer Rahmen */
  color: #ffffff !important;
  padding: 8px;
  border-radius: 4px;
}

/* Buttons */
button[translate="APP.ACTION_LOGIN"],
button[translate="APP.ACTION_LOGIN_AGAIN"],
input[type="submit"].login,
input[type="submit"].continue-login {
  background-color: #3a3a3a !important; /* Weiß */
  color: #ffffff !important;            /* Weißer Text */
  border: none !important;
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: bold;


  cursor: pointer;
}

button[translate="APP.ACTION_LOGIN"]:hover,
button[translate="APP.ACTION_LOGIN_AGAIN"]:hover,
input[type="submit"].login:hover,
input[type="submit"].continue-login:hover {
  background-color: #d5d5d5 !important; /* Hellere Pink-Variante beim Hover */
  color: #ffffff !important;
}

/* Modale Fenster und Panels */
.login-dialog,
.notification,
.fatal-page-error,
.automatic-login-rejected-modal {
  background-color: #333333 !important; /* Dunkelgrau */
  color: #e0e0e0 !important;
  border-radius: 6px;
  padding: 15px;
  border: 1px solid #ffffff !important; /* Pinker Rahmen */
}

/* Versionstext ausblenden (falls störend) */
.version {
  display: none !important;
}
/* Originaltitel entfernen */
.login-dialog .login-dialog-title {
    font-size: 0 !important;
    line-height: 0 !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
}

/* Eigenes Logo einfügen */



/* --- KIMBALIX Theme overrides v6 --- */

/* Ensure header text appears white in all header classes */
.guac-toolbar-header .title,
.guac-toolbar-header .title::before,
.header .title,
.navigation-header .title-text,
.page-header-title,
.page-title,
.navigation-header .title-text::before,
.page-header-title::before {
    color: #ffffff !important;
    text-shadow: none !important;
}

/* Insert KIMBALIX text in many header locations */
.guac-toolbar-header .title::before,
.header .title::before,
.navigation-header .title-text::before,
.page-header-title::before {
    content: "KIMBALIX" !important;
    color: #ffffff !important;
    font-family: Arial, sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
}

/* User menu: force dark background and white text with high specificity */
div.user-menu .menu,
div.user-menu .menu ul,
div.user-menu .menu li,
div.user-menu .menu a,
div.user-menu .menu .user-info {
    background-color: #2b2b2b !important;
    color: #ffffff !important;
}

/* Login placeholders */
.login-ui input[type="text"]::placeholder,
.login-ui input[type="password"]::placeholder,
.login-ui input[type="tel"]::placeholder,
.login-ui input[type="email"]::placeholder {
    color: #d0d0d0 !important;
    opacity: 1 !important;
}

/* Force connection list text white */
.connection-group .connection-name,
.recent-connections .name,
.menu .menu-item,
.user-menu .menu-item,
.section-header,
.connection-group .connection-icon,
.list-item .name,
.connection .name,
.connection .title,
.connection .connection-name,
.connection-list .name,
.guac-connection .name,
.guac-connection .label {
    color: #ffffff !important;
}

/* Force icons white */
.connection-group .connection-icon,
.connection .icon,
.list-item .icon,
.guac-connection .icon,
.icon {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Normalize font sizes */
body, .list-item .name, .section-header, .menu .menu-item, .user-menu .menu-item {
    font-size: 14px !important;
}

/* Ensure settings text white */
.settings, .settings * , .admin-panel, .admin-panel * {
    color: #ffffff !important;
}

/* Tool panels (clipboard, input methods, etc) dark background + readable text */
.guac-panel,
.guac-client .menu,
.properties,
.properties * ,
.guac-panel * {
    background-color: #2b2b2b !important;
    color: #ffffff !important;
}

/* Hide stray large-title injection */
.login-dialog .login-dialog-title, .login-dialog .login-dialog-title::before {
    font-size: inherit !important;
}

/* remove white banner fallback */
.login-logo, .login-background .banner, .banner {
    background-color: transparent !important;
    background-image: none !important;
}

/* === Dark Theme Fixes by ChatGPT === */

.connection-edit input,
.connection-edit select,
.connection-edit textarea {
    background-color: #2b2b2b !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
}
.connection-edit input::placeholder {
    color: #bbbbbb !important;
}

.menu,
.menu-content {
    background-color: #2b2b2b !important;
    color: #ffffff !important;
    border: 1px solid #444;
}
.menu a,
.menu button {
    color: #ffffff !important;
}
.menu a:hover,
.menu button:hover {
    background-color: #3a3a3a !important;
}

.client-menu,
.client-menu-content {
    background-color: #2b2b2b !important;
    color: #ffffff !important;
}
.client-menu a,
.client-menu label,
.client-menu span {
    color: #ffffff !important;
}
.client-menu a:hover {
    background-color: #3a3a3a !important;
}

.login-ui input {
    background-color: #2b2b2b !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
}
.login-ui input::placeholder {
    color: #bbbbbb !important;
}
.login-ui label {
    color: #bbbbbb !important;
}

/* === v11 Dark Theme Fixes (Stronger Selectors) === */

/* 1. ALL form inputs (connections, settings, admin) */
input[type="text"],
input[type="password"],
input[type="number"],
select,
textarea {
    background-color: #2b2b2b !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
}

input::placeholder,
textarea::placeholder {
    color: #bdbdbd !important;
}

/* 2. User dropdown (top right) */
.dropdown-menu,
.user-menu,
.user-menu .menu,
.user-menu .menu-content {
    background-color: #2b2b2b !important;
    color: #ffffff !important;
}

.dropdown-menu a,
.user-menu a,
.user-menu span,
.user-menu button {
    color: #ffffff !important;
}

.dropdown-menu a:hover,
.user-menu a:hover,
.user-menu button:hover {
    background-color: #3a3a3a !important;
}

/* 4. Login placeholders + labels */
.login-ui input,
.login-ui select {
    background-color: #2b2b2b !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
}

.login-ui input::placeholder {
    color: #bdbdbd !important;
}

.login-ui label,
.login-ui .field-label {
    color: #bdbdbd !important;
}

/* === v12 FINAL User Menu Fix === */

.menu-contents {
    background-color: #2b2b2b !important;
    color: #ffffff !important;
    border: 1px solid #444;
}

.menu-contents .profile,
.menu-contents .full-name,
.menu-contents .organizational-role,
.menu-contents .organization {
    color: #ffffff !important;
}

.menu-contents .action-list li a {
    color: #ffffff !important;
}

.menu-contents .action-list li a:hover {
    background-color: #3a3a3a !important;
}

/* === v13 FINAL Login + Modal Fixes === */

/* 1. Logged-out modal background (login overlay) */
.logged-out-modal,
.guac-modal,
.guac-modal .modal-contents,
.guac-modal .modal-content {
    background-color: #2b2b2b !important;
    color: #ffffff !important;
}

/* 2. Login field headers (Benutzername / Passwort) */
.login-ui .field-header label,
.login-ui .labeled-field .field-header label,
.login-ui label.ng-binding {
    color: #ffffff !important;
}

/* Ensure labels stay white when focused/active */
.login-ui .labeled-field.focused label,
.login-ui .labeled-field label {
    color: #ffffff !important;
}

/* === v14 FINAL TOTP + Login Input Fix === */

/* Guacamole hardcoded white background override */
.login-ui .login-fields input,
.login-ui .login-fields input[type="text"],
.login-ui .login-fields input[type="password"],
.login-ui .login-fields input[type="number"],
.login-ui .login-fields input.ng-empty,
.login-ui .login-fields input.ng-pristine {
    background-color: #2b2b2b !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
}

/* TOTP specific field */
.login-ui .totp-code input,
.login-ui .totp-code input[type="text"] {
    background-color: #2b2b2b !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
}

/* Placeholder */
.login-ui input::placeholder {
    color: #bbbbbb !important;
}

/* === v15 ABSOLUTE FINAL LOGIN INPUT OVERRIDE === */

/* Override Guacamole transparent background on empty login fields */
.login-ui .login-fields .labeled-field.empty input,
.login-ui .login-fields .labeled-field input {
    background-color: #2b2b2b !important;
    background: #2b2b2b !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
}

/* Force repaint even when Guacamole toggles states */
.login-ui .login-fields .labeled-field.empty input:focus,
.login-ui .login-fields .labeled-field input:focus {
    background-color: #2b2b2b !important;
}

/* Placeholder */
.login-ui .login-fields input::placeholder {
    color: #bbbbbb !important;
}

/* === v16 FINAL: Container-based Login Field Fix === */

/* Color the container, not the input (Guacamole-safe) */
.login-ui .login-fields .labeled-field {
    background-color: #2b2b2b !important;
    border: 1px solid #ffffff !important;
    border-radius: 6px;
    padding: 0.35em;
}

/* Inputs remain transparent by design */
.login-ui .login-fields .labeled-field input {
    background: transparent !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

/* Field labels (Benutzername / Passwort) */
.login-ui .field-header label {
    color: #ffffff !important;
}

/* Placeholder text */
.login-ui .login-fields input::placeholder {
    color: #bbbbbb !important;
}

/* === v17 FIX: correct login field layout === */

/* Remove padding from container to avoid double boxes */
.login-ui .login-fields .labeled-field {
    padding: 0 !important;
    background-color: transparent !important;
    border: none !important;
}

/* Style the actual input wrapper instead */
.login-ui .login-fields .form-field {
    background-color: #2b2b2b !important;
    border: 1px solid #ffffff !important;
    border-radius: 6px;
    padding: 0.35em;
}

/* Input stays transparent */
.login-ui .login-fields .form-field input {
    background: transparent !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

/* Labels */
.login-ui .field-header label {
    color: #ffffff !important;
}

/* Placeholder */
.login-ui .login-fields input::placeholder {
    color: #bbbbbb !important;
}

/* === v17-clean-hover === */
/* Keep login EXACTLY like v17, only remove Guacamole green hover */

/* Buttons */
button:hover,
button:focus,
button:active,
input[type="submit"]:hover,
input[type="button"]:hover {
    background-color: #3a3a3a !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Links / tabs */
a:hover,
a:focus,
.page-tabs a:hover,
.page-tabs li.current a,
.list a:hover {
    color: #ffffff !important;
    background-color: #3a3a3a !important;
}

/* Focus rings */
*:focus {
    outline-color: #ffffff !important;
}

/* === v17 FINAL POLISH === */

/* 1) Light grey hover instead of green */
button:hover,
button:focus,
button:active,
input[type="submit"]:hover,
input[type="button"]:hover,
a:hover,
.page-tabs a:hover {
    background-color: #4a4a4a !important; /* very light grey */
    border-color: #ffffff !important;
    color: #ffffff !important;
}

/* 2) Remove inner bars / focus lines inside login inputs */
.login-ui input,
.login-ui input:focus {
    box-shadow: none !important;
    outline: none !important;
}

/* Some Guacamole themes add inset shadows */
.login-ui .form-field,
.login-ui .form-field:focus-within {
    box-shadow: none !important;
}

/* === v17-loginfix: correct login field styling === */

.login-ui .login-fields,
.login-ui .login-fields * {
    box-shadow: none !important;
}

/* Style ONLY the actual input */
.login-ui .login-fields input[type="text"],
.login-ui .login-fields input[type="password"] {
    background-color: #2f2f2f !important;
    border: 1px solid #ffffff !important;
    border-radius: 6px !important;
    padding: 0.6em 0.7em !important;
    color: #ffffff !important;
}

/* Remove borders from wrappers */
.login-ui .login-fields .labeled-field,
.login-ui .login-fields .form-field,
.login-ui .login-fields .username-field,
.login-ui .login-fields .password-field {
    background: transparent !important;
    border: none !important;
}

/* Hover: subtle light grey */
button:hover,
input[type="submit"]:hover {
    background-color: #4a4a4a !important;
    color: #ffffff !important;
}

/* === v17-loginfix-hover2: Connection list hover fix === */

/* Connection list hover (remove green) */
.connection:hover,
.connection:focus,
.connection.selected,
.connection-list .connection:hover,
.connection-list .connection.selected {
    background-color: #4a4a4a !important; /* light grey */
    color: #ffffff !important;
}

/* Tree / group rows */
.connection-group:hover,
.connection-group.selected {
    background-color: #4a4a4a !important;
    color: #ffffff !important;
}

/* === v17-loginfix-hover3: FINAL connection hover fix === */

/* Actual clickable connection element */
a.home-connection:hover,
a.home-connection:focus,
a.home-connection.active {
    background-color: #4a4a4a !important;
    color: #ffffff !important;
}

/* Ensure inner text/icons inherit color */
a.home-connection:hover *,
a.home-connection:focus * {
    color: #ffffff !important;
}

/* Expanded / selected state */
.home-connection.active {
    background-color: #4a4a4a !important;
}

/* === HOVER FINAL FIX (connections) === */

/* Kill Guacamole green hover TEXT color */
.connection a:hover,
.connection-group a:hover,
.user-group a:hover,
.user a:hover,
.home-connection:hover,
.home-connection.active {
    color: #ffffff !important;
    background-color: #4a4a4a !important;
}

/* Icons, arrows, children */
.connection a:hover *,
.connection-group a:hover *,
.user-group a:hover *,
.user a:hover *,
.home-connection:hover * {
    color: #ffffff !important;
    fill: #ffffff !important;
}