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

}
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');

/*
 * Poseidon Sentinel — Guacamole branding
 *
 * Brand palette
 *   primary    #0F1B29   Poseidon deep navy
 *   secondary  #FFFFFF   white
 *   tertiary   #AFFF71   accent green
 *
 * Derived, for depth only
 *   deep       #070F18   near-black, gradient base
 *   lift       #1F3A57   lighter navy, hover
 *   ink        #1E2A47   body text on white
 *   hairline   #D5DCEE   input borders
 */

/* ---------------- typography ---------------- */

body,
input, button, select, textarea,
.login-ui, .login-ui *,
.header, .header *,
.menu-dropdown, .menu-dropdown *,
.settings, .settings *,
.connection, .connection-group,
h1, h2, h3, h4 {
    font-family: 'Figtree', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---------------- login page ---------------- */

.login-ui {
    background: radial-gradient(ellipse at 50% -10%, #1F3A57 0%, #0F1B29 45%, #070F18 100%) !important;
}

.login-ui .login-dialog {
    background-color: #FFFFFF !important;
    border: none !important;
    border-top: 3px solid #AFFF71 !important;
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(15, 27, 60, 0.45);
    box-sizing: border-box;
    overflow: hidden;
    padding: 2em 2.4em 1.9em;
    width: 27em;
    max-width: calc(100vw - 2em);
}

/* Guacamole's login text is white by default, for its own dark page.
   On a white card that is invisible, so restate it once for everything
   inside the dialog and re-specify the exceptions below. */
.login-ui .login-dialog,
.login-ui .login-dialog * {
    color: #1E2A47;
}

.login-ui .login-dialog .logo {
    display: block;
    width: 11em;
    max-width: 100%;
    height: 6.6em;
    background-repeat: no-repeat;
    background-position: center;
    background-size:         contain;
    -moz-background-size:    contain;
    -webkit-background-size: contain;
    background-image: url('app/ext/poseidon-sentinel/resources/images/poseidon-logo.png');
    margin: 0 auto 0.9em;
}

/* the app-name / version line under the logo */
.login-ui .login-dialog .version,
.login-ui .login-dialog .version * {
    color: #0F1B29 !important;
    font-size: 0.78em;
    font-weight: 600;
    letter-spacing: 1.6px;
    opacity: 0.85;
}

.login-ui .login-dialog .labels .field-header,
.login-ui .login-dialog .field-header,
.login-ui .login-dialog label {
    color: #33405C !important;
    font-weight: 600;
}

.login-ui .login-dialog input[type="text"],
.login-ui .login-dialog input[type="password"],
.login-ui .login-dialog input[type="email"] {
    background-color: #FFFFFF !important;
    border: 1px solid #D5DCEE !important;
    border-radius: 4px;
    box-sizing: border-box;
    color: #1E2A47 !important;
    font-size: 1em;
    min-width: 0;
    padding: 0.7em 0.8em;
    width: 100%;
}

.login-ui .login-dialog input[type="text"]:focus,
.login-ui .login-dialog input[type="password"]:focus,
.login-ui .login-dialog input[type="email"]:focus {
    border-color: #0F1B29 !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(175, 255, 113, 0.55);
}

.login-ui .login-dialog .buttons input[type="submit"],
.login-ui .login-dialog input[type="submit"] {
    background: #0F1B29 !important;
    border: none !important;
    border-radius: 4px;
    color: #FFFFFF !important;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 0.68em 1.5em;
    text-shadow: none;
    transition: background 120ms ease;
}

.login-ui .login-dialog .buttons input[type="submit"]:hover,
.login-ui .login-dialog input[type="submit"]:hover {
    background: #1F3A57 !important;
}

.login-ui .login-dialog .buttons input[type="submit"]:active,
.login-ui .login-dialog input[type="submit"]:active {
    background: #070F18 !important;
}

.login-ui .login-dialog .error,
.login-ui .login-dialog .error * {
    color: #B3261E !important;
}

/* the form should use the full width of the wider card */
.login-ui .login-dialog form,
.login-ui .login-dialog .fields,
.login-ui .login-dialog .labels,
.login-ui .login-dialog .form-field,
.login-ui .login-dialog .field-subtype {
    box-sizing: border-box;
    width: 100%;
}

.login-ui .login-dialog .buttons {
    width: 100%;
}

.login-ui .login-dialog .buttons input[type="submit"] {
    width: 100%;
}

/* ---------------- application chrome ---------------- */

.header,
#guac-menu .header,
.menu-dropdown .menu-title {
    background: #0F1B29 !important;
    color: #FFFFFF !important;
    border-bottom: 3px solid #AFFF71 !important;
}

.header h2,
.header a,
.menu-title h2 {
    color: #FFFFFF !important;
}

button.primary,
input[type="submit"].primary,
a.button.primary {
    background: #0F1B29 !important;
    border: none !important;
    border-radius: 4px;
    color: #FFFFFF !important;
    font-weight: 600;
}

button.primary:hover,
input[type="submit"].primary:hover,
a.button.primary:hover {
    background: #1F3A57 !important;
}

button.danger,
input[type="submit"].danger {
    background: #B3261E !important;
    border: none !important;
    color: #FFFFFF !important;
}

.connection.active .name,
.connection-group.active .name {
    color: #0F1B29;
}

/* ---------------- user menu dropdown ---------------- */

.menu-dropdown .menu-contents,
.menu-dropdown .menu-body,
.menu-dropdown ul,
.menu-dropdown li {
    background: #FFFFFF !important;
}

.menu-dropdown .menu-contents {
    border: 1px solid #D5DCEE !important;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 10px 28px rgba(15, 27, 60, 0.22);
}

.menu-dropdown .menu-contents *,
.menu-dropdown .menu-contents a,
.menu-dropdown .menu-contents li {
    color: #1E2A47 !important;
}

.menu-dropdown .menu-contents li:hover,
.menu-dropdown .menu-contents a:hover {
    background: rgba(15, 27, 41, 0.08) !important;
}

.menu-dropdown .menu-contents .current,
.menu-dropdown .menu-contents li.current * {
    color: #7C879E !important;
}