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

}
/* ============================================================
   Lens Theme for Apache Guacamole
   ============================================================
   Design language: neutral charcoal base, lemon-yellow primary,
   stencil/condensed typography, bracket corner marks.
   Compatible with Guacamole 1.5.x and 1.6.x.

   Fonts use system stack only — no external CDN — to work under
   strict Content Security Policies that block fonts.googleapis.com.
   ============================================================ */

:root {
    /* warm near-black base */
    --bg-0: #0b0c0e;
    --bg-1: #13141a;
    --bg-2: #1a1b22;
    --bg-3: #23252e;
    --bg-4: #2f323d;

    --line: #262830;
    --line-2: #383b46;
    --line-hot: rgba(250, 204, 21, 0.35);

    --ink: #eef0f3;
    --ink-2: #9ea3ad;
    --ink-3: #878c95;
    --ink-4: #8d929c;

    /* primary: amber/orange */
    --hot: #facc15;
    --hot-bright: #fde047;
    --hot-deep: #a16207;
    --hot-dim: rgba(250, 204, 21, 0.14);
    --hot-glow: rgba(250, 204, 21, 0.45);

    /* secondary signal: muted teal */
    --cool: #5fc7d4;
    --cool-dim: rgba(95, 199, 212, 0.14);

    --ok: #7ebd5a;
    --warn: #fde047;
    --bad: #ff5a5a;

    /* System font stack — no external dependencies */
    --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --cond: 'Arial Narrow', 'Helvetica Neue Condensed', 'Liberation Sans Narrow', 'Roboto Condensed', sans-serif;
}

/* ============================================================
   GLOBAL
   ============================================================ */

body, html {
    background: var(--bg-0) !important;
    color: var(--ink) !important;
    font-family: var(--sans) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Force light text on every text-holding element inside Guacamole's UI */
.login-ui, .login-ui *,
.home, .home *,
.client-view, .client-view *,
.manage, .manage *,
.settings, .settings *,
.user-settings, .user-settings *,
.page-body, .page-body *,
.header, .header * {
    color: var(--ink);
}

/* Re-establish dimmer roles */
.caption,
.field-header,
.description,
.hint,
.help-text,
small {
    color: var(--ink-3) !important;
}

a, a:link, a:visited { color: var(--hot) !important; }
a:hover, a:active { color: var(--hot-bright) !important; }

::selection { background: var(--hot); color: var(--bg-0); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-0); }
::-webkit-scrollbar-thumb { background: var(--bg-3); border: 2px solid var(--bg-0); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--line-2); }

/* ============================================================
   LOGIN SCREEN
   ============================================================ */

.login-ui {
    background:
        radial-gradient(ellipse at 30% 50%, #0d0e12 0%, var(--bg-0) 60%) !important;
    position: relative;
    overflow: hidden;
}

/* Grid backdrop */
.login-ui::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image:
        linear-gradient(var(--line) 1px, transparent 1px),
        linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 56px 56px;
    opacity: 0.35;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse at center, black 10%, transparent 75%);
    mask-image: radial-gradient(ellipse at center, black 10%, transparent 75%);
    z-index: 0;
}

/* Radial amber vignette */
.login-ui::after {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background:
        radial-gradient(ellipse at 50% 40%, var(--hot-dim) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(0,0,0,0.55) 100%);
    pointer-events: none;
    z-index: 0;
}

.login-ui .login-dialog {
    width: 100% !important;
    max-width: 520px !important;
    background: var(--bg-1) !important;
    border: 1px solid var(--line) !important;
    border-radius: 20px !important;
    padding: 52px 48px 42px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
    position: relative;
    z-index: 1;
}

/* Amber bracket corners on all four corners of the login card */
.login-ui .login-dialog::before,
.login-ui .login-dialog::after {
    content: none !important;
    position: absolute;
    width: 12px;
    height: 12px;
    border: 1px solid var(--hot);
    pointer-events: none;
}
.login-ui .login-dialog::before {
    top: -1px;
    left: -1px;
    border-right: none;
    border-bottom: none;
}
.login-ui .login-dialog::after {
    bottom: -1px;
    right: -1px;
    border-left: none;
    border-top: none;
}

