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

}
/* =========================================================================
   MooresLab MooreCloud Branding — Guacamole 1.5 login restyle
   -------------------------------------------------------------------------
   Targets Guacamole's actual rendered login template (templates.js):

     div.login-ui
       > p.login-error
       > .login-dialog-middle
           > .login-dialog.notification
               > .login-form (<form>)
                   > .logo            (decorative, hidden)
                   > .version         (Apache Guacamole/version, hidden)
                   > p (helpText, hidden via .welcome)
                   > .login-fields
                       > <guac-form>
                           > .form-group > .form > .fields
                               > <guac-form-field>
                                   > .labeled-field
                                       > .field-header > label
                                       > .form-field
                                           > .username-field > input[type="text"]
                                           OR
                                           > .password-field > input[type="password"] + .toggle-password
                   > .buttons
                       > input[type="submit"].login
                       > input[type="submit"].continue-login

   Companion JS injects:
     - .mc-bg     (animated chip canvas, position: fixed, z-index: 0)
     - .mc-hero   (logo + headline + tagline + bullets) — first child of div.login-ui
     - "Enter the Portal" heading prepended to .login-dialog.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --mc-bg:           #0a0a0c;
    --mc-text:         #f4f4f5;
    --mc-text-muted:   #8a8a93;
    --mc-accent:       #FFCE26;
    --mc-accent-hover: #FFE45A;
    --mc-accent-dim:   rgba(255, 206, 38, 0.08);
}

/* =========================================================================
   Body + animated chip background (canvas injected by JS)
   -------------------------------------------------------------------------
   Scoped to the login page only via :has(.login-ui). Once the user
   authenticates and Angular removes .login-ui from the DOM, these rules
   stop applying and Guacamole's normal (light-theme) home/connection
   pages render with their intended colors.
   ========================================================================= */
html:has(.login-ui),
body:has(.login-ui) {
    background: var(--mc-bg) !important;
    color: var(--mc-text);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

#mc-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(ellipse 90% 70% at 50% 50%,
            #18181c 0%,
            #0e0e10 45%,
            #050506 100%);
}
#mc-bg canvas { display: block; width: 100%; height: 100%; }
#mc-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 75% 65% at 50% 50%,
            rgba(0,0,0,0) 55%,
            rgba(0,0,0,0.6) 100%);
}

/* =========================================================================
   Glass panel — div.login-ui becomes a 2-column grid (hero | dialog)
   ========================================================================= */
/* Overrides Guacamole's `div.login-ui` rule (which sets position: absolute;
   width: 100%; height: 100%; display: table; background: #fff; z-index: 20).
   We match its specificity (div.login-ui) and add !important to every
   property that conflicts. */
div.login-ui {
    position: fixed !important;
    z-index: 100 !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100% - 80px) !important;
    max-width: 1080px !important;
    height: auto !important;
    padding: 48px 56px !important;

    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
        "hero error"
        "hero dialog" !important;
    grid-template-rows: auto 1fr !important;
    gap: 0 !important;

    background: rgba(255, 255, 255, 0.01) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 24px !important;
    -webkit-backdrop-filter: blur(6px) !important;
            backdrop-filter: blur(6px) !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 0 2px rgba(255, 206, 38, 0.15),
        0 0 6px rgba(255, 206, 38, 0.09),
        0 0 14px rgba(255, 206, 38, 0.04) !important;
}

/* Hide Guacamole's default decorative bits we don't want */
div.login-ui .logo,
div.login-ui .version,
div.login-ui .login-form > p[translate*="HELP"],
div.login-ui .login-form > p[ng-show="helpText"],
div.login-ui input[type="submit"].continue-login,
div.login-ui .password-field .toggle-password {
    display: none !important;
}

/* =========================================================================
   Hero column (injected aside)
   ========================================================================= */
.mc-hero {
    grid-area: hero;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-right: 36px;
}

