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

}
.quickconnect-container{margin:.25em 0;width:100%;margin-left:.50em}.quickconnect-container .quickconnect-field{background-image:url('images/protocol-icons/guac-text.png');background-repeat:no-repeat;background-size:1.50em;background-position:.25em center;background-color:transparent;padding:.25em;padding-left:2.50em;width:100%;max-width:none;border:0;box-sizing:border-box}.quickconnect-button{clear:both;float:right;margin-right:.75em;font-size:.75em;padding:.25em}.quickconnect-list-item{vertical-align:middle;align-content:center;display:flex}/*
 * Isopod / Inkfish theme for Apache Guacamole.
 * Deep-sea navy + brand blue, built from the Inkfish mark.
 */

:root {
    --isopod-abyss:       #050b14;
    --isopod-ink:         #0a1f3d;
    --isopod-ink-2:       #0f2a4d;
    --isopod-blue:        #2f8fd0;
    --isopod-blue-bright: #4fa8e3;
    --isopod-cyan:        #2dd4bf;
    --isopod-foam:        #eaf4fb;
    --isopod-mist:        #90a9c4;
    --isopod-danger:      #e2503c;
    --isopod-danger-dark: #b53d2d;

    /* Dimmed light surfaces: default Guacamole is stark #fff throughout,
       which is uncomfortably bright. These keep contrast for the (light-
       colored) built-in icon set while toning the glare down. */
    --isopod-paper:       #dde5ec;
    --isopod-card:        #eef2f6;
    --isopod-field:       #f7f9fb;
}

/* ------------------------------------------------------------------ */
/* Global                                                              */
/* ------------------------------------------------------------------ */

body {
    background: var(--isopod-paper);
}

div.location, input[type=text], input[type=email], input[type=number], input[type=password], textarea {
    background: var(--isopod-field);
}

.notification {
    background: var(--isopod-card);
}

:focus-visible {
    outline: 2px solid var(--isopod-cyan);
    outline-offset: 1px;
}

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: #e3eaf1;
}

::-webkit-scrollbar-thumb {
    background: var(--isopod-blue);
    border: 3px solid #e3eaf1;
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--isopod-blue-bright);
}

* {
    scrollbar-color: var(--isopod-blue) #e3eaf1;
}

/* ------------------------------------------------------------------ */
/* Header bar                                                          */
/* ------------------------------------------------------------------ */

.header {
    background: linear-gradient(to bottom, var(--isopod-ink) 0%, var(--isopod-ink-2) 100%);
    border-bottom: 1px solid var(--isopod-cyan);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
    color: var(--isopod-foam);
}

.header h2 {
    color: var(--isopod-foam);
    letter-spacing: 0.04em;
}

.header:not(.ng-hide) ~ * .header,
.header:not(.ng-hide) ~ .header {
    border-top: 1px solid rgba(45, 212, 191, 0.35);
}

.menu-dropdown {
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    background: transparent;
    color: var(--isopod-foam);
}

.menu-dropdown:hover {
    background: rgba(255, 255, 255, 0.06);
}

.menu-dropdown.open,
.menu-dropdown.open:hover {
    background: rgba(0, 0, 0, 0.25);
}

.menu-dropdown .menu-indicator {
    filter: invert(93%) sepia(6%) saturate(300%) hue-rotate(175deg) brightness(1.05);
}

.user-menu .menu-dropdown .menu-title {
    /* Do NOT filter this element - it contains the visible username text,
       not just the icon, and inverting it made the text unreadable
       against the dark header. Swap in a pre-lightened icon instead. */
    color: var(--isopod-foam);
    background-image: url('app/ext/isopod-theme/images/icon-user-light.svg');
}

.menu-dropdown .menu-contents li a:hover {
    background-color: rgba(47, 143, 208, 0.15);
}

.menu-dropdown .menu-contents li a.current,
.menu-dropdown .menu-contents li a.current:hover {
    background-color: transparent;
}

