/* =========================================================
   GERWALK – APACHE GUACAMOLE CUSTOM THEME
   Version: 1.6.x
   Scope  : Login UI only
   Method : CSS-only (branding JAR)
   ========================================================= */


/* =========================================================
   1. FONT DEFINITIONS
   ========================================================= */

@font-face {
    font-family: 'Protoculture';
    src: url('app/ext/gerwalk-theme/fonts/Protoculture.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Protoculture';
    src: url('app/ext/gerwalk-theme/fonts/ProtocultureBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}


/* =========================================================
   2. GLOBAL FONT APPLICATION
   ========================================================= */

body,
.login-ui,
input,
textarea,
select,
button {
    font-family: 'Protoculture', sans-serif !important;
    letter-spacing: 1px;
}


/* =========================================================
   3. LOGIN UI – BACKGROUND
   ========================================================= */

.login-ui {
    background-color: #000 !important; /* Pitch black */
    background-image: none !important;
}


/* =========================================================
   4. LOGIN DIALOG CONTAINER
   ========================================================= */

.login-ui .login-dialog {
    background: #1a1a1a !important;     /* Dark grey panel */
    border: 1px solid #333;
    color: #eee;
    max-width: 450px;                   /* Space for logo */
}


/* =========================================================
   5. LOGO OVERRIDE
   ========================================================= */

.login-ui .login-dialog .logo {
    background-image: none !important;  /* Hide default logo */
    height: 250px !important;
    width: 100% !important;
    margin-bottom: 15px;
}

.login-ui .login-dialog .logo::after {
    content: "";
    display: block;
    background-image: url('app/ext/gerwalk-theme/images/gerwalk-logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100%;
}


/* =========================================================
   6. APPLICATION NAME REPLACEMENT
   Replaces "Apache Guacamole" with "REMOTE ACCESS DECK"
   ========================================================= */

/* Hide original app name text */
.login-ui .login-dialog .app-name {
    font-size: 0 !important;
    line-height: 0 !important;
}

/* Inject custom app name */
.login-ui .login-dialog .app-name::after {
    content: "REMOTE ACCESS DECK";
    display: block;

    font-family: 'Protoculture', sans-serif;
    font-size: 26px;
    line-height: 1.2;
    letter-spacing: 3px;
    color: #eaeaea;

    text-align: center;
    margin-top: 10px;
}


/* =========================================================
   7. INPUT FIELDS
   ========================================================= */

.login-ui .login-fields .labeled-field input {
    background: #000 !important;
    color: #fff !important;
    border: 1px solid #555 !important;
}


/* =========================================================
   8. FIELD LABELS
   ========================================================= */

.login-ui .login-fields .labeled-field .field-header {
    color: #aaa !important;
    font-weight: bold;
}


/* =========================================================
   9. LOGIN BUTTON (BASE – NO EFFECTS YET)
   ========================================================= */

.login-ui button[type="submit"] {
    background: #2a2a2a;
    border: 1px solid #444;
    color: #fff;
    letter-spacing: 2px;
}

.login-ui button[type="submit"]:hover {
    background: #333;
}


/* =========================================================
   10. LOGIN BUTTON LABEL (STABLE, ALL STATES)
   ========================================================= */

/* Hide native button text */
.login-ui .login-dialog input[type="submit"] {
    color: transparent !important;
    text-shadow: none !important;
}

/* Anchor container */
.login-ui .login-dialog .buttons {
    position: relative;
}

/* Overlay label */
.login-ui .login-dialog .buttons::after {
    content: "CONNECT";
    pointer-events: none;

    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 39px; /* matches computed height */

    display: flex;
    align-items: center;
    justify-content: center;

    font-family: 'Protoculture', sans-serif;
    font-size: 16px;
    letter-spacing: 3px;
    color: #ffffff;

    transform: translateY(-1px); /* optical centering */
}


/* =========================================================
   11. FULL-WIDTH CONNECT BUTTON
   ========================================================= */

/* Make submit buttons full width */
.login-ui .login-dialog .buttons input[type="submit"] {
    width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box;

    height: 44px;                 /* slightly taller, more intentional */
    margin: 0;

    display: block;
}

/* Ensure buttons container matches width */
.login-ui .login-dialog .buttons {
    width: 100%;
    position: relative;
}


/* =========================================================
   12. HIDE SECONDARY SUBMIT BUTTON (CONTINUE)
   ========================================================= */

/* Always hide the secondary submit visually */
.login-ui .login-dialog input.continue-login {
    display: none !important;
}

/* =========================================================
   13. INPUT VALID / INVALID FEEDBACK
   ========================================================= */

/* Base input transition */
.login-ui .login-dialog input {
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

/* VALID input (filled & accepted) */
.login-ui .login-dialog input.ng-valid.ng-dirty {
    border-color: #2aff7a !important;
    box-shadow: 0 0 0 1px rgba(42, 255, 122, 0.35);
}

/* INVALID input (optional, subtle red) */
.login-ui .login-dialog input.ng-invalid.ng-dirty {
    border-color: #ff4d4d !important;
    box-shadow: 0 0 0 1px rgba(255, 77, 77, 0.35);
}


/* =========================================================
   14. CONNECT BUTTON PRESS ANIMATION
   ========================================================= */

/* Smooth animation baseline */
.login-ui .login-dialog .buttons input.login {
    transition:
        transform 0.08s ease,
        box-shadow 0.08s ease,
        background-color 0.08s ease;
}

/* Pressed state */
.login-ui .login-dialog .buttons input.login:active {
    transform: translateY(1px);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
    background-color: #333;
}


/* =========================================================
   15. APP UI – GLOBAL BACKGROUND (HOME VIEW)
   ========================================================= */

/* Main authenticated UI canvas */
.home-view,
.view,
.connection-list-ui {
    background-color: #0b0b0b !important;
    color: #e0e0e0;
}


/* =========================================================
   16. APP UI – HEADER BARS
   ========================================================= */

.header {
    background-color: #141414 !important;
    border-bottom: 1px solid #2a2a2a;
}


/* =========================================================
   17. APP UI – SECTION HEADER TEXT
   ========================================================= */

.header h1,
.header h2,
.section-header-recent-connections {
    color: #eaeaea !important;
    letter-spacing: 2px;
}


/* =========================================================
   18. APP UI – CONNECTION LIST CONTAINER
   ========================================================= */

/* Container under ALL CONNECTIONS */
.all-connections {
    background-color: #0f0f0f !important;
}


/* =========================================================
   19. APP UI – RECENT CONNECTION CAPTION TEXT (FORCED)
   ========================================================= */

/* Base state */
.connection-list-ui
.recent-connections
.connection
.caption
.name {
    color: #e0e0e0 !important;
}

/* Hover / active tile (green background) */
.connection-list-ui
.recent-connections
.connection:hover
.caption
.name,
.connection-list-ui
.recent-connections
.connection.selected
.caption
.name {
    color: #0b0b0b !important;
}


/* =========================================================
   20. APP UI – FILTER / SEARCH CONTROL (ABSOLUTE OVERRIDE)
   ========================================================= */

/* Filter container */
.connection-list-ui .group-list-filter {
    background: transparent;
}

/* Filter input – force all states */
.connection-list-ui
.group-list-filter
input.search-string {
    background-color: #000 !important;
    color: #eaeaea !important;

    border: 1px solid #555 !important;
    border-radius: 6px;

    padding: 6px 12px;

    font-family: 'Protoculture', sans-serif;
    letter-spacing: 1px;

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

    appearance: none !important;
    -webkit-appearance: none !important;

    background-clip: padding-box !important;

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

/* Placeholder */
.connection-list-ui
.group-list-filter
input.search-string::placeholder {
    color: #aaa !important;
}

/* Angular state overrides (this is CRITICAL) */
.connection-list-ui
.group-list-filter
input.search-string.ng-pristine,
.connection-list-ui
.group-list-filter
input.search-string.ng-valid,
.connection-list-ui
.group-list-filter
input.search-string.ng-dirty,
.connection-list-ui
.group-list-filter
input.search-string.ng-touched {
    color: #eaeaea !important;
    background-color: #000 !important;
    box-shadow: none !important;
}

/* Focus state */
.connection-list-ui
.group-list-filter
input.search-string:focus,
.connection-list-ui
.group-list-filter
input.search-string:focus-visible {
    outline: none !important;
    border-color: #2aff7a !important;
    box-shadow: 0 0 0 1px rgba(42, 255, 122, 0.45) !important;
}


/* =========================================================
   21. ALL CONNECTIONS – ICON + TEXT VISIBILITY
   ========================================================= */

/* Base connection row */
.login-ui .home-view .connection-list-ui .connection {
    background: transparent;
}

/* Connection name (text) */
.login-ui .home-view .connection-list-ui .connection .name {
    color: #eaeaea !important;
    font-weight: 600;
}

/* Connection protocol icon (SVG background image) */
.login-ui .home-view .connection-list-ui .connection .icon {
    filter: invert(1) brightness(1.1) !important;
    opacity: 0.95;
}

/* Hover state (keep Guacamole behavior but cleaner) */
.login-ui .home-view .connection-list-ui .connection:hover {
    background: #cfe3b5;
}

.login-ui .home-view .connection-list-ui .connection:hover .name {
    color: #000 !important;
}

.login-ui .home-view .connection-list-ui .connection:hover .icon {
    filter: invert(0) brightness(1) !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}