.mc-hero .brand-mark {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 64px;
}
.mc-hero .brand-mark .mc-logo {
    height: 36px;
    width: auto;
    display: block;
}
.mc-hero .brand-mark .mc-divider {
    color: #3a3a42;
    font-weight: 300;
    font-size: 24px;
    line-height: 1;
}
.mc-hero .brand-mark .mc-product {
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.12em;
    color: var(--mc-text);
}

.mc-hero h1 {
    font-size: clamp(22px, 2.5vw, 32px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 18px;
    white-space: nowrap;
    color: var(--mc-text);
    text-align: left !important;  /* Guacamole's base has h1 { text-align: center } */
    vertical-align: baseline !important;
}
.mc-hero h1 .mc-accent { color: var(--mc-accent); }

.mc-hero .mc-tagline {
    font-size: 17px;
    font-weight: 500;
    color: var(--mc-text);
    line-height: 1.55;
    max-width: 460px;
    margin: 0 0 40px;
}

.mc-hero .mc-meta {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 460px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.mc-hero .mc-meta li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    font-weight: 500;
    color: var(--mc-text);
}
.mc-hero .mc-meta strong { font-weight: 700; }
.mc-hero .mc-meta .mc-check {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--mc-accent-dim);
    color: var(--mc-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    margin-top: 1px;
}

/* =========================================================================
   Right column — login error + dialog
   ========================================================================= */
div.login-ui .login-error {
    grid-area: error;
    color: #ef4444;
    font-size: 13px;
    margin: 0 0 12px 48px;
    padding-left: 0;
    background: none !important;
    border: none !important;
}
div.login-ui .login-error:empty { display: none; }

div.login-ui .login-dialog-middle {
    grid-area: dialog;
    display: flex;
    justify-content: center;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative;
}

/* Vertical divider + golden orb at its tip — on the dialog-middle wrapper */
div.login-ui .login-dialog-middle::before {
    content: '';
    position: absolute;
    left: 0;
    top: 100px;
    bottom: -8%;
    width: 1px;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.22) 0%,
        rgba(255, 255, 255, 0.22) 85%,
        transparent 100%
    );
    box-shadow:
        0 0 6px  rgba(255, 206, 38, 0.22),
        0 0 18px rgba(255, 206, 38, 0.10),
        0 0 36px rgba(255, 206, 38, 0.05);
}
div.login-ui .login-dialog-middle::after {
    content: '';
    position: absolute;
    left: -2px;
    top: 98px;
    width: 5px;
    height: 5px;
    background: rgba(255, 220, 100, 1);
    box-shadow:
        0 0 6px  rgba(255, 206, 38, 0.90),
        0 0 14px rgba(255, 206, 38, 0.55),
        0 0 28px rgba(255, 206, 38, 0.25),
        0 0 50px rgba(255, 206, 38, 0.10);
}

/* The actual card — make it transparent (we use the panel as the surface) */
div.login-ui .login-dialog {
    width: 100%;
    max-width: 380px;
    padding: 100px 0 0 48px !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}
div.login-ui .login-dialog.notification {
    background: transparent !important;
    border: none !important;
    color: var(--mc-text) !important;
}

