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

}
/* Light trapezoid connection bar in the style of the Windows 11 Remote Desktop bar */
.st-root, .st-menu-close {
    --st-surface: #f3f3f3;
    --st-surface-hover: #e0e4ea;
    --st-border: #c9cfd8;
    --st-text: #1f2937;
    --st-muted: #5b6676;
    --st-focus: #2563eb;
    --st-ok: #15803d;
    --st-warn: #b45309;
    --st-danger: #c42b1c;
    /* One icon colour; a switch is filled blue while on and grey while off */
    --st-c-icon: #1f2937;
    --st-c-on: #0078d4;
    --st-c-off: #9aa3af;
}

.st-root {
    position: fixed;
    top: 0;
    left: 50%;
    z-index: 2147483000;
    display: none;
    transform: translateX(-50%);
}
.st-root.st-visible { display: block; }

.st-handle {
    width: 40px;
    height: 3px;
    margin: 0 auto;
    border-radius: 0 0 3px 3px;
    background: var(--st-border);
    transition: opacity 160ms ease-out;
}
.st-root.st-open .st-handle { opacity: 0; }

.st-bar {
    position: absolute;
    top: 0;
    left: 50%;
    display: flex;
    gap: 0;
    align-items: center;
    height: 24px;
    padding: 0 18px;
    background: var(--st-surface);
    box-shadow: inset 0 -1px 0 var(--st-border);
    /* Trapezoid, narrower at the bottom like the Remote Desktop bar */
    clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 12px 100%);
    white-space: nowrap;
    transform: translate(-50%, -110%);
    /* Exit: short ease-in, out of the way once the pointer has left */
    transition: transform 140ms cubic-bezier(0.55, 0, 1, 0.45);
}
/* The clip cuts a box-shadow, so the depth comes from a drop shadow on the wrapper */
.st-root { filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.22)); }
/* Enter: ease-out so the bar answers the hover at once */
.st-root.st-open .st-bar {
    transform: translate(-50%, 0);
    transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
}

.st-bar button {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--st-c-icon);
    cursor: pointer;
    transition: background-color 120ms ease-out, color 120ms ease-out, transform 100ms ease-out;
}
.st-bar button:hover { background: var(--st-surface-hover); }
.st-bar button:active { transform: scale(0.97); }
.st-bar button:focus-visible { outline: 2px solid var(--st-focus); outline-offset: 1px; }
.st-bar button:disabled { opacity: 0.35; cursor: not-allowed; }
.st-bar button:disabled:hover { background: transparent; }

