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

}
/* =========================================================
   RickDeaton.com Guacamole login page
   ========================================================= */

.login-ui {
    background:
        radial-gradient(circle at top, rgba(20, 40, 55, 0.34), rgba(5, 8, 12, 0.97) 48%),
        #05080c !important;
}

/* Main login panel */
.login-ui .login-dialog {
    box-sizing: border-box !important;
    width: 360px !important;
    height: 350px !important;
    max-width: calc(100% - 28px) !important;

    padding: 14px 28px 16px !important;
    margin: auto !important;

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

    background: rgba(6, 9, 13, 0.97) !important;
    border: 2px solid #19c9ff;
    border-radius: 18px !important;

    box-shadow:
        0 18px 48px rgba(0, 0, 0, 0.68),
        0 0 10px rgba(25, 201, 255, 0.12);

    animation: panel-power 3.5s ease-out 1 forwards !important;
}

/* Logo animation stage */
.login-ui .login-dialog .logo {
    position: relative !important;
    display: block !important;

    width: 100% !important;
    max-width: 300px !important;
    height: 95px !important;

    margin: 0 auto 8px !important;

    background: none !important;
    overflow: visible !important;
}

/* Stationary RickDeaton.com wordmark */
.login-ui .login-dialog .logo::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;

    background:
        transparent
        url("/guacamole/app/ext/rick-branding-v2/images/wordmark-contour.png")
        center center / contain no-repeat !important;

    opacity: 0.78;
    filter: brightness(0.78);

    animation: wordmark-power 3.5s ease-out 1 forwards !important;
    pointer-events: none !important;
}

/* Moving power cable */
.login-ui .login-dialog .logo::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;

    background:
        transparent
        url("/guacamole/app/ext/rick-branding-v2/images/cable-contour.png")
        center center / contain no-repeat !important;

    transform: translateX(-70px);
    opacity: 0.78;

    animation: cable-connect 3.5s ease-out 1 forwards !important;
    pointer-events: none !important;
}

/* Cable slides into the wordmark */
@keyframes cable-connect {
    0% {
        transform: translateX(-28px);
        opacity: 0.78;
        filter:
            brightness(0.78)
            drop-shadow(0 0 0 rgba(25, 201, 255, 0));
    }

    28% {
        transform: translateX(-14px);
        opacity: 0.9;
        filter:
            brightness(0.95)
            drop-shadow(0 0 3px rgba(25, 201, 255, 0.3));
    }

    42% {
        transform: translateX(-4px);
        opacity: 1;
        filter:
            brightness(1.15)
            drop-shadow(0 0 5px rgba(25, 201, 255, 0.55));
    }

    48% {
        transform: translateX(0);
        opacity: 1;
        filter:
            brightness(2)
            contrast(1.25)
            drop-shadow(0 0 5px rgba(225, 252, 255, 1))
            drop-shadow(0 0 14px rgba(25, 201, 255, 1))
            drop-shadow(0 0 26px rgba(25, 201, 255, 0.6));
    }

    54% {
        transform: translateX(0);
        opacity: 1;
        filter:
            brightness(1.45)
            drop-shadow(0 0 7px rgba(190, 245, 255, 0.9))
            drop-shadow(0 0 18px rgba(25, 201, 255, 0.75));
    }

    100% {
        transform: translateX(0);
        opacity: 1;
        filter:
            brightness(1.22)
            drop-shadow(0 0 6px rgba(25, 201, 255, 0.58))
            drop-shadow(0 0 13px rgba(25, 201, 255, 0.34));
    }
}

/* Wordmark stays still but powers on */
@keyframes wordmark-power {
    0%,
    42% {
        opacity: 0.78;
        filter:
            brightness(0.76)
            drop-shadow(0 0 0 rgba(25, 201, 255, 0));
    }

    48% {
        opacity: 1;
        filter:
            brightness(1.9)
            contrast(1.18)
            drop-shadow(0 0 5px rgba(235, 253, 255, 1))
            drop-shadow(0 0 15px rgba(25, 201, 255, 0.9))
            drop-shadow(0 0 27px rgba(25, 201, 255, 0.45));
    }

    54% {
        opacity: 1;
        filter:
            brightness(1.5)
            drop-shadow(0 0 7px rgba(190, 245, 255, 0.88))
            drop-shadow(0 0 17px rgba(25, 201, 255, 0.68));
    }

    100% {
        opacity: 1;
        filter:
            brightness(1.2)
            drop-shadow(0 0 5px rgba(25, 201, 255, 0.5))
            drop-shadow(0 0 12px rgba(25, 201, 255, 0.28));
    }
}