/* Hex logo mark in amber with inner frame */
.login-ui .login-dialog .logo {
    width: 52px !important;
    height: 52px !important;
    margin: 0 auto 24px !important;
    border: 1px solid var(--hot);
    border-radius: 50%;
    background-color: var(--bg-0) !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='%23facc15' stroke-width='1.6'><path d='M12 3 L20 7 L20 17 L12 21 L4 17 L4 7 Z'/><path d='M12 3 L12 21'/><path d='M4 7 L20 17'/><path d='M20 7 L4 17'/></svg>") !important;
    background-size: 24px 24px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    position: relative;
}

/* Version block: show app-name as brand, hide version number */
.login-ui .login-dialog .version {
    display: block !important;
    text-align: center;
    margin: 0 0 36px 0 !important;
    background: transparent !important;
    border: none !important;
}

.login-ui .login-dialog .version .app-name {
    font-family: var(--mono) !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    letter-spacing: 0.32em !important;
    color: var(--ink) !important;
    text-transform: uppercase !important;
    padding: 0 !important;
    background: transparent !important;
}

.login-ui .login-dialog .version .version-number {
    display: none !important;
}

.login-ui .login-dialog .login-fields {
    margin-top: 4px;
}

.login-ui .login-dialog .login-fields .labeled-field,
.login-ui .login-dialog .login-fields .field {
    margin-bottom: 22px !important;
}

.login-ui .login-dialog .field-header,
.login-ui .login-dialog .login-fields .field-header {
    font-family: var(--mono) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.26em !important;
    text-transform: uppercase !important;
    color: var(--ink-3) !important;
    margin-bottom: 8px !important;
}

.login-ui .login-dialog input[type="text"],
.login-ui .login-dialog input[type="password"],
.login-ui .login-dialog input[type="email"],
.login-ui .login-dialog select {
    width: 100% !important;
    height: 50px !important;
    padding: 0 16px !important;
    background: var(--bg-0) !important;
    border: 1px solid var(--line) !important;
    border-radius: 12px !important;
    color: var(--ink) !important;
    font-family: var(--mono) !important;
    font-size: 14px !important;
    letter-spacing: 0.04em !important;
    transition: border-color .12s ease, box-shadow .12s ease !important;
    outline: none !important;
    box-shadow: none !important;
}

.login-ui .login-dialog input:hover,
.login-ui .login-dialog select:hover {
    border-color: var(--line-2) !important;
}

.login-ui .login-dialog input:focus,
.login-ui .login-dialog select:focus {
    border-color: var(--hot) !important;
    box-shadow: 0 0 0 1px var(--hot), inset 0 0 20px rgba(250,204,21,0.05) !important;
}

/* Amber submit button with cross-bar accents */
.login-ui .login-dialog input[type="submit"] {
    width: 100% !important;
    height: 60px !important;
    margin-top: 18px !important;
    background: var(--hot) !important;
    color: #0b0c0e !important;
    border: none !important;
    border-radius: 26px !important;
    font-family: var(--mono) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.32em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: background .12s ease, box-shadow .12s ease !important;
    text-shadow: none !important;
}

.login-ui .login-dialog input[type="submit"]:hover {
    background: var(--hot-bright) !important;
    box-shadow: 0 0 0 1px var(--hot), 0 0 36px var(--hot-glow) !important;
}

.login-ui.error .login-dialog {
    border-color: rgba(255, 90, 90, 0.4) !important;
}

.login-ui .login-error,
.login-ui .error-text {
    color: var(--bad) !important;
    font-family: var(--mono) !important;
    font-size: 12px !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    text-align: center;
    margin-top: 14px !important;
}

/* ============================================================
   HEADER / APP NAV
   ============================================================ */

.header, .page-header {
    background: var(--bg-1) !important;
    border-bottom: 1px solid var(--line) !important;
    height: 54px !important;
}