div.login-ui .login-form {
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

/* "Enter the Portal" heading injected by JS — explicit overrides to defeat
   the parent .login-dialog font-size: 1.25em and any other inherited noise */
div.login-ui .mc-form-heading {
    font-size: 24px !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em !important;
    text-transform: none !important;
    text-align: left !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    color: var(--mc-text) !important;
    line-height: 1.2 !important;
}
div.login-ui .mc-form-sub {
    font-size: 13px !important;
    font-weight: 400 !important;
    text-align: left !important;
    color: var(--mc-text-muted) !important;
    margin: 0 0 30px !important;
    padding: 0 !important;
    line-height: 1.5 !important;
}

/* Fields: .labeled-field is the per-field wrapper Angular renders.
   Guacamole's base CSS positions the field-header ABSOLUTELY behind the input
   (z-index: -1, opacity 0.5) to use the label as a floating placeholder.
   We undo that and restore proper above-the-input labels. */
div.login-ui .login-fields {
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: baseline !important;
}
div.login-ui .form-group,
div.login-ui .form {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}
div.login-ui .form > .fields {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    width: 100% !important;
}
div.login-ui .form-header,
div.login-ui .form .form-header { display: none !important; }

div.login-ui .login-fields .labeled-field {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    z-index: auto !important;
}
/* THE KEY FIX: undo Guacamole's absolute-placeholder positioning */
div.login-ui .login-fields .labeled-field .field-header {
    display: block !important;
    position: static !important;
    z-index: auto !important;
    opacity: 1 !important;
    overflow: visible !important;
    margin: 0 0 7px 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
    left: auto !important;
    right: auto !important;
}
div.login-ui .login-fields .labeled-field .field-header label {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: var(--mc-text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* And undo Guacamole's "empty" / focus background swap */
div.login-ui .login-fields .labeled-field.empty input,
div.login-ui .login-fields .labeled-field input:focus {
    background: rgba(255, 255, 255, 0.05) !important;
}
div.login-ui .login-fields .labeled-field input:focus {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Individual input types */
div.login-ui .username-field,
div.login-ui .password-field,
div.login-ui .email-field,
div.login-ui .text-field,
div.login-ui .form-field {
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
}

div.login-ui input[type="text"],
div.login-ui input[type="password"],
div.login-ui input[type="email"] {
    width: 100%;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 8px !important;
    padding: 11px 14px !important;
    font-family: inherit !important;
    font-size: 14px !important;
    color: var(--mc-text) !important;
    transition: border-color 0.15s, background 0.15s;
    box-sizing: border-box;
    height: auto !important;
}
div.login-ui input::placeholder { color: rgba(255, 255, 255, 0.35); }
div.login-ui input[type="text"]:hover,
div.login-ui input[type="password"]:hover { border-color: rgba(255, 255, 255, 0.18) !important; }
div.login-ui input[type="text"]:focus,
div.login-ui input[type="password"]:focus {
    outline: none !important;
    border-color: var(--mc-accent) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 0 0 3px rgba(255, 206, 38, 0.15) !important;
}

/* Submit button is <input type="submit"> in Guacamole. Style it like our button. */
div.login-ui .buttons {
    margin: 24px 0 0 0 !important;
    padding: 0 !important;
    text-align: left !important;
}
div.login-ui input[type="submit"].login {
    width: 100% !important;
    /* Use background-COLOR + background-IMAGE longhands so the !important
       on background-color doesn't wipe the arrow image (a `background:` shorthand
       resets all background-* properties). */
    background-color: var(--mc-accent) !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'/><polyline points='12 5 19 12 12 19'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 18px center !important;
    background-size: 16px 16px !important;
    color: #0a0a0c !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    padding-right: 44px !important;
    /* Override the base button's Carlito font + text-shadow */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-shadow: none !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: background-color 0.15s !important;
    -webkit-appearance: none !important;
            appearance: none !important;
}
div.login-ui input[type="submit"].login:hover {
    background-color: var(--mc-accent-hover) !important;
}
div.login-ui input[type="submit"].login:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* =========================================================================
   Narrow viewport — stack vertically
   ========================================================================= */
@media (max-width: 900px) {
    div.login-ui {
        position: relative;
        top: auto; left: auto;
        transform: none;
        margin: 16px auto;
        width: calc(100% - 32px);
        padding: 32px 24px;
        grid-template-columns: 1fr;
        grid-template-areas:
            "hero"
            "error"
            "dialog";
        border-radius: 18px;
    }
    .mc-hero { padding-right: 0; }
    .mc-hero h1 { font-size: 22px; white-space: normal; }
    div.login-ui .login-dialog-middle::before,
    div.login-ui .login-dialog-middle::after { display: none; }
    div.login-ui .login-dialog {
        padding: 32px 0 0 0 !important;
        margin-top: 32px !important;
        border-top: 1px solid rgba(255, 255, 255, 0.10);
    }
}