/* ------------------------------------------------------------------ */
/* Buttons                                                              */
/* ------------------------------------------------------------------ */

input[type="submit"], button, a.button {
    background-color: var(--isopod-ink);
    background-image: linear-gradient(to bottom, var(--isopod-ink-2), var(--isopod-ink));
    border: 1px solid rgba(0, 0, 0, 0.4);
}

input[type="submit"]:hover, button:hover, a.button:hover {
    background-color: var(--isopod-blue);
    background-image: linear-gradient(to bottom, var(--isopod-blue-bright), var(--isopod-blue));
}

input[type="submit"]:active, button:active, a.button:active {
    background-color: var(--isopod-ink);
    background-image: none;
}

input[type="submit"]:disabled, button:disabled, button.danger:disabled {
    background-color: #3C3C3C;
    background-image: none;
}

button.danger, a.button.danger {
    background: var(--isopod-danger);
    background-image: none;
}

button.danger:hover, a.button.danger:hover {
    background: var(--isopod-danger-dark);
    background-image: none;
}

button.danger:active, a.button.danger:active {
    background: var(--isopod-danger-dark);
    background-image: none;
}

.menu-dropdown .menu-contents li a.danger {
    background-color: var(--isopod-danger);
}

.menu-dropdown .menu-contents li a.danger:hover {
    background-color: var(--isopod-danger-dark);
}

/* ------------------------------------------------------------------ */
/* Tabs                                                                 */
/* ------------------------------------------------------------------ */

.page-tabs .page-list li a[href]:hover,
.section-tabs li a:hover {
    background-color: rgba(47, 143, 208, 0.12);
}

.page-tabs .page-list li a[href].current,
.page-tabs .page-list li a[href].current:hover,
.section-tabs li a.current,
.section-tabs li a.current:hover {
    background: var(--isopod-ink);
    color: var(--isopod-foam);
}

/* ------------------------------------------------------------------ */
/* Lists / connection picker                                           */
/* ------------------------------------------------------------------ */

.list-item.selected {
    background: rgba(47, 143, 208, 0.18);
    box-shadow: inset 3px 0 0 var(--isopod-blue);
}

.list-item:not(.selected) .caption:hover {
    background: rgba(47, 143, 208, 0.08);
}

.recent-connections .connection:hover {
    background: rgba(47, 143, 208, 0.12);
}

.pager .set-page.current {
    background: rgba(47, 143, 208, 0.15);
    border: 1px solid rgba(47, 143, 208, 0.3);
    color: var(--isopod-ink);
}

.notification .progress .bar {
    background: linear-gradient(to bottom, var(--isopod-cyan), var(--isopod-blue));
}

/* ------------------------------------------------------------------ */
/* Login screen                                                        */
/* ------------------------------------------------------------------ */

div.login-ui {
    /* Dark water photo underneath, with a translucent brand-navy vignette
       on top so it reads as "Isopod" rather than a random stock photo,
       and so the edges stay calm/dark instead of busy. The login-dialog
       card has its own backdrop-blur + dark glass panel on top of this,
       so legibility of the form itself doesn't depend on how dark this
       background is. */
    background-image:
        radial-gradient(ellipse at 50% 0%, rgba(15, 42, 77, 0.35) 0%, rgba(5, 11, 20, 0.78) 70%),
        url('app/ext/isopod-theme/images/login-bg.jpg');
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    background-color: var(--isopod-abyss);
}