.header .logo, .header-logo {
    width: 26px !important;
    height: 26px !important;
    border: 1px solid var(--hot);
    border-radius: 0;
    background-color: var(--bg-0) !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='%23facc15' stroke-width='1.8'><path d='M12 3 L20 7 L20 17 L12 21 L4 17 L4 7 Z'/><path d='M12 3 L12 21'/><path d='M4 7 L20 17'/><path d='M20 7 L4 17'/></svg>") !important;
    background-size: 12px 12px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

.header h1,
.header h2,
.header h3,
.header .title,
.header span,
.header div {
    color: var(--ink) !important;
}

.header h1,
.header .title {
    font-family: var(--mono) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.30em !important;
    text-transform: uppercase !important;
}

/* User menu dropdown */
.menu-dropdown, .user-menu {
    background: var(--bg-2) !important;
    border: 1px solid var(--line) !important;
    border-radius: 20px !important;
    color: var(--ink) !important;
    font-family: var(--mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
}

.menu-dropdown *, .user-menu * { color: var(--ink) !important; }

.menu-dropdown:hover, .user-menu:hover {
    border-color: var(--line-hot) !important;
}

.menu-dropdown-contents, .user-menu-contents {
    background: var(--bg-1) !important;
    border: 1px solid var(--line) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    border-radius: 20px !important;
}

.menu-dropdown-contents a,
.menu-dropdown-contents .menu-item,
.user-menu-contents a {
    color: var(--ink-2) !important;
    font-family: var(--mono) !important;
    font-size: 10px !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    padding: 12px 16px !important;
    transition: color .12s ease, background .12s ease !important;
}

.menu-dropdown-contents a:hover,
.menu-dropdown-contents .menu-item:hover,
.user-menu-contents a:hover {
    color: var(--hot) !important;
    background: var(--hot-dim) !important;
}

/* ============================================================
   HOME / CONNECTION LIST
   ============================================================ */

.home, .page-body, .manage, .settings {
    background: var(--bg-0) !important;
    color: var(--ink) !important;
}

.home h1, .home h2, .home h3, .home h4,
.recent-connections-heading,
.all-connections-heading,
.section-heading {
    color: var(--ink) !important;
    font-family: var(--mono) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.30em !important;
    text-transform: uppercase !important;
    padding-left: 14px !important;
    position: relative;
    border-bottom: 1px solid var(--line);
    padding-bottom: 10px !important;
    margin-bottom: 18px !important;
}

.home h2::before,
.recent-connections-heading::before,
.all-connections-heading::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 3px;
    height: 14px;
    background: var(--hot);
}

/* Connection cards */
.list-item,
.connection,
.connection-group,
.recent-connection {
    background: var(--bg-1) !important;
    border: 1px solid var(--line) !important;
    border-radius: 20px !important;
    color: var(--ink) !important;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease !important;
    position: relative;
    overflow: hidden;
}

.list-item, .list-item *,
.connection, .connection *,
.connection-group, .connection-group *,
.recent-connection, .recent-connection * {
    color: var(--ink) !important;
}

.list-item::before,
.connection::before,
.recent-connection::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 0;
    background: var(--hot);
    transition: height .2s ease;
    z-index: 1;
}

.list-item:hover,
.connection:hover,
.connection-group:hover,
.recent-connection:hover {
    border-color: var(--line-2) !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.4) !important;
}

.list-item:hover::before,
.connection:hover::before,
.recent-connection:hover::before {
    height: 100%;
}

.list-item .name,
.connection .name,
.connection-group .name,
.recent-connection .name {
    color: var(--ink) !important;
    font-family: var(--cond) !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    letter-spacing: 0.02em !important;
}

.list-item .caption,
.connection .protocol,
.connection .caption {
    font-family: var(--mono) !important;
    font-size: 10px !important;
    color: var(--ink-3) !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase;
}

/* Tint default connection icons amber */
.list-item .icon,
.connection .icon,
.connection-group .icon,
.recent-connection .icon {
    filter: brightness(0) saturate(100%) invert(62%) sepia(75%) saturate(1400%) hue-rotate(350deg) brightness(103%) contrast(101%);
    opacity: 0.9;
}

.connection-group .children {
    border-left: 1px solid var(--line) !important;
}

/* ============================================================
   CLIENT / ACTIVE CONNECTION
   ============================================================ */

.client-view, .client {
    background: #030304 !important;
}

.client-view .menu, .client-menu {
    background: var(--bg-1) !important;
    border-right: 1px solid var(--line) !important;
    color: var(--ink) !important;
    font-family: var(--sans) !important;
}