.st-bar button[data-act="logout"]:hover { background: var(--st-danger); color: #fff; }

.st-bar svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.st-sep {
    width: 1px;
    height: 14px;
    margin: 0 3px;
    background: var(--st-border);
}
/* Extra distance before logout so it is not hit by mistake */
.st-sep-wide { margin: 0 8px; }

@media (prefers-reduced-motion: reduce) {
    .st-bar, .st-root.st-open .st-bar, .st-handle { transition: none; }
}

.st-level {
    min-width: 20px;
    color: var(--st-muted);
    font: 600 11px/20px "Segoe UI", system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/* X close button, last item in the header of the side menu / file browser */
.st-menu-head { display: flex; align-items: center; }
.st-menu-close {
    flex: none;
    margin: 0 8px 0 auto;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--st-text);
    cursor: pointer;
    transition: background-color 120ms ease-out;
}
.st-menu-close:hover { background: var(--st-danger); color: #fff; }
.st-menu-close:active svg { transform: scale(0.94); }
.st-menu-close:focus-visible { outline: 2px solid var(--st-focus); outline-offset: 1px; }
.st-menu-close svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Switches: filled blue while on, grey while off, so the state reads from across the screen */
.st-bar button[data-act="sound"],
.st-bar button[data-act="clip"] { color: var(--st-c-off); }
.st-bar button[data-act="sound"][data-state="on"],
.st-bar button[data-act="clip"][aria-pressed="true"] { background: var(--st-c-on); color: #fff; }
.st-bar button[data-act="sound"][data-state="on"]:hover,
.st-bar button[data-act="clip"][aria-pressed="true"]:hover { background: var(--st-c-on); filter: brightness(1.1); }
.st-bar button[data-act="sound"][data-state="connecting"],
.st-bar button[data-act="sound"][data-state="error"] { color: var(--st-warn); }
.st-bar button[data-act="shot"][data-state="done"] { color: var(--st-ok); }

/* Sound: connecting pulses, error carries a dot, so state never relies on colour alone */
.st-bar button[data-act="sound"][data-state="connecting"] svg { animation: st-pulse 1.2s ease-in-out infinite; }
.st-bar button[data-act="sound"][data-state="error"]::after {
    content: '';
    position: absolute;
    top: 3px;
    right: 3px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--st-danger);
}
@keyframes st-pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
    .st-bar button[data-act="sound"][data-state="connecting"] svg { animation: none; opacity: 0.6; }
}

/* File browser opened from the toolbar: keep the settings menu out of sight */
body.st-files-only #guac-menu { visibility: hidden; }
/* The X is the only way out there, not Guacamole's Back */
body.st-files-only #filesystem-menu .header button.back { display: none; }
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');

/* Vivacom-style login: black/white, mint accent, Manrope */
.login-ui {
    background: #f7f9fc;
    font-family: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.login-ui .login-dialog {
    position: relative;
    width: 100%;
    max-width: 380px;
    padding: 40px 32px 32px;
    border: 0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 32px rgba(16, 24, 40, 0.08);
    overflow: hidden;
}

.login-ui .login-dialog::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #0cf0af;
}

.login-ui .login-dialog .logo {
    width: 200px;
    height: 20px;
    margin: 0 auto 24px;
    background: url('app/ext/vivacom-theme/vivacom.svg') center / contain no-repeat;
}

.login-ui .login-dialog .version {
    padding: 0;
    margin-bottom: 28px;
    text-align: center;
    background: none;
}
.login-ui .login-dialog .version .app-name {
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: #58595b;
    text-transform: none;
    letter-spacing: 0;
}
.login-ui .login-dialog .version .version-number { display: none; }

.login-ui .login-fields .labeled-field .field-header {
    font-family: inherit;
    color: #636674;
}

.login-ui .login-dialog .login-fields input,
.login-ui .login-fields .labeled-field input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background: #fff;
    font: 500 15px/1 Manrope, system-ui, sans-serif;
    color: #000;
    transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
}
.login-ui .login-dialog .login-fields input:focus,
.login-ui .login-fields .labeled-field input:focus {
    outline: none;
    border-color: #5073ff;
    box-shadow: 0 0 0 3px rgba(80, 115, 255, 0.18);
}

.login-ui .login-dialog .buttons { margin-top: 20px; }
.login-ui .login-dialog .buttons input[type="submit"] {
    width: 100%;
    height: 46px;
    margin: 0;
    border: 0;
    border-radius: 999px;
    background: #000;
    color: #fff;
    font: 600 15px/1 Manrope, system-ui, sans-serif;
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
    transition: background-color 120ms ease-out, transform 100ms ease-out;
}
.login-ui .login-dialog .buttons input[type="submit"]:hover { background: #222; }
.login-ui .login-dialog .buttons input[type="submit"]:active { transform: scale(0.98); }
.login-ui .login-dialog .buttons input[type="submit"]:focus-visible {
    outline: 2px solid #5073ff;
    outline-offset: 2px;
}
.login-ui .login-dialog .buttons input[type="submit"]:disabled { background: #bcbcbc; cursor: default; }

.login-ui.error p.login-error {
    max-width: 380px;
    margin: 0 auto 12px;
    border-radius: 10px;
    background: #e83b32;
    font-family: inherit;
}