.login-ui .login-dialog {
    background: rgba(10, 31, 61, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(45, 212, 191, 0.25);
    border-radius: 0.75em;
    box-shadow: 0 0 40px rgba(45, 212, 191, 0.12), 0 10px 30px rgba(0, 0, 0, 0.45);
    color: var(--isopod-foam);
}

.login-ui .login-dialog .logo {
    width: 4.5em;
    height: 4.5em;
    background-size:         4.5em 4.5em;
    -moz-background-size:    4.5em 4.5em;
    -webkit-background-size: 4.5em 4.5em;
    -khtml-background-size:  4.5em 4.5em;
    background-image: url('app/ext/isopod-theme/images/login-logo.png');
    filter: drop-shadow(0 0 10px rgba(45, 212, 191, 0.35));
}

.login-ui .login-dialog .version {
    position: relative;
    /* The version-number badge below is absolutely positioned to the
       bottom-right of this element by core Guacamole CSS. Our tagline
       (added via ::after) is normal-flow content, so without this
       padding the badge sits right on top of its last line of text. */
    padding-bottom: 1.8em;
}

.login-ui .login-dialog .version .app-name {
    color: var(--isopod-foam);
    letter-spacing: 0.12em;
    font-size: 1.4em;
}

.login-ui .login-dialog .version .version-number {
    background: rgba(45, 212, 191, 0.15);
    border: 1px solid rgba(45, 212, 191, 0.4);
    color: var(--isopod-cyan);
    opacity: 1;
}

.login-ui .login-dialog .version::after {
    content: "GPU Compute · Remote Access";
    display: block;
    text-align: center;
    margin-top: 0.35em;
    font-size: 0.5em;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--isopod-mist);
}

.login-ui p.login-error {
    background: rgba(226, 80, 60, 0.15);
    border: 1px solid var(--isopod-danger);
    color: #ffd6cf;
}

.login-ui .login-dialog th {
    text-shadow: none;
    color: var(--isopod-mist);
}

.login-ui .login-fields .labeled-field .field-header {
    color: var(--isopod-mist);
    opacity: 0.8;
}

.login-ui .login-fields .labeled-field input,
.login-ui .login-fields input[type=text],
.login-ui .login-fields input[type=password] {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(144, 169, 196, 0.4);
    color: var(--isopod-foam);
}

.login-ui .login-fields .labeled-field.empty input {
    background: rgba(255, 255, 255, 0.03);
}

.login-ui .login-fields .labeled-field input:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--isopod-cyan);
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.2);
}

.login-ui .login-dialog input[type="submit"].login {
    width: 100%;
    background-color: var(--isopod-blue);
    background-image: linear-gradient(to bottom, var(--isopod-blue-bright), var(--isopod-blue));
    border: 1px solid rgba(0, 0, 0, 0.3);
}

.login-ui .login-dialog input[type="submit"].login:hover {
    background-image: linear-gradient(to bottom, var(--isopod-cyan), var(--isopod-blue-bright));
}

/* ------------------------------------------------------------------ */
/* Quick Connect                                                       */
/* ------------------------------------------------------------------ */
/* The extension ships this with border:0, background:transparent, and
   a float:right button inside a flex row - by design it's meant to look
   like a plain list row, but on our theme it just disappears and the
   button ends up stranded at the far edge. Give it an actual visible
   control and put the button next to the field where it belongs. */

.quickconnect-list-item {
    align-items: center;
    gap: 0.75em;
    background: var(--isopod-card);
    border: 1px solid rgba(47, 143, 208, 0.35);
    border-radius: 0.5em;
    padding: 0.6em 0.75em;
    margin: 0.75em 0 1em 0;
}

.quickconnect-list-item::before {
    content: "Quick Connect";
    flex: 0 0 auto;
    font-weight: bold;
    font-size: 0.85em;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--isopod-blue);
    white-space: nowrap;
}

.quickconnect-list-item .quickconnect-container {
    width: auto;
    flex: 1 1 auto;
    margin: 0;
}

.quickconnect-list-item .quickconnect-field {
    background-color: var(--isopod-field);
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0.3em;
}

.quickconnect-list-item .quickconnect-field:focus {
    border-color: var(--isopod-blue);
    box-shadow: 0 0 0 2px rgba(47, 143, 208, 0.2);
}

.quickconnect-list-item .action-buttons {
    flex: 0 0 auto;
    margin: 0;
}

.quickconnect-list-item .quickconnect-button {
    float: none;
    margin-right: 0;
}