.client-view .menu *, .client-menu * { color: var(--ink) !important; }

.client-view .menu h2,
.client-view .menu h3,
.client-menu h2,
.client-menu h3 {
    font-family: var(--mono) !important;
    font-size: 9px !important;
    letter-spacing: 0.28em !important;
    text-transform: uppercase !important;
    color: var(--ink-3) !important;
    border-bottom: 1px solid var(--line) !important;
    padding-bottom: 10px !important;
    margin-bottom: 12px !important;
}

.client-view .menu button,
.client-menu button {
    background: var(--bg-2) !important;
    border: 1px solid var(--line) !important;
    color: var(--ink-2) !important;
    font-family: var(--mono) !important;
    font-size: 10px !important;
    letter-spacing: 0.20em !important;
    text-transform: uppercase !important;
    border-radius: 20px !important;
    transition: all .12s ease !important;
    height: 38px !important;
}

.client-view .menu button:hover,
.client-menu button:hover {
    color: var(--hot) !important;
    border-color: var(--line-hot) !important;
}

.client-view .notification,
.connection-state {
    background: var(--bg-1) !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
    font-family: var(--sans) !important;
    border-radius: 20px !important;
}

.client-view .notification *,
.connection-state * { color: var(--ink) !important; }

/* On-screen keyboard */
.osk {
    background: var(--bg-1) !important;
    border: 1px solid var(--line) !important;
    border-radius: 0;
}

.osk .key {
    background: var(--bg-2) !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
    font-family: var(--mono) !important;
    border-radius: 20px !important;
}

.osk .key:active,
.osk .key.pressed {
    background: var(--hot) !important;
    color: var(--bg-0) !important;
    border-color: var(--hot) !important;
}

/* ============================================================
   SETTINGS / MANAGE
   ============================================================ */

.settings, .manage, .user-settings {
    background: var(--bg-0) !important;
    color: var(--ink) !important;
    font-family: var(--sans) !important;
}

.settings h1, .settings h2, .settings h3,
.manage h1, .manage h2, .manage h3 {
    color: var(--ink) !important;
}

.settings h2, .manage h2 {
    font-family: var(--cond) !important;
    font-weight: 600 !important;
    font-size: 30px !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    margin-bottom: 16px !important;
    padding-bottom: 14px !important;
    border-bottom: 1px solid var(--line);
}

/* Tabs */
.tabs {
    border-bottom: 1px solid var(--line) !important;
    margin-bottom: 24px !important;
    background: transparent !important;
    display: flex;
    gap: 0;
}

.tabs li, .tabs a {
    font-family: var(--mono) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: var(--ink-3) !important;
    padding: 12px 18px !important;
    border-bottom: 2px solid transparent !important;
    background: transparent !important;
    transition: color .12s ease, border-color .12s ease, background .12s ease !important;
}

.tabs li:hover, .tabs a:hover { color: var(--ink) !important; }

.tabs li.current,
.tabs li.active,
.tabs a.current,
.tabs a.active {
    color: var(--hot) !important;
    border-bottom-color: var(--hot) !important;
    background: var(--hot-dim) !important;
}

.section, .form-section {
    background: var(--bg-1) !important;
    border: 1px solid var(--line) !important;
    border-radius: 20px !important;
    margin-bottom: 14px !important;
    color: var(--ink) !important;
}

.section *, .form-section * { color: var(--ink); }

.section h3, .form-section h3 {
    background: var(--bg-2) !important;
    padding: 12px 18px !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    font-family: var(--mono) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.28em !important;
    text-transform: uppercase !important;
    color: var(--ink-2) !important;
}

/* Forms */
label {
    color: var(--ink-3) !important;
    font-family: var(--mono) !important;
    font-size: 10px !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
select,
textarea {
    background: var(--bg-0) !important;
    border: 1px solid var(--line) !important;
    border-radius: 20px !important;
    color: var(--ink) !important;
    font-family: var(--mono) !important;
    font-size: 13px !important;
    padding: 10px 12px !important;
    outline: none !important;
    transition: border-color .12s ease, box-shadow .12s ease !important;
}

input::placeholder, textarea::placeholder { color: var(--ink-4) !important; }

input:hover, select:hover, textarea:hover {
    border-color: var(--line-2) !important;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--hot) !important;
    box-shadow: 0 0 0 1px var(--hot), inset 0 0 20px rgba(250,204,21,0.05) !important;
}

