/*
 * 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}/* Dünninghaus Fernzugriff 1.0.1 — Guacamole 1.6.0 only.
 * Keep all layout rules within home/login/our additions. Never target the
 * remote canvas, native display transforms, admin lists or generic .menu.
 */
:root {
    --dh-ink: #192b3c;
    --dh-muted: #536578;
    --dh-line: #dce4eb;
    --dh-blue: #205ad0;
    --dh-blue-hover: #1749ad;
    --dh-bg: #f4f7fa;
    --dh-focus: #a75b00;
}

/* Login, including native continuation forms (TOTP/password challenges). */
div.login-ui {
    background: var(--dh-bg);
    color: var(--dh-ink);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.login-ui .login-dialog-middle { padding: 24px 16px; }
.login-ui .login-dialog {
    width: 100%;
    max-width: 25rem;
    padding: 28px;
    border: 1px solid var(--dh-line);
    border-radius: 16px;
    background: white;
    box-shadow: 0 8px 32px #192b3c0a;
    font-size: 1rem;
    overflow-wrap: anywhere;
}
.login-ui.continuation .login-dialog {
    max-width: 38rem;
    border: 1px solid var(--dh-line);
    box-shadow: 0 8px 32px #192b3c0a;
}
.login-ui .login-dialog .logo {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    border-radius: 14px;
    background: var(--dh-ink);
    color: white;
    text-align: center;
}
.login-ui .login-dialog .logo::before { content: "D"; font-size: 28px; font-weight: 700; line-height: 48px; }
.login-ui .login-dialog .version { padding: 0 0 20px; }
.login-ui .login-dialog .version .app-name {
    color: var(--dh-ink);
    font-size: 1.15rem;
    line-height: 1.4;
    text-transform: none;
}
.login-ui .login-dialog .version .version-number {
    position: static;
    margin: 8px 0 0;
    padding: 0;
    color: var(--dh-muted);
    background: none;
    border-radius: 0;
    font-size: .75rem;
    text-align: center;
    font-style: normal;
    opacity: 1;
}
.login-ui .login-fields .labeled-field .field-header {
    position: static;
    z-index: auto;
    margin: 14px 0 6px;
    font-size: .875rem;
    font-weight: 600;
    color: var(--dh-ink);
    opacity: 1;
    overflow: visible;
}
.login-ui .login-dialog input[type="text"],
.login-ui .login-dialog input[type="password"],
.login-ui .login-dialog input[type="email"],
.login-ui .login-dialog input[type="number"] {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #77899a;
    border-radius: 8px;
    background: white;
    color: var(--dh-ink);
    box-shadow: none;
    font: inherit;
}
.login-ui .login-dialog .buttons input[type="submit"] {
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 11px 16px;
    border: 1px solid var(--dh-blue);
    border-radius: 8px;
    background: var(--dh-blue);
    color: white;
    font: inherit;
    font-weight: 650;
    text-shadow: none;
    box-shadow: none;
}
.login-ui .login-dialog .buttons input[type="submit"]:hover { background: var(--dh-blue-hover); }
.login-ui .login-dialog .buttons input[type="submit"]:disabled { opacity: .65; cursor: wait; }
.login-ui .login-dialog img, .login-ui .login-dialog canvas { max-width: 100%; height: auto; }
.login-ui.error p.login-error { z-index: 1; position: relative; margin: 8px; }

/* Branded home. Native user menus, filters, pager and hierarchy are retained. */
.home-view {
    min-height: 100vh;
    background: var(--dh-bg);
    color: var(--dh-ink);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    padding: 0 24px 40px;
}
.home-view .dh-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 1120px;
    margin: 0 auto 28px;
    padding: 20px 0;
    border-bottom: 1px solid var(--dh-line);
}
.dh-brand .dh-monogram {
    display: grid;
    place-items: center;
    flex: 0 0 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--dh-ink);
    color: white;
    font-size: 22px;
    font-weight: 700;
}
.dh-brand strong { display: block; font-size: 18px; line-height: 1.3; }
.dh-brand div > span { display: block; color: var(--dh-muted); font-size: 13px; }
.home-view .connection-list-ui { max-width: 1120px; margin: auto; }
.home-view .connection-list-ui > .header {
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    border: 0;
    box-shadow: none;
    background: transparent;
    margin: 16px 0;
}
.home-view .header h2 {
    padding: 0;
    margin: 0;
    min-width: 0;
    color: var(--dh-ink);
    font-size: 1.4rem;
    letter-spacing: -.025em;
    text-transform: none;
}
.home-view .header .filter { width: 240px; max-width: 100%; margin: 0; padding: 0; }
.home-view .header .filter input {
    min-height: 44px;
    border: 1px solid #77899a;
    border-radius: 8px;
    background-color: white;
    color: var(--dh-ink);
    font: inherit;
    padding-top: 8px;
    padding-bottom: 8px;
}
.home-view .header .user-menu .menu-dropdown { border: 1px solid var(--dh-line); border-radius: 8px; background: white; }
.home-view .user-menu .menu-title { max-width: 18rem; min-height: 44px; color: var(--dh-ink); }
.home-view .user-menu .menu-contents { border-radius: 8px; background: white; box-shadow: 0 8px 24px #192b3c24; }
.home-view .user-menu .menu-contents li a:hover { background-color: #eaf0fb; }
.home-view div.all-connections { margin: 0 0 28px; }
.home-view .all-connections .group-list-page,
.home-view .all-connections .connection-group > .children {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: 18px;
}
.home-view .all-connections .group-list-page > .list-item,
.home-view .all-connections .children > .list-item { min-width: 0; }
/* A folder spans the row; its children form another grid. Unsupported :has()
 * falls back to a readable single-cell folder instead of changing behaviour. */
.home-view .all-connections .list-item:has(> .connection-group:not(.empty.balancer)) { grid-column: 1 / -1; }
.home-view .all-connections .connection-group > .children { margin: 12px 0 0; padding: 0; }
.home-view .all-connections .children > .list-item::before,
.home-view .all-connections .children > .list-item::after { display: none; }
.home-view .all-connections .list-item .caption { padding: 0; background: transparent; }
.home-view .all-connections .list-item .caption:hover { background: transparent; }
.home-view .all-connections .connection-group:not(.empty.balancer) > .caption {
    padding: 10px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.home-view .all-connections .connection-group:not(.empty.balancer) > .caption ng-include { flex: 1; min-width: 0; }
.home-view .all-connections .connection-group:not(.empty.balancer) > .caption .name { color: var(--dh-ink); font-weight: 650; overflow-wrap: anywhere; }
.home-view .all-connections .connection-group > .caption .icon.expand { flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid var(--dh-line); border-radius: 8px; background-color: white; }
.home-view a.home-connection,
.home-view .empty.balancer a.home-connection-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    min-height: 185px;
    padding: 22px;
    border: 1px solid var(--dh-line);
    border-radius: 14px;
    background: white;
    color: var(--dh-ink);
    text-decoration: none;
    box-shadow: 0 4px 16px #192b3c05;
    overflow-wrap: anywhere;
    transition: border-color .12s, box-shadow .12s;
}
.home-view a.home-connection:hover,
.home-view .empty.balancer a.home-connection-group:hover { border-color: #7d9bca; box-shadow: 0 6px 20px #192b3c12; }
.home-view a.home-connection .icon.type,
.home-view .empty.balancer a.home-connection-group .icon.type {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 11px;
    background-color: #edf2fa;
    background-size: 24px 24px;
}
.home-view a.home-connection .name,
.home-view .empty.balancer a.home-connection-group .name { margin: 0; padding: 0; color: var(--dh-ink); font-size: 1.15rem; font-weight: 650; }
.home-view a.home-connection .activeUserCount { float: none; margin: 0; color: var(--dh-muted); font-size: .8rem; font-style: normal; }
.home-view .dh-connect {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin-top: auto;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--dh-blue);
    color: white;
    font-weight: 650;
    font-size: .9rem;
}
.home-view a:hover > .dh-connect { background: var(--dh-blue-hover); }
.home-view .recent-connections { margin: 0; }
.home-view .recent-connections div.connection { margin: 0 14px 14px 0; padding: 14px; border: 1px solid var(--dh-line); border-radius: 12px; background: white; }
.home-view .recent-connections a { text-decoration: none; color: var(--dh-ink); }
.home-view .recent-connections .remove-recent { visibility: visible; opacity: .7; }
/* Empty-history text is informational only. Keep the separate native header
 * and user menu untouched; real recent entries keep their own bottom margin. */
.home-view .recent-connections .placeholder { display: none; }

/* Visible entry point into the existing native menu. Display geometry and
 * remote input code remain untouched. The small button overlays the top right
 * of the remote display; opening the menu hides it. */
.dh-client-tools { position: absolute; top: 8px; right: 8px; z-index: 101; max-width: calc(100% - 16px); font: 14px/1.4 system-ui, sans-serif; }
.dh-client-tools button,
#guac-menu .dh-close-menu {
    min-height: 44px;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid #536578;
    border-radius: 8px;
    background: var(--dh-ink);
    color: white;
    font: inherit;
    font-weight: 600;
    box-shadow: 0 2px 10px #0003;
    text-shadow: none;
    cursor: pointer;
}
.dh-client-tools button:hover, #guac-menu .dh-close-menu:hover { background: #263f58; }
.dh-client-tools .dh-tools-detail { margin-left: 10px; font-size: 12px; font-weight: 400; }
#guac-menu .dh-close-menu { flex: 0 0 auto; align-self: center; margin: 4px; font-size: 13px; }
#guac-menu .dh-menu-help { margin: 0 0 18px; padding: 12px; border: 1px solid #c7d5e3; border-radius: 8px; background: #eaf0f6; color: var(--dh-ink); font: 14px/1.5 system-ui, sans-serif; }

/* Strong keyboard focus, only in branded surfaces and native client menu. */
.home-view a:focus-visible, .home-view button:focus-visible,
.home-view input:focus-visible, .login-ui input:focus-visible,
.login-ui button:focus-visible, .login-ui a:focus-visible,
.dh-client-tools button:focus-visible,
#guac-menu button:focus-visible, #guac-menu input:focus-visible,
#guac-menu textarea:focus-visible, #guac-menu a:focus-visible {
    outline: 3px solid var(--dh-focus);
    outline-offset: 3px;
}
@media (max-width: 620px) {
    .home-view { padding: 0 16px 28px; }
    .home-view .dh-brand { margin-bottom: 18px; padding: 16px 0; }
    .home-view .header h2 { font-size: 1.25rem; }
    .home-view .header .filter { order: 3; flex: 1 1 100%; width: 100%; }
    .home-view .user-menu .menu-title { max-width: 9rem; }
    .home-view .all-connections .group-list-page,
    .home-view .all-connections .connection-group > .children { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .home-view a.home-connection, .home-view .empty.balancer a.home-connection-group { padding: 18px; min-height: 165px; }
    .dh-client-tools .dh-tools-detail { display: none; }
    .login-ui .login-dialog { padding: 22px 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .home-view a.home-connection, .login-ui, .login-ui.error .login-dialog { animation: none; transition: none; }
}