/* Border powers on when cable connects */
@keyframes panel-power {
    0%,
    42% {
        border-color: rgba(25, 201, 255, 0.68);
        box-shadow:
            0 18px 48px rgba(0, 0, 0, 0.68),
            0 0 8px rgba(25, 201, 255, 0.08);
    }

    48% {
        border-color: #e2fbff;
        box-shadow:
            0 18px 48px rgba(0, 0, 0, 0.68),
            0 0 8px rgba(235, 253, 255, 1),
            0 0 22px rgba(25, 201, 255, 0.9),
            0 0 38px rgba(25, 201, 255, 0.45);
    }

    54% {
        border-color: #bff5ff;
        box-shadow:
            0 18px 48px rgba(0, 0, 0, 0.68),
            0 0 10px rgba(190, 245, 255, 0.85),
            0 0 26px rgba(25, 201, 255, 0.65);
    }

    100% {
        border-color: #19c9ff;
        box-shadow:
            0 18px 48px rgba(0, 0, 0, 0.68),
            0 0 16px rgba(25, 201, 255, 0.34),
            0 0 28px rgba(25, 201, 255, 0.14);
    }
}

/* Hide original Guacamole heading/version */
.login-ui .login-dialog .title,
.login-ui .login-dialog h1,
.login-ui .login-dialog .version {
    display: none !important;
}

.login-ui .login-dialog form {
    width: 100% !important;
    margin: 0 auto !important;
}

.login-ui .login-dialog label {
    display: none !important;
}

/* Username/password */
.login-ui input[type="text"],
.login-ui input[type="password"] {
    box-sizing: border-box !important;
    display: block !important;

    width: 245px !important;
    height: 40px !important;
    min-height: 0 !important;

    margin: 0 auto 10px !important;
    padding: 8px 12px !important;

    color: #111111 !important;
    background: #edf4ff !important;
    border: 1px solid rgba(25, 201, 255, 0.82) !important;
    border-radius: 9px !important;

    font-size: 14px !important;
    box-shadow: none !important;
}

.login-ui input[type="text"]:focus,
.login-ui input[type="password"]:focus {
    border-color: #19c9ff !important;
    box-shadow: 0 0 0 3px rgba(25, 201, 255, 0.16) !important;
    outline: none !important;
}

/* Login button */
.login-ui input[type="submit"] {
    box-sizing: border-box !important;
    display: block !important;

    width: 245px !important;
    height: 42px !important;
    min-height: 0 !important;

    margin: 4px auto 0 !important;
    padding: 7px 12px !important;

    background: linear-gradient(180deg, #21ceff, #0ba8de) !important;
    color: #ffffff !important;

    border: 1px solid #19c9ff !important;
    border-radius: 9px !important;

    font-size: 16px !important;
    font-weight: 700 !important;

    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35) !important;
    box-shadow: 0 7px 18px rgba(25, 201, 255, 0.18) !important;
}

.login-ui input[type="submit"]:hover {
    filter: brightness(1.08) !important;
}

/* Hide unwanted secondary controls */
.login-ui input[value="Continue"],
.login-ui button[value="Continue"],
.login-ui .continue,
.login-ui .continue-button {
    display: none !important;
}