input[type="checkbox"], input[type="radio"] { accent-color: var(--hot); }

option {
    background: var(--bg-1) !important;
    color: var(--ink) !important;
}

/* Buttons */
button, .button, input[type="button"] {
    background: var(--bg-2) !important;
    color: var(--ink) !important;
    border: 1px solid var(--line) !important;
    border-radius: 20px !important;
    padding: 10px 16px !important;
    font-family: var(--mono) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: all .12s ease !important;
}

button:hover, .button:hover, input[type="button"]:hover {
    color: var(--hot-bright) !important;
    border-color: var(--line-2) !important;
}

button.important, .button.primary,
input[type="submit"]:not(.login-ui input[type="submit"]) {
    background: var(--hot) !important;
    color: #0b0c0e !important;
    border-color: var(--hot) !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
}

button.important:hover, .button.primary:hover,
input[type="submit"]:not(.login-ui input[type="submit"]):hover {
    background: var(--hot-bright) !important;
    border-color: var(--hot-bright) !important;
    box-shadow: 0 0 0 1px var(--hot), 0 0 24px var(--hot-glow) !important;
    color: #0b0c0e !important;
}

button.danger, .button.danger {
    background: transparent !important;
    color: var(--bad) !important;
    border-color: rgba(255, 90, 90, 0.4) !important;
}

button.danger:hover, .button.danger:hover {
    background: rgba(255, 90, 90, 0.1) !important;
    border-color: var(--bad) !important;
    color: var(--bad) !important;
}

/* ============================================================
   DATA TABLES
   ============================================================ */

table {
    width: 100% !important;
    background: var(--bg-1) !important;
    border: 1px solid var(--line) !important;
    border-radius: 20px !important;
    border-collapse: collapse !important;
    color: var(--ink) !important;
}

table * { color: var(--ink); }

table thead, table th {
    background: var(--bg-2) !important;
    color: var(--ink-3) !important;
    font-family: var(--mono) !important;
    font-size: 9px !important;
    font-weight: 500 !important;
    letter-spacing: 0.24em !important;
    text-transform: uppercase !important;
    text-align: left !important;
    padding: 10px 14px !important;
    border-bottom: 1px solid var(--line) !important;
}

table td {
    padding: 12px 14px !important;
    border-bottom: 1px solid var(--line) !important;
    color: var(--ink) !important;
    font-family: var(--sans) !important;
    font-size: 13px !important;
}

table tbody tr {
    transition: background .12s ease !important;
    cursor: pointer;
}

table tbody tr:hover {
    background: var(--bg-2) !important;
}

table tbody tr:hover td { color: var(--ink) !important; }

table tbody tr:last-child td { border-bottom: none !important; }

/* ============================================================
   MODALS AND DIALOGS
   ============================================================ */

.modal, .dialog {
    background: var(--bg-1) !important;
    border: 1px solid var(--line) !important;
    border-radius: 20px !important;
    color: var(--ink) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7) !important;
    position: relative;
}

.modal *, .dialog * { color: var(--ink); }

/* Amber bracket corners on modals */
.modal::before, .modal::after,
.dialog::before, .dialog::after {
    content: none !important;
    position: absolute;
    width: 10px;
    height: 10px;
    border: 1px solid var(--hot);
    pointer-events: none;
}
.modal::before, .dialog::before {
    top: -1px; left: -1px;
    border-right: none; border-bottom: none;
}
.modal::after, .dialog::after {
    bottom: -1px; right: -1px;
    border-left: none; border-top: none;
}

.modal-backdrop, .dialog-backdrop {
    background: rgba(0, 0, 0, 0.75) !important;
}

.modal h2, .dialog h2 {
    font-family: var(--cond) !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    color: var(--ink) !important;
    border-bottom: 1px solid var(--line) !important;
    padding-bottom: 12px !important;
}

/* ============================================================
   NOTIFICATIONS
   ============================================================ */

