/* ====================================================================== *
 *  Edamame Guacamole login branding — dark theme.
 *  User-supplied styling merged with the structural rules (dark dialog,
 *  full-width pinned bars, "Edamame Login" title, hidden version badge).
 *  Logo is an external SVG (white wordmark); injected bars/tagline/footer
 *  come from the HTML patches in guac-manifest.json.
 * ====================================================================== */

/* --- page + dialog: dark --- */
html, body            { background: #000; }
.login-ui             { background: #000 !important; }   /* beat stock .login-ui.initial (white) */
.login-ui .login-dialog {
    background: #000;
    border: 1px solid #707070;
    border-radius: 24px;
    color: #fff;
}
.notification         { color: #fff; }
body                  { font-family: Helvetica, Arial, sans-serif; }

/* --- logo (external SVG wordmark) --- */
.login-ui .login-dialog .logo {
    background-image: url("https://getstarted.edamame.com/images/logo.svg") !important;
    width: 10em;
    height: 3.5em;
    margin: 0.5em auto;
    background-size: contain;
    background-repeat: no-repeat;
}

/* --- title: APP.NAME ("Edamame") + " Login"; hide the version badge --- */
.login-ui .login-dialog .version .app-name {
    text-transform: none;
    font-size: 1.4em;
    color: #fff;
}
.login-ui .login-dialog .version .app-name::after { content: " Login"; }
.login-ui .login-dialog .version .version-number  { display: none; }

/* --- tagline + footer (green accents) --- */
.login-ui .login-dialog .edamame-tagline {
    text-align: center;
    margin: 0 0 0.75em;
    font-size: 0.7em;
    font-style: italic;
    color: #1FDBA6 !important;
}
.login-ui .login-dialog .edamame-footer {
    text-align: center;
    margin-top: 1.25em;
    font-size: 0.55em;
    color: #aaa;
}
.login-ui .login-dialog .edamame-footer a {
    color: #1FDBA6 !important;
    text-decoration: none;
}

/* --- input fields --- */
.login-ui .login-fields .labeled-field .field-header {
    position: static;
    color: #999;
}
.login-ui .login-fields .labeled-field input,
.login-ui .login-fields .labeled-field input:focus {
    font-weight: normal;
    font-size: 18px;
    letter-spacing: 0;
    color: #fff;
    border: 0;
    padding-left: 0;
    border-bottom: 1px solid #7B7B7B;
    width: 100%;
    margin-bottom: 20px;
    background: transparent;
}
.login-ui .login-fields .labeled-field input:focus {
    outline: none;
    border: none;
    border-bottom: 1px solid #7B7B7B;
}

/* --- login button (green pill) --- */
a.button, button, input[type="submit"] {
    height: fit-content;
    min-height: 65px;
    display: block;
    background: #1FDBA6;
    border-radius: 38px;
    text-align: center;
    letter-spacing: 0;
    color: #000;
    padding: 17px 0;
    margin: 50px auto 15px;
    font-size: 22px;
    font-weight: 600;
    cursor: pointer;
}
input[type="submit"]:hover { background: #1FDBA6; }

/* --- full-width black bars pinned to the viewport (outside the box) --- */
.login-ui .edamame-topbar {
    position: fixed; top: 0; left: 0; right: 0;
    background: #000;
    color: #fff;
    text-align: center;
    padding: 0.9em 1em;
    font-size: 1.3em;
    font-weight: bold;
    letter-spacing: 0.06em;
    z-index: 100;
}
.login-ui .edamame-pagefooter {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: #000;
    color: #777;
    text-align: center;
    padding: 0.7em 1em;
    font-size: 0.80em;
    border: none;
    z-index: 100;
}