/* Phone layout */
@media only screen and (max-width: 430px) {
    .login-ui .login-dialog {
        width: 320px !important;
        height: 320px !important;
        padding: 12px 16px 14px !important;
    }

    .login-ui .login-dialog .logo {
        max-width: 275px !important;
        height: 82px !important;
    }

    .login-ui input[type="text"],
    .login-ui input[type="password"],
    .login-ui input[type="submit"] {
        width: 220px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-ui .login-dialog,
    .login-ui .login-dialog .logo::before,
    .login-ui .login-dialog .logo::after {
        animation: none !important;
    }
}

/* =========================================================
   FINAL cable animation override
   Connect once, then remain powered
   ========================================================= */

/* Keep animated cable contained inside the logo area */
.login-ui .login-dialog .logo {
    overflow: hidden !important;
    animation: none !important;
}

/* Stationary wordmark: powers on once and remains glowing */
.login-ui .login-dialog .logo::before {
    animation-name: final-wordmark-power !important;
    animation-duration: 3.2s !important;
    animation-timing-function: ease-out !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    animation-direction: normal !important;
    animation-fill-mode: forwards !important;
}

/* Cable: begins fully inside, moves a short distance, stays connected */
.login-ui .login-dialog .logo::after {
    transform: translateX(-8px);
    animation-name: final-cable-connect !important;
    animation-duration: 3.2s !important;
    animation-timing-function: ease-out !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    animation-direction: normal !important;
    animation-fill-mode: forwards !important;
}

/* Border: powers on once and remains glowing */
.login-ui .login-dialog {
    animation-name: final-border-power !important;
    animation-duration: 3.2s !important;
    animation-timing-function: ease-out !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    animation-direction: normal !important;
    animation-fill-mode: forwards !important;
}

@keyframes final-cable-connect {
    0% {
        transform: translateX(-8px);
        opacity: 0.82;
        filter:
            brightness(0.78)
            drop-shadow(0 0 0 rgba(25, 201, 255, 0));
    }

    45% {
        transform: translateX(-4px);
        opacity: 0.92;
        filter:
            brightness(0.95)
            drop-shadow(0 0 3px rgba(25, 201, 255, 0.35));
    }

    62% {
        transform: translateX(0);
        opacity: 1;
        filter:
            brightness(2)
            contrast(1.2)
            drop-shadow(0 0 5px rgba(225, 252, 255, 1))
            drop-shadow(0 0 15px rgba(25, 201, 255, 1))
            drop-shadow(0 0 26px rgba(25, 201, 255, 0.55));
    }

    72% {
        transform: translateX(0);
        opacity: 1;
        filter:
            brightness(1.45)
            drop-shadow(0 0 7px rgba(190, 245, 255, 0.9))
            drop-shadow(0 0 18px rgba(25, 201, 255, 0.7));
    }

    100% {
        transform: translateX(0);
        opacity: 1;
        filter:
            brightness(1.28)
            drop-shadow(0 0 6px rgba(150, 235, 255, 0.75))
            drop-shadow(0 0 15px rgba(25, 201, 255, 0.48));
    }
}

@keyframes final-wordmark-power {
    0%,
    55% {
        opacity: 0.78;
        filter:
            brightness(0.75)
            drop-shadow(0 0 0 rgba(25, 201, 255, 0));
    }

    62% {
        opacity: 1;
        filter:
            brightness(1.95)
            contrast(1.18)
            drop-shadow(0 0 5px rgba(235, 253, 255, 1))
            drop-shadow(0 0 16px rgba(25, 201, 255, 0.95))
            drop-shadow(0 0 28px rgba(25, 201, 255, 0.48));
    }

    72% {
        opacity: 1;
        filter:
            brightness(1.5)
            drop-shadow(0 0 7px rgba(190, 245, 255, 0.9))
            drop-shadow(0 0 18px rgba(25, 201, 255, 0.68));
    }

    100% {
        opacity: 1;
        filter:
            brightness(1.28)
            drop-shadow(0 0 6px rgba(160, 238, 255, 0.75))
            drop-shadow(0 0 15px rgba(25, 201, 255, 0.45));
    }
}

@keyframes final-border-power {
    0%,
    55% {
        border-color: rgba(25, 201, 255, 0.68);
        box-shadow:
            0 18px 48px rgba(0, 0, 0, 0.68),
            0 0 8px rgba(25, 201, 255, 0.08);
    }

    62% {
        border-color: #e2fbff;
        box-shadow:
            0 18px 48px rgba(0, 0, 0, 0.68),
            0 0 8px rgba(235, 253, 255, 1),
            0 0 24px rgba(25, 201, 255, 0.92),
            0 0 42px rgba(25, 201, 255, 0.48);
    }

    72% {
        border-color: #bff5ff;
        box-shadow:
            0 18px 48px rgba(0, 0, 0, 0.68),
            0 0 12px rgba(190, 245, 255, 0.8),
            0 0 28px rgba(25, 201, 255, 0.62);
    }

    100% {
        border-color: #19c9ff;
        box-shadow:
            0 18px 48px rgba(0, 0, 0, 0.68),
            0 0 16px rgba(25, 201, 255, 0.42),
            0 0 32px rgba(25, 201, 255, 0.18);
    }
}


/* =========================================================
   Keep the connected state at full brightness
   ========================================================= */

@keyframes final-cable-connect {
    0% {
        transform: translateX(-8px);
        opacity: 0.82;
        filter:
            brightness(0.78)
            drop-shadow(0 0 0 rgba(25, 201, 255, 0));
    }

    45% {
        transform: translateX(-4px);
        opacity: 0.92;
        filter:
            brightness(0.95)
            drop-shadow(0 0 3px rgba(25, 201, 255, 0.35));
    }

    62%,
    100% {
        transform: translateX(0);
        opacity: 1;
        filter:
            brightness(2)
            contrast(1.2)
            drop-shadow(0 0 5px rgba(225, 252, 255, 1))
            drop-shadow(0 0 15px rgba(25, 201, 255, 1))
            drop-shadow(0 0 26px rgba(25, 201, 255, 0.55));
    }
}

@keyframes final-wordmark-power {
    0%,
    55% {
        opacity: 0.78;
        filter:
            brightness(0.75)
            drop-shadow(0 0 0 rgba(25, 201, 255, 0));
    }

    62%,
    100% {
        opacity: 1;
        filter:
            brightness(1.95)
            contrast(1.18)
            drop-shadow(0 0 5px rgba(235, 253, 255, 1))
            drop-shadow(0 0 16px rgba(25, 201, 255, 0.95))
            drop-shadow(0 0 28px rgba(25, 201, 255, 0.48));
    }
}

@keyframes final-border-power {
    0%,
    55% {
        border-color: rgba(25, 201, 255, 0.68);
        box-shadow:
            0 18px 48px rgba(0, 0, 0, 0.68),
            0 0 8px rgba(25, 201, 255, 0.08);
    }

    62%,
    100% {
        border-color: #e2fbff;
        box-shadow:
            0 18px 48px rgba(0, 0, 0, 0.68),
            0 0 8px rgba(235, 253, 255, 1),
            0 0 24px rgba(25, 201, 255, 0.92),
            0 0 42px rgba(25, 201, 255, 0.48);
    }
}