.notification {
    background: var(--bg-1) !important;
    border: 1px solid var(--line) !important;
    border-radius: 20px !important;
    color: var(--ink) !important;
    font-family: var(--sans) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

.notification * { color: var(--ink); }

.notification.error { border-left: 3px solid var(--bad) !important; }
.notification.warning { border-left: 3px solid var(--warn) !important; }
.notification.success { border-left: 3px solid var(--ok) !important; }

/* ============================================================
   MISC
   ============================================================ */

.loading { color: var(--hot) !important; }

p, span, div, li, td, th, dt, dd { color: inherit; }

/* ============================================================
   v2 HOTFIX: Top-right user menu + Settings tabs
   ============================================================
   Targets the real Guacamole DOM classes (verified from source).
   The earlier rules missed several specific container classes,
   leaving Guacamole's default white/light backgrounds visible.
   ============================================================ */

.guac-user-menu,
.guac-user-menu *,
.user-menu,
.user-menu *,
.menu-dropdown,
.menu-dropdown *,
.main-menu-header,
.main-menu-header *,
.main-menu-content,
.main-menu-content *,
[ng-controller*="userMenu"],
[ng-controller*="userMenu"] * {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--ink) !important;
    border-color: var(--line) !important;
}

.guac-user-menu,
.user-menu,
.menu-dropdown,
.main-menu-header,
.main-menu-content {
    background: var(--bg-1) !important;
    background-color: var(--bg-1) !important;
    border: 1px solid var(--line) !important;
    border-radius: 20px !important;
}

.guac-user-menu .menu-dropdown-contents,
.user-menu-contents,
.menu-dropdown-contents {
    background: var(--bg-1) !important;
    background-color: var(--bg-1) !important;
    border: 1px solid var(--line) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

.guac-user-menu .menu-dropdown-contents a,
.guac-user-menu .menu-dropdown-contents li,
.user-menu-contents a,
.user-menu-contents li,
.menu-dropdown-contents a,
.menu-dropdown-contents li {
    background: transparent !important;
    color: var(--ink-2) !important;
    padding: 12px 16px !important;
    display: block;
    font-family: var(--mono) !important;
    font-size: 10px !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
}

.guac-user-menu .menu-dropdown-contents a:hover,
.guac-user-menu .menu-dropdown-contents li:hover,
.user-menu-contents a:hover,
.user-menu-contents li:hover,
.menu-dropdown-contents a:hover,
.menu-dropdown-contents li:hover {
    background: var(--hot-dim) !important;
    color: var(--hot) !important;
}

/* Settings tabs - dark on every state */
.tabs,
.tabs ul,
.tabs ol,
.section-tabs,
.settings .tabs,
.manage .tabs {
    background: transparent !important;
    background-color: transparent !important;
    border-bottom: 1px solid var(--line) !important;
}

.tabs li,
.tabs a,
.tabs li a,
.section-tabs li,
.section-tabs a,
.settings .tabs li,
.settings .tabs a {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--ink-3) !important;
}

.tabs li:hover,
.tabs a:hover,
.tabs li:hover a,
.section-tabs li:hover,
.section-tabs a:hover {
    background: var(--bg-2) !important;
    background-color: var(--bg-2) !important;
    color: var(--ink) !important;
}

.tabs li.current,
.tabs li.active,
.tabs a.current,
.tabs a.active,
.tabs li.current a,
.tabs li.active a,
.section-tabs li.current,
.section-tabs li.active {
    background: var(--hot-dim) !important;
    background-color: var(--hot-dim) !important;
    color: var(--hot) !important;
    border-bottom-color: var(--hot) !important;
}

/* Settings page nav tiles */
.settings .home,
.settings .preferences,
.settings .connections,
.settings .users,
.settings .user-groups,
.settings .sessions,
.settings .history,
.settings a.tile,
.settings .nav-tile {
    background: var(--bg-1) !important;
    color: var(--ink) !important;
    border: 1px solid var(--line) !important;
}

.settings .home:hover,
.settings .preferences:hover,
.settings .connections:hover,
.settings .users:hover,
.settings .user-groups:hover,
.settings .sessions:hover,
.settings .history:hover,
.settings a.tile:hover,
.settings .nav-tile:hover {
    background: var(--bg-2) !important;
    color: var(--hot) !important;
    border-color: var(--line-hot) !important;
}

.settings .home *,
.settings .preferences *,
.settings .connections *,
.settings .users *,
.settings .user-groups *,
.settings .sessions *,
.settings .history * {
    color: inherit !important;
    background: transparent !important;
}

/* ============================================================
   v3 HOTFIX: Nuclear override for user menu dropdown
   ============================================================
   The screenshot showed dropdown items still painting white.
   This block targets every conceivable menu container with
   maximum specificity.
   ============================================================ */

/* Anything that could be a menu/dropdown container, period */
body .menu,
body .menu *,
body div[class*="menu"],
body div[class*="menu"] *,
body ul[class*="menu"],
body ul[class*="menu"] *,
body li[class*="menu"],
body li[class*="menu"] *,
body [class*="dropdown"],
body [class*="dropdown"] *,
body [class*="user-menu"],
body [class*="user-menu"] * {
    background-image: none !important;
}

/* Specifically force the dropdown panel and its items dark */
html body .menu-dropdown,
html body .menu-dropdown-contents,
html body .menu-dropdown-contents > *,
html body .guac-user-menu,
html body .guac-user-menu *,
html body div.guac-user-menu,
html body .user-menu-contents,
html body .user-menu-contents > * {
    background: var(--bg-1) !important;
    background-color: var(--bg-1) !important;
    color: var(--ink) !important;
}

/* Individual clickable items inside the dropdown */
html body .menu-dropdown-contents a,
html body .menu-dropdown-contents li,
html body .menu-dropdown-contents li a,
html body .guac-user-menu a,
html body .guac-user-menu li,
html body .guac-user-menu li a,
html body .user-menu-contents a,
html body .user-menu-contents li {
    background: var(--bg-1) !important;
    background-color: var(--bg-1) !important;
    background-image: none !important;
    color: var(--ink-2) !important;
    border: none !important;
    text-decoration: none !important;
}

/* Hover state — dim amber tint, amber text */
html body .menu-dropdown-contents a:hover,
html body .menu-dropdown-contents li:hover,
html body .menu-dropdown-contents li:hover a,
html body .menu-dropdown-contents li.active,
html body .menu-dropdown-contents li[class*="active"],
html body .guac-user-menu a:hover,
html body .guac-user-menu li:hover,
html body .guac-user-menu li:hover a,
html body .user-menu-contents a:hover,
html body .user-menu-contents li:hover {
    background: var(--hot-dim) !important;
    background-color: var(--hot-dim) !important;
    background-image: none !important;
    color: var(--hot) !important;
}

/* The trigger button itself (the "demo" username chip top-right) */
html body .menu-dropdown,
html body div.menu-dropdown,
html body [ng-controller*="userMenu"] > * {
    background: var(--bg-1) !important;
    background-color: var(--bg-1) !important;
    color: var(--ink) !important;
    border: 1px solid var(--line) !important;
}

/* ============================================================
   v4 HOTFIX: Per-element dropdown items
   ============================================================
   Screenshot showed three remaining issues:
   - "demo" username header: light tan bg
   - Highlighted/active item ("Home"): white-ish bg
   - "Logout" item text: invisible

   Root cause: Guacamole paints specific child classes with
   background colors that container-level rules miss. This block
   targets every possible item-level class.
   ============================================================ */

/* Username header at top of dropdown */
html body .menu-dropdown .username,
html body .menu-dropdown-contents .username,
html body .guac-user-menu .username,
html body .user-menu .username,
html body [class*="user-menu"] .username,
html body [class*="dropdown"] .username,
html body .menu-dropdown > div:first-child,
html body .menu-dropdown-contents > div:first-child,
html body .menu-dropdown-contents > li:first-child,
html body .guac-user-menu > div:first-child {
    background: var(--bg-1) !important;
    background-color: var(--bg-1) !important;
    background-image: none !important;
    color: var(--ink) !important;
    border-bottom: 1px solid var(--line) !important;
    padding: 12px 16px !important;
    font-family: var(--mono) !important;
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
}

/* ANY active/focused/selected item — Guacamole uses several states */
html body .menu-dropdown-contents li.active,
html body .menu-dropdown-contents li.selected,
html body .menu-dropdown-contents li.current,
html body .menu-dropdown-contents li:focus,
html body .menu-dropdown-contents li:focus-within,
html body .menu-dropdown-contents a.active,
html body .menu-dropdown-contents a:focus,
html body .menu-dropdown-contents a.ng-active,
html body .guac-user-menu li.active,
html body .guac-user-menu li:focus,
html body .guac-user-menu a:focus,
html body [class*="menu"] li.active,
html body [class*="menu"] li:focus,
html body [class*="menu"] a:focus {
    background: var(--hot-dim) !important;
    background-color: var(--hot-dim) !important;
    background-image: none !important;
    color: var(--hot) !important;
    outline: none !important;
}

/* Logout item specifically (often has its own class) */
html body .menu-dropdown-contents .logout,
html body .menu-dropdown-contents .logout *,
html body .menu-dropdown-contents li.logout,
html body .menu-dropdown-contents li.logout *,
html body .menu-dropdown-contents a.logout,
html body .menu-dropdown-contents a.logout *,
html body .guac-user-menu .logout,
html body .guac-user-menu .logout *,


    background: var(--bg-1) !important;
    background-color: var(--bg-1) !important;
    background-image: none !important;
    color: var(--ink-2) !important;
    border: none !important;
    text-decoration: none !important;
    opacity: 1 !important;
    
}

html body .menu-dropdown-contents .logout:hover,
html body .menu-dropdown-contents li.logout:hover,
html body .menu-dropdown-contents a.logout:hover,
html body .guac-user-menu .logout:hover,

    background: var(--hot-dim) !important;
    background-color: var(--hot-dim) !important;
    color: var(--hot) !important;
}

/* Nuke any pseudo-element overlays Guacamole may use */
html body .menu-dropdown-contents li::before,
html body .menu-dropdown-contents li::after,
html body .menu-dropdown-contents a::before,
html body .menu-dropdown-contents a::after,
html body .guac-user-menu li::before,
html body .guac-user-menu li::after {
    background: transparent !important;
    background-color: transparent !important;
}

/* Last-resort blanket text color on everything in the menu */
html body .menu-dropdown,
html body .menu-dropdown *,
html body .menu-dropdown-contents,
html body .menu-dropdown-contents *,
html body .guac-user-menu,
html body .guac-user-menu * {
    color: var(--ink-2) !important;
}

/* Re-apply specific colors after blanket rule */
html body .menu-dropdown-contents li:hover,
html body .menu-dropdown-contents li:hover *,
html body .menu-dropdown-contents li.active,
html body .menu-dropdown-contents li.active *,
html body .menu-dropdown-contents li:focus,
html body .menu-dropdown-contents li:focus *,
html body .guac-user-menu li:hover,
html body .guac-user-menu li:hover * {
    color: var(--hot) !important;
}

html body .menu-dropdown .username,
html body .guac-user-menu .username,
html body [class*="user-menu"] .username {
    color: var(--ink) !important;
}


/* === User menu dropdown — solid opaque background === */
.guac-user-menu .dropdown,
.guac-user-menu .menu-dropdown,
.guac-user-menu .menu-dropdown-contents,
.guac-user-menu .user-menu,
.guac-user-menu .user-menu-contents,
.user-menu .dropdown,
.user-menu .menu-dropdown-contents,
.menu-dropdown .menu-dropdown-contents {
    background: #0b0c0e !important;
    background-color: #0b0c0e !important;
    opacity: 1 !important;
    z-index: 100000 !important;
}

.guac-user-menu .dropdown *,
.guac-user-menu .menu-dropdown *,
.guac-user-menu .menu-dropdown-contents *,
.user-menu .menu-dropdown-contents *,
.menu-dropdown .menu-dropdown-contents * {
    background: #0b0c0e !important;
    background-color: #0b0c0e !important;
    opacity: 1 !important;
}

.guac-user-menu .dropdown a:hover,
.guac-user-menu .dropdown li:hover,
.guac-user-menu .menu-dropdown-contents a:hover,
.guac-user-menu .menu-dropdown-contents li:hover,
.user-menu .menu-dropdown-contents a:hover,
.user-menu .menu-dropdown-contents li:hover {
    background: rgba(250, 204, 21, 0.14) !important;
    background-color: rgba(250, 204, 21, 0.14) !important;
    color: #facc15 !important;
}