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

}
/*
 * MHLSQ RDP - theme for Apache Guacamole 1.6.0
 *
 * This file is aggregated into Guacamole's app.css, which the browser loads
 * *after* the bundled 1.guacamole.*.css. Rules of equal specificity therefore
 * win on source order, which is why almost nothing here needs !important.
 *
 * Every light/dark difference lives in the token blocks below. Component rules
 * reference tokens only, so they are written once and work in both themes.
 *
 * Placeholders of the form "at-at SVG:filename at-at" are replaced with
 * percent-encoded data URIs by build.sh - do not hand-edit the built output.
 */

/* ------------------------------------------------------------------ */
/* Tokens - light (default)                                            */
/* ------------------------------------------------------------------ */

:root {
    --mh-bg:             #eef1f5;
    --mh-surface:        #ffffff;
    --mh-surface-2:      #f4f6f9;
    --mh-surface-3:      #e7ebf0;
    --mh-border:         #d3d9e0;
    --mh-border-strong:  #b4bdc7;
    --mh-text:           #161a1f;
    --mh-muted:          #5c6672;
    --mh-accent:         #2563eb;
    --mh-accent-hover:   #1d4ed8;
    --mh-accent-text:    #ffffff;
    --mh-accent-soft:    rgba(37, 99, 235, .10);
    --mh-focus-ring:     rgba(37, 99, 235, .28);
    --mh-danger:         #c0392b;
    --mh-danger-hover:   #a93226;
    --mh-warning:        #b45309;
    --mh-warning-soft:   rgba(180, 83, 9, .10);
    --mh-glow:           rgba(37, 99, 235, .13);
    --mh-shadow:         0 1px 3px rgba(16, 24, 40, .10), 0 1px 2px rgba(16, 24, 40, .06);
    --mh-shadow-lg:      0 12px 32px rgba(16, 24, 40, .16);
    --mh-radius:         10px;
    --mh-radius-sm:      8px;

    /* Makes scrollbars and native controls (select, checkbox) match the theme. */
    color-scheme: light;

    /* Theme-dependent assets */
    --mh-magnifier:      url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%235c6672%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2210.5%22%20cy%3D%2210.5%22%20r%3D%226.5%22%2F%3E%3Cpath%20d%3D%22M15.6%2015.6%2021%2021%22%2F%3E%3C%2Fsvg%3E");
    --mh-icon-filter:    none;
    --mh-icon-home:      url(images/action-icons/guac-home-dark.svg);
    --mh-icon-logout:    url(images/action-icons/guac-logout-dark.svg);
    --mh-icon-config:    url(images/action-icons/guac-config-dark.svg);
    --mh-icon-user:      url(images/user-icons/guac-user.svg);
}

/* ------------------------------------------------------------------ */
/* Tokens - dark                                                       */
/*                                                                     */
/* Declared twice on purpose: once for "follow the OS" (guarded so an  */
/* explicit light choice still wins) and once for the explicit toggle. */
/* ------------------------------------------------------------------ */

@media (prefers-color-scheme: dark) {
    :root:not([data-mhlsq-theme="light"]) {
        --mh-bg:             #12151a;
        --mh-surface:        #1a1f26;
        --mh-surface-2:      #222831;
        --mh-surface-3:      #2b323c;
        --mh-border:         #313a45;
        --mh-border-strong:  #445062;
        --mh-text:           #e6eaf0;
        --mh-muted:          #98a3b3;
        --mh-accent:         #60a5fa;
        --mh-accent-hover:   #93c5fd;
        --mh-accent-text:    #0b1220;
        --mh-accent-soft:    rgba(96, 165, 250, .14);
        --mh-focus-ring:     rgba(96, 165, 250, .32);
        --mh-danger:         #f87171;
        --mh-danger-hover:   #fca5a5;
        --mh-warning:        #fbbf24;
        --mh-warning-soft:   rgba(251, 191, 36, .12);
        --mh-glow:           rgba(96, 165, 250, .10);
        --mh-shadow:         0 1px 3px rgba(0, 0, 0, .55), 0 1px 2px rgba(0, 0, 0, .40);
        --mh-shadow-lg:      0 14px 36px rgba(0, 0, 0, .60);

        color-scheme: dark;

        --mh-magnifier:      url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2398a3b3%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2210.5%22%20cy%3D%2210.5%22%20r%3D%226.5%22%2F%3E%3Cpath%20d%3D%22M15.6%2015.6%2021%2021%22%2F%3E%3C%2Fsvg%3E");
        --mh-icon-filter:    invert(1) brightness(1.35);
        --mh-icon-home:      url(images/action-icons/guac-home.svg);
        --mh-icon-logout:    url(images/action-icons/guac-logout.svg);
        --mh-icon-config:    url(images/action-icons/guac-config.svg);
        --mh-icon-user:      url(images/user-icons/guac-user-white.svg);
    }
}

:root[data-mhlsq-theme="dark"] {
    --mh-bg:             #12151a;
    --mh-surface:        #1a1f26;
    --mh-surface-2:      #222831;
    --mh-surface-3:      #2b323c;
    --mh-border:         #313a45;
    --mh-border-strong:  #445062;
    --mh-text:           #e6eaf0;
    --mh-muted:          #98a3b3;
    --mh-accent:         #60a5fa;
    --mh-accent-hover:   #93c5fd;
    --mh-accent-text:    #0b1220;
    --mh-accent-soft:    rgba(96, 165, 250, .14);
    --mh-focus-ring:     rgba(96, 165, 250, .32);
    --mh-danger:         #f87171;
    --mh-danger-hover:   #fca5a5;
    --mh-warning:        #fbbf24;
    --mh-warning-soft:   rgba(251, 191, 36, .12);
    --mh-glow:           rgba(96, 165, 250, .10);
    --mh-shadow:         0 1px 3px rgba(0, 0, 0, .55), 0 1px 2px rgba(0, 0, 0, .40);
    --mh-shadow-lg:      0 14px 36px rgba(0, 0, 0, .60);

    color-scheme: dark;

    --mh-magnifier:      url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2398a3b3%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2210.5%22%20cy%3D%2210.5%22%20r%3D%226.5%22%2F%3E%3Cpath%20d%3D%22M15.6%2015.6%2021%2021%22%2F%3E%3C%2Fsvg%3E");
    --mh-icon-filter:    invert(1) brightness(1.35);
    --mh-icon-home:      url(images/action-icons/guac-home.svg);
    --mh-icon-logout:    url(images/action-icons/guac-logout.svg);
    --mh-icon-config:    url(images/action-icons/guac-config.svg);
    --mh-icon-user:      url(images/user-icons/guac-user-white.svg);
}

/* ------------------------------------------------------------------ */
/* Typography                                                          */
/*                                                                     */
/* Inter, served from inside this extension (declared under            */
/* "resources" in guac-manifest.json) rather than from Google - the     */
/* gateway stays self-contained and makes no third-party requests.      */
/* One variable file per subset covers every weight we use.            */
/* ------------------------------------------------------------------ */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('app/ext/mhlsq-branding/fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('app/ext/mhlsq-branding/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --mh-font: 'Inter', Carlito, -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, Helvetica, Arial, sans-serif;
}

/* Guacamole sets font-family on body and again on every form control, so both
   need overriding. */
body,
a.button,
button,
input,
input[type=submit],
textarea,
select,
h1, h2, h3, h4 {
    font-family: var(--mh-font);
}

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */

html {
    background: var(--mh-bg);
}

body {
    background: var(--mh-bg);
    color: var(--mh-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* The remote display owns its own background - never theme it. */
body.client {
    background: #000;
}

a,
a:visited {
    color: var(--mh-accent);
}

a:hover {
    color: var(--mh-accent-hover);
}

h1, h2, h3, h4 {
    color: var(--mh-text);
}

hr {
    border: none;
    border-top: 1px solid var(--mh-border);
}

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

/* Must out-specify Guacamole's own "div.login-ui { background: #fff }", hence
   the element qualifier - a bare .login-ui loses to it. */
div.login-ui,
.redirect-field-container {
    background: var(--mh-bg);
}

.automatic-login-rejected-modal guac-modal {
    background: var(--mh-bg);
}

/* Soft accent wash behind the sign-in card. */
.login-ui:before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(900px 520px at 50% -8%, var(--mh-glow), transparent 70%);
}

.login-ui .login-dialog-middle {
    position: relative;
    z-index: 1;
}

.login-ui .login-dialog {
    background: var(--mh-surface);
    color: var(--mh-text);
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius);
    box-shadow: var(--mh-shadow-lg);
    padding: 2em 1.75em 1.6em;
    max-width: 3.6in;
}

.login-ui.error .login-dialog {
    border-color: var(--mh-danger);
}

/*
 * The MHLSQ monogram from mhlsq.ro. It is a single-colour wordmark, so it is
 * applied as a mask and tinted with the accent token - one asset, correct in
 * both themes. Its artboard is 240x60, hence the 4:1 box.
 */
.login-ui .login-dialog .logo {
    display: block;
    margin: .2em auto .75em;
    width: 8.4em;
    height: 2.1em;
    background-image: none;
    background-color: var(--mh-accent);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20240%2060%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M20%2010h10l10%2030%2010-30h10v40h-10V25l-10%2025-10-25v25H20V10z%22%2F%3E%3Cpath%20d%3D%22M70%2010h10v15h20V10h10v40h-10V35H80v15H70V10z%22%2F%3E%3Cpath%20d%3D%22M120%2010h10v30h20v10h-30V10z%22%2F%3E%3Cpath%20d%3D%22M160%2010h25v10h-25c-2.8%200-5%202.2-5%205v0c0%202.8%202.2%205%205%205h15c5.5%200%2010%204.5%2010%2010v0c0%205.5-4.5%2010-10%2010h-25v-10h25c2.8%200-5-2.2-5-5v0c0-2.8-2.2-5-5-5h-15c-5.5%200-10-4.5-10-10v0c0-5.5%204.5-10%2010-10z%22%2F%3E%3Cpath%20d%3D%22M210%2010c8.3%200%2015%206.7%2015%2015v10c0%208.3-6.7%2015-15%2015h-10c-8.3%200-15-6.7-15-15V25c0-8.3%206.7-15%2015-15h10zm0%2010h-10c-2.8%200-5%202.2-5%205v10c0%202.8%202.2%205%205%205h10c2.8%200%205-2.2%205-5V25c0-2.8-2.2-5-5-5z%22%2F%3E%3Cpath%20d%3D%22M215%2045l15%2015%22%20stroke%3D%22%23000%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20240%2060%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M20%2010h10l10%2030%2010-30h10v40h-10V25l-10%2025-10-25v25H20V10z%22%2F%3E%3Cpath%20d%3D%22M70%2010h10v15h20V10h10v40h-10V35H80v15H70V10z%22%2F%3E%3Cpath%20d%3D%22M120%2010h10v30h20v10h-30V10z%22%2F%3E%3Cpath%20d%3D%22M160%2010h25v10h-25c-2.8%200-5%202.2-5%205v0c0%202.8%202.2%205%205%205h15c5.5%200%2010%204.5%2010%2010v0c0%205.5-4.5%2010-10%2010h-25v-10h25c2.8%200-5-2.2-5-5v0c0-2.8-2.2-5-5-5h-15c-5.5%200-10-4.5-10-10v0c0-5.5%204.5-10%2010-10z%22%2F%3E%3Cpath%20d%3D%22M210%2010c8.3%200%2015%206.7%2015%2015v10c0%208.3-6.7%2015-15%2015h-10c-8.3%200-15-6.7-15-15V25c0-8.3%206.7-15%2015-15h10zm0%2010h-10c-2.8%200-5%202.2-5%205v10c0%202.8%202.2%205%205%205h10c2.8%200%205-2.2%205-5V25c0-2.8-2.2-5-5-5z%22%2F%3E%3Cpath%20d%3D%22M215%2045l15%2015%22%20stroke%3D%22%23000%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
}

.login-ui .login-dialog .version {
    padding: 0 0 .35em;
}

.login-ui .login-dialog .version .app-name {
    color: var(--mh-text);
    font-size: 1.1em;
    letter-spacing: .14em;
    line-height: 1.3;
}

/*
 * branding.js splits APP.NAME into <span.mh-brand-mark>MHLSQ</span> and
 * <span.mh-brand-tail>RDP</span>. The wordmark above already spells MHLSQ, so
 * only the tail is shown here - APP.NAME itself stays "MHLSQ RDP" for the
 * browser tab title.
 */
.login-ui .login-dialog .version .app-name .mh-brand-mark {
    display: none;
}

.login-ui .login-dialog .version .app-name .mh-brand-tail {
    font-weight: 500;
    font-size: .78em;
    color: var(--mh-muted);
    letter-spacing: .34em;
    text-indent: .34em;
}

/* Version number is hidden: the login page is internet-facing and the badge
   advertises the exact build. */
.login-ui .login-dialog .version .version-number {
    display: none;
}

.login-ui .login-dialog th {
    color: var(--mh-muted);
    text-shadow: none;
    font-weight: 600;
}

/* Matches the specificity of ".login-ui.error p.login-error", which otherwise
   keeps its pale-pink banner in dark mode. */
.login-ui.error p.login-error {
    background: var(--mh-surface);
    border: 1px solid var(--mh-danger);
    color: var(--mh-danger);
    border-radius: var(--mh-radius-sm);
    font-weight: 600;
}

/* Guacamole forces a white background on focused login inputs. */
.login-ui .login-fields .labeled-field input:focus {
    background: var(--mh-surface);
}

.login-ui .login-dialog .buttons {
    margin-top: 1.25em;
}

.login-ui .login-dialog input[type=submit] {
    width: 100%;
    margin: 0;
    padding: .6em 1em;
}

/* ------------------------------------------------------------------ */
/* Form controls                                                       */
/* ------------------------------------------------------------------ */

input[type=text],
input[type=password],
input[type=email],
input[type=number],
input[type=search],
input[type=url],
textarea,
select {
    background: var(--mh-surface);
    color: var(--mh-text);
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius-sm);
    padding: .5em .65em;
    font-family: inherit;
    font-size: inherit;
    transition: border-color .12s ease, box-shadow .12s ease;
}

input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=number]:focus,
input[type=search]:focus,
input[type=url]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--mh-accent);
    box-shadow: 0 0 0 3px var(--mh-focus-ring);
}

input::placeholder,
textarea::placeholder {
    color: var(--mh-muted);
    opacity: 1;
}

label {
    color: var(--mh-text);
}

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

a.button,
button,
input[type=submit] {
    background-color: var(--mh-surface);
    background-image: none;
    color: var(--mh-text);
    border: 1px solid var(--mh-border-strong);
    border-radius: var(--mh-radius-sm);
    text-shadow: none;
    box-shadow: var(--mh-shadow);
    font-weight: 600;
    padding: .45em 1em;
    transition: background-color .12s ease, border-color .12s ease;
}

a.button:hover,
button:hover,
input[type=submit]:hover {
    background-color: var(--mh-surface-3);
}

a.button:active,
button:active,
input[type=submit]:active {
    background-color: var(--mh-surface-2);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .18);
}

a.button:focus-visible,
button:focus-visible,
input[type=submit]:focus-visible {
    outline: none;
    border-color: var(--mh-accent);
    box-shadow: 0 0 0 3px var(--mh-focus-ring);
}

/* Submit is the primary action on every Guacamole form. */
input[type=submit] {
    background-color: var(--mh-accent);
    border-color: var(--mh-accent);
    color: var(--mh-accent-text);
}

input[type=submit]:hover {
    background-color: var(--mh-accent-hover);
    border-color: var(--mh-accent-hover);
}

input[type=submit]:active {
    background-color: var(--mh-accent-hover);
}

a.button.danger,
button.danger,
input[type=submit].danger {
    background-color: var(--mh-danger);
    border-color: var(--mh-danger);
    color: #fff;
}

a.button.danger:hover,
button.danger:hover,
input[type=submit].danger:hover {
    background-color: var(--mh-danger-hover);
    border-color: var(--mh-danger-hover);
}

button.danger:disabled,
button:disabled,
input[type=submit]:disabled {
    background-color: var(--mh-surface-3);
    border-color: var(--mh-border);
    color: var(--mh-muted);
    opacity: .7;
}

/*
 * Button glyphs live in a text-free ::before, so inverting the whole
 * pseudo-element is safe and covers the icons Guacamole ships in only one
 * (dark) colour - back, change-password, manage, reconnect.
 *
 * Elements that carry an icon *and* a label are handled further down by
 * swapping in Guacamole's light icon variants instead; a filter there would
 * invert the label along with the glyph.
 */
.button.back:before,
.button.change-password:before,
.button.home:before,
.button.logout:before,
.button.manage:before,
.button.reconnect:before,
button.back:before,
button.change-password:before,
button.home:before,
button.logout:before,
button.manage:before,
button.reconnect:before {
    filter: var(--mh-icon-filter);
}

/* ------------------------------------------------------------------ */
/* Header / navigation                                                 */
/* ------------------------------------------------------------------ */

.header {
    background: var(--mh-surface);
    border-bottom: 1px solid var(--mh-border);
    box-shadow: var(--mh-shadow);
}

.header h2,
.header h2 a {
    color: var(--mh-text);
}

.user-menu .menu-dropdown .menu-title {
    color: var(--mh-text);
    background-image: var(--mh-icon-user);
}

.menu-dropdown .menu-contents {
    background: var(--mh-surface);
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius-sm);
    box-shadow: var(--mh-shadow-lg);
    overflow: hidden;
}

.menu-dropdown .menu-contents li a {
    color: var(--mh-text);
}

.menu-dropdown .menu-contents li a:hover {
    background-color: var(--mh-accent-soft);
    color: var(--mh-text);
}

.user-menu .menu-dropdown .menu-contents li a[href="#/"] {
    background-image: var(--mh-icon-home);
}

.user-menu .menu-dropdown .menu-contents li a.logout {
    background-image: var(--mh-icon-logout);
}

/* Guacamole targets each settings destination by exact href; a prefix match at
   the same specificity, declared later, covers all of them at once. */
.user-menu .menu-dropdown .menu-contents li a[href^="#/settings"] {
    background-image: var(--mh-icon-config);
}

/* Text-free glyphs: invert rather than swap. */
.menu-dropdown .menu-indicator,
table.sorted th.sort-primary:after {
    filter: var(--mh-icon-filter);
}

/*
 * Page tabs (Settings sub-navigation, user/group editors).
 *
 * The :visited variant is essential, not defensive. Guacamole declares a
 * separate ".page-tabs .page-list li a[href]:visited { color: #000 }", which
 * out-specifies the plain rule - so every Settings tab turns black as soon as
 * it has been clicked once. A fresh profile shows the tabs correctly and a
 * daily-driver browser shows them all black.
 *
 * Note this cannot be caught by inspecting the DOM: browsers deliberately
 * report the *unvisited* style through getComputedStyle to block history
 * sniffing, so a contrast audit reads it as fine. Only real rendering shows it.
 */
.page-tabs .page-list li a[href] {
    color: var(--mh-muted);
    border-bottom: 2px solid transparent;
}

.page-tabs .page-list li a[href]:hover {
    color: var(--mh-text);
}

.page-tabs .page-list li a[href].current {
    color: var(--mh-accent);
    border-bottom-color: var(--mh-accent);
}

/*
 * Visited tabs, with LITERAL colours - deliberately not var().
 *
 * :visited is a privileged selector: to stop pages sniffing browsing history,
 * browsers restrict what it may set and how it is resolved. Chromium happens to
 * resolve custom properties there; Firefox does not, and silently leaves
 * Guacamole's "color: #000" in force - black tabs on a dark panel for anyone
 * who has clicked them. Literal values work in every engine.
 *
 * Keep in sync with --mh-muted and --mh-accent in the token blocks above.
 */
.page-tabs .page-list li a[href]:visited {
    color: #5c6672;                                  /* light --mh-muted  */
}

.page-tabs .page-list li a[href].current:visited {
    color: #2563eb;                                  /* light --mh-accent */
}

@media (prefers-color-scheme: dark) {
    :root:not([data-mhlsq-theme="light"]) .page-tabs .page-list li a[href]:visited {
        color: #98a3b3;                              /* dark --mh-muted   */
    }

    :root:not([data-mhlsq-theme="light"]) .page-tabs .page-list li a[href].current:visited {
        color: #60a5fa;                              /* dark --mh-accent  */
    }
}

:root[data-mhlsq-theme="dark"] .page-tabs .page-list li a[href]:visited {
    color: #98a3b3;
}

:root[data-mhlsq-theme="dark"] .page-tabs .page-list li a[href].current:visited {
    color: #60a5fa;
}

/* ------------------------------------------------------------------ */
/* Tables                                                              */
/* ------------------------------------------------------------------ */

table.sorted th {
    background: var(--mh-surface-2);
    color: var(--mh-text);
    font-weight: 600;
}

table.sorted td,
table.sorted th {
    border: 1px solid var(--mh-border);
    color: var(--mh-text);
}

table.sorted td {
    background: var(--mh-surface);
}

table.sorted tbody tr:hover td {
    background: var(--mh-surface-2);
}

/* ------------------------------------------------------------------ */
/* Notifications, modals, dialogs                                      */
/* ------------------------------------------------------------------ */

.notification {
    background: var(--mh-surface);
    color: var(--mh-text);
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius);
    box-shadow: var(--mh-shadow-lg);
}

.notification.error {
    background: var(--mh-surface);
    border-color: var(--mh-danger);
}

.notification .title-bar {
    background: var(--mh-surface-2);
    color: var(--mh-text);
    border-bottom: 1px solid var(--mh-border);
    box-shadow: none;
}

.modal {
    background: rgba(0, 0, 0, .55);
}

/* ------------------------------------------------------------------ */
/* Connection lists / settings                                         */
/* ------------------------------------------------------------------ */

.connection-group a,
.connection-group a:hover,
.connection-group a:visited,
.connection a,
.connection a:hover,
.connection a:visited,
.user-group a,
.user-group a:hover,
.user-group a:visited,
.user a,
.user a:hover,
.user a:visited {
    color: var(--mh-text);
}

/* Protocol / group glyphs are standalone elements with no text of their own,
   so inverting them in dark mode is safe. */
.connection .icon,
.connection-group .icon,
.user .icon,
.user-group .icon {
    filter: var(--mh-icon-filter);
}

.recent-connections .connection {
    background: var(--mh-surface);
    border: 1px solid var(--mh-border);
}

.recent-connections .connection:hover {
    background: var(--mh-accent-soft);
    border-color: var(--mh-accent);
}

.list-item.focused .caption,
.file-browser .list-item.focused .caption {
    background: var(--mh-accent-soft);
    border: 1px solid var(--mh-accent);
}

.list-item .caption:hover {
    background: var(--mh-surface-2);
}

.settings {
    color: var(--mh-text);
}

.section-header,
.settings h2 {
    color: var(--mh-text);
    border-bottom: 1px solid var(--mh-border);
}

.filter .search-string {
    background-image: var(--mh-magnifier);
    background-size: 1.15em;
    background-position: .6em center;
    padding-left: 2.3em;
}

/* ------------------------------------------------------------------ */
/* In-session menu (guac-menu) and file browser                        */
/* ------------------------------------------------------------------ */

#guac-menu,
.menu-body {
    background: var(--mh-surface);
    color: var(--mh-text);
}

#guac-menu .header {
    background: var(--mh-surface-2);
}

#filesystem-menu .header.breadcrumbs {
    background: var(--mh-surface-2);
    border-bottom: 1px solid var(--mh-border);
}

.menu-section .header {
    color: var(--mh-muted);
}

/* The clipboard editor shown in the in-session menu. */
.clipboard {
    background: var(--mh-surface);
    color: var(--mh-text);
}

/*
 * Guacamole parks a 1em helper textarea half off-screen to drive clipboard
 * integration. It is hard-coded to #fff, which was invisible on the stock white
 * UI but shows up as a white sliver against a dark page - so match the page
 * background instead of a surface colour.
 */
.clipboard-service-target {
    background: var(--mh-bg);
    color: var(--mh-bg);
    /* Otherwise the browser paints its resize grip as a bright speck. */
    resize: none;
}

/* Warning glyphs sit in text-free pseudo-elements, so inverting them leaves
   the adjacent heading untouched. */
.fatal-page-error h1:before,
#connection-warning:before {
    filter: var(--mh-icon-filter);
}

/* ------------------------------------------------------------------ */
/* List items, tabs and hover states                                   */
/* ------------------------------------------------------------------ */

/*
 * Connection and group names render as a nested <span class="name">, and
 * ".list-item .name { color: #000 }" out-specifies the colour set on the
 * surrounding <a>. This is what left VM names black-on-black in dark mode.
 */
.list-item .name {
    color: var(--mh-text);
}

/*
 * Guacamole uses one pale green (#cda) for every hover state. It reads as a
 * bright slab against a dark UI, so route them all through the accent tint.
 */
.list-item:not(.selected) .caption:hover,
.settings table.session-list tr.session:hover,
.page-tabs .page-list li a[href]:hover,
.section-tabs li a:hover,
#filesystem-menu .header.breadcrumbs .breadcrumb:hover {
    background-color: var(--mh-accent-soft);
    color: var(--mh-text);
}

/* .section-tabs shares its colour rule with .page-tabs but not its selector,
   so it needs listing explicitly. */
.section-tabs li a {
    color: var(--mh-muted);
}

.section-tabs li a.current,
.section-tabs li a.current:hover,
.page-tabs .page-list li a[href].current,
.page-tabs .page-list li a[href].current:hover {
    background: var(--mh-surface-2);
    color: var(--mh-accent);
}

/* "New connection" / "New group" / "New sharing profile" placeholders. */
.settings.connections .connection-list .new-connection a,
.settings.connections .connection-list .new-connection a:hover,
.settings.connections .connection-list .new-connection a:visited,
.settings.connections .connection-list .new-connection-group a,
.settings.connections .connection-list .new-connection-group a:hover,
.settings.connections .connection-list .new-connection-group a:visited,
.settings.connections .connection-list .new-sharing-profile a,
.settings.connections .connection-list .new-sharing-profile a:hover,
.settings.connections .connection-list .new-sharing-profile a:visited {
    color: var(--mh-text);
}

/*
 * Empty-state text ("No recent connections."). Stock styling is white at 50%
 * alpha over a further 50% opacity, leaning on a dark text-shadow to stay
 * legible - which only works over a mid-dark backdrop and washes out entirely
 * on a light one.
 */
.placeholder {
    color: var(--mh-muted);
    text-shadow: none;
    opacity: 1;
}

.related-objects .abbreviated-related-objects ul li {
    background: var(--mh-surface-2);
    border-color: var(--mh-border);
    color: var(--mh-text);
}

/* Read-only notices ship as a solid amber block with dark text. */
.manage-user .notice.read-only,
.manage-user-group .notice.read-only {
    background: var(--mh-warning-soft);
    border: 1px solid var(--mh-warning);
    color: var(--mh-text);
}

/* ------------------------------------------------------------------ */
/* Home screen: connections as cards                                   */
/*                                                                     */
/* Markup is fixed by AngularJS:                                       */
/*   .group-list-page > .list-item > .connection > .caption            */
/*     > ng-include > a.home-connection > .icon.type + span.name       */
/* so the grid goes on the page wrapper and the card on the anchor.    */
/* ------------------------------------------------------------------ */

.all-connections .group-list-page {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: .7rem;
    padding: 1rem;
}

.all-connections .list-item,
.all-connections .list-item .caption,
.all-connections .list-item ng-include {
    display: block;
    padding: 0;
    border: none;
}

/* The generic list hover would tint the caption behind the card. */
.all-connections .list-item:not(.selected) .caption:hover {
    background: transparent;
}

.all-connections .list-item a.home-connection {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .85rem .95rem;
    background: var(--mh-surface);
    border: 1px solid var(--mh-border);
    border-radius: var(--mh-radius);
    box-shadow: var(--mh-shadow);
    transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

.all-connections .list-item a.home-connection:hover {
    border-color: var(--mh-accent);
    box-shadow: var(--mh-shadow-lg);
    transform: translateY(-1px);
}

.all-connections .list-item .name {
    font-weight: 600;
    font-size: .95rem;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * Protocol glyphs are masked rather than filtered here, so they take the accent
 * colour directly. Filtering would work too, but only as an inversion - and it
 * would fight any background applied to the same element.
 */
.all-connections .list-item .icon.type {
    flex: 0 0 auto;
    width: 1.7rem;
    height: 1.7rem;
    background-image: none;
    background-color: var(--mh-accent);
    filter: none;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-image: url(images/protocol-icons/guac-plug.svg);
            mask-image: url(images/protocol-icons/guac-plug.svg);
}

.all-connections .list-item .icon.type.rdp,
.all-connections .list-item .icon.type.vnc {
    -webkit-mask-image: url(images/protocol-icons/guac-monitor.svg);
            mask-image: url(images/protocol-icons/guac-monitor.svg);
}

.all-connections .list-item .icon.type.ssh,
.all-connections .list-item .icon.type.telnet,
.all-connections .list-item .icon.type.kubernetes {
    -webkit-mask-image: url(images/protocol-icons/guac-text.svg);
            mask-image: url(images/protocol-icons/guac-text.svg);
}

/* ------------------------------------------------------------------ */
/* History, sessions and pagination                                    */
/* ------------------------------------------------------------------ */

/* Hard-coded #00e; out-specifies the generic anchor rule and disappears
   against a dark surface. */
.settings.connectionHistory a.history-session-recording {
    color: var(--mh-accent);
}

.settings.connectionHistory a.history-session-recording:after {
    filter: var(--mh-icon-filter);
}

/* Disabled users are greyed with a fixed "grey" that sits too close to a dark
   background. */
.settings.users table.user-list tr.user.disabled,
.settings.users table.user-list tr.user.disabled td.username a[href] {
    color: var(--mh-muted);
}

.pager .set-page.current {
    background: var(--mh-accent-soft);
    border: 1px solid var(--mh-accent);
    color: var(--mh-text);
}

.pager .icon.first-page,
.pager .icon.prev-page,
.pager .icon.next-page,
.pager .icon.last-page {
    filter: var(--mh-icon-filter);
}

/* ------------------------------------------------------------------ */
/* In-session surfaces                                                 */
/* ------------------------------------------------------------------ */

/* The sliding sidebar menu; its stock inset white highlight reads as a seam
   against a dark panel. */
.menu {
    background: var(--mh-surface);
    color: var(--mh-text);
    box-shadow: 1px 0 8px rgba(0, 0, 0, .45);
}

/* div.location shares Guacamole's input rule but is not an <input>, so the
   form-control block above does not reach it. */
div.location,
.location-chooser .dropdown {
    background: var(--mh-surface);
    color: var(--mh-text);
    border-color: var(--mh-border);
}

.transfer-manager,
.transfer.error {
    background: var(--mh-surface);
    color: var(--mh-text);
}

.logged-out-modal guac-modal {
    background: var(--mh-bg);
}

.terminal-color-scheme-field .custom-color-scheme {
    background: var(--mh-surface-2);
    border-color: var(--mh-border);
}

/* ------------------------------------------------------------------ */
/* Theme toggle (injected by branding.js)                              */
/* ------------------------------------------------------------------ */

.mh-theme-toggle {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 20;
    width: 2.6rem;
    height: 2.6rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--mh-border-strong);
    background: var(--mh-surface);
    color: var(--mh-muted);
    box-shadow: var(--mh-shadow);
    cursor: pointer;
    transition: color .12s ease, border-color .12s ease, background-color .12s ease;
}

.mh-theme-toggle:hover {
    color: var(--mh-accent);
    border-color: var(--mh-accent);
    background: var(--mh-surface);
}

.mh-theme-toggle svg {
    width: 1.15rem;
    height: 1.15rem;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Only one of the two glyphs is shown, depending on the active theme. */
.mh-theme-toggle .mh-icon-moon { display: block; }
.mh-theme-toggle .mh-icon-sun  { display: none; }

:root[data-mhlsq-theme="dark"] .mh-theme-toggle .mh-icon-moon { display: none; }
:root[data-mhlsq-theme="dark"] .mh-theme-toggle .mh-icon-sun  { display: block; }

@media (prefers-color-scheme: dark) {
    :root:not([data-mhlsq-theme="light"]) .mh-theme-toggle .mh-icon-moon { display: none; }
    :root:not([data-mhlsq-theme="light"]) .mh-theme-toggle .mh-icon-sun  { display: block; }
}

/* The toggle would float over the remote display during a session. */
body.client .mh-theme-toggle {
    display: none;
}

@media print {
    .mh-theme-toggle { display: none; }
}


/* MHLSQ workspace: slate surfaces, blue connection glyphs, quiet chrome. */
.home-view, .login-ui, .settings, #guac-menu { font-family: 'Inter', sans-serif; }
.home-view .connection-list-ui {
    display: flex; flex-direction: column; max-width: 1120px;
    margin: 0 auto; padding: 36px 40px 56px; box-sizing: border-box;
}
.mh-masthead { order: 0; margin-bottom: 32px; }
.mh-home-brand { display: flex; align-items: center; gap: 18px; margin-bottom: 44px; }
.mh-home-mark {
    display: block; width: 100px; height: 25px; background: var(--mh-accent);
    mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20240%2060%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M20%2010h10l10%2030%2010-30h10v40h-10V25l-10%2025-10-25v25H20V10z%22%2F%3E%3Cpath%20d%3D%22M70%2010h10v15h20V10h10v40h-10V35H80v15H70V10z%22%2F%3E%3Cpath%20d%3D%22M120%2010h10v30h20v10h-30V10z%22%2F%3E%3Cpath%20d%3D%22M160%2010h25v10h-25c-2.8%200-5%202.2-5%205v0c0%202.8%202.2%205%205%205h15c5.5%200%2010%204.5%2010%2010v0c0%205.5-4.5%2010-10%2010h-25v-10h25c2.8%200-5-2.2-5-5v0c0-2.8-2.2-5-5-5h-15c-5.5%200-10-4.5-10-10v0c0-5.5%204.5-10%2010-10z%22%2F%3E%3Cpath%20d%3D%22M210%2010c8.3%200%2015%206.7%2015%2015v10c0%208.3-6.7%2015-15%2015h-10c-8.3%200-15-6.7-15-15V25c0-8.3%206.7-15%2015-15h10zm0%2010h-10c-2.8%200-5%202.2-5%205v10c0%202.8%202.2%205%205%205h10c2.8%200%205-2.2%205-5V25c0-2.8-2.2-5-5-5z%22%2F%3E%3Cpath%20d%3D%22M215%2045l15%2015%22%20stroke%3D%22%23000%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E') center / contain no-repeat;
    -webkit-mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20240%2060%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M20%2010h10l10%2030%2010-30h10v40h-10V25l-10%2025-10-25v25H20V10z%22%2F%3E%3Cpath%20d%3D%22M70%2010h10v15h20V10h10v40h-10V35H80v15H70V10z%22%2F%3E%3Cpath%20d%3D%22M120%2010h10v30h20v10h-30V10z%22%2F%3E%3Cpath%20d%3D%22M160%2010h25v10h-25c-2.8%200-5%202.2-5%205v0c0%202.8%202.2%205%205%205h15c5.5%200%2010%204.5%2010%2010v0c0%205.5-4.5%2010-10%2010h-25v-10h25c2.8%200-5-2.2-5-5v0c0-2.8-2.2-5-5-5h-15c-5.5%200-10-4.5-10-10v0c0-5.5%204.5-10%2010-10z%22%2F%3E%3Cpath%20d%3D%22M210%2010c8.3%200%2015%206.7%2015%2015v10c0%208.3-6.7%2015-15%2015h-10c-8.3%200-15-6.7-15-15V25c0-8.3%206.7-15%2015-15h10zm0%2010h-10c-2.8%200-5%202.2-5%205v10c0%202.8%202.2%205%205%205h10c2.8%200%205-2.2%205-5V25c0-2.8-2.2-5-5-5z%22%2F%3E%3Cpath%20d%3D%22M215%2045l15%2015%22%20stroke%3D%22%23000%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E') center / contain no-repeat;
}
.mh-brand-caption { border-left: 1px solid var(--mh-border-strong); padding-left: 18px; font-size: 12px; color: var(--mh-muted); }
.mh-masthead h1 { margin: 0 0 10px; font-size: clamp(28px, 4vw, 40px); font-weight: 650; letter-spacing: -.045em; line-height: 1.1; text-align: left; }
.mh-masthead p { margin: 0; font-size: 14px; color: var(--mh-muted); line-height: 1.6; }
.home-view .connection-list-ui > .header {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    padding: 0 0 16px; background: none; box-shadow: none; border: 0;
}
.home-view .connection-list-ui > .header h2 { margin: 0; padding: 0; text-transform: none; font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.home-view .header:has(#section-header-all-connections) { order: 1; }
.home-view .header:has(#section-header-recent-connections) { order: 3; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--mh-border); }
.home-view .header:has(#section-header-recent-connections) .user-menu { display: none; }
.home-view .connection-list-ui > guac-recent-connections,
.home-view .connection-list-ui > .recent-connections { order: 4; }
.home-view .connection-list-ui > .all-connections { order: 2; margin: 0; padding: 0; }
.home-view .header .filter { margin-left: auto; width: 230px; max-width: 100%; background: none; }
.home-view .header .filter input.search-string {
    box-sizing: border-box; width: 100%; border: 1px solid var(--mh-border); border-radius: 9px;
    background-color: var(--mh-surface); font: inherit; font-size: 13px; height: 40px; padding-left: 34px;
}
.home-view .header .user-menu { margin-left: 0; min-width: 0; max-width: 240px; }
.home-view .connection-list-ui > .header:has(#section-header-all-connections) div.user-menu { display: block; }
.home-view .user-menu .menu-dropdown { border: 0; }
.home-view .user-menu .menu-title {
    box-sizing: border-box; max-width: 240px; font-size: 12px; font-weight: 500;
    border: 1px solid var(--mh-border); border-radius: 9px; background-color: var(--mh-surface);
    padding-right: 32px; overflow: hidden; text-overflow: ellipsis;
}
.home-view .menu-dropdown .menu-contents { margin-top: 6px; }
.mh-home-tools { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-bottom: 16px; }
.mh-workspaces-label { font-size: 11px; color: var(--mh-muted); }
.mh-view-options { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--mh-border); border-radius: 8px; background: var(--mh-surface-2); }
.mh-view-options button {
    appearance: none; -webkit-appearance: none; margin: 0; border: 1px solid transparent; border-radius: 5px;
    background: transparent; color: var(--mh-muted); box-shadow: none; padding: 5px 12px;
    font: inherit; font-size: 12px; min-width: 52px; line-height: 1.4;
}
.mh-view-options button:hover { color: var(--mh-text); background: var(--mh-surface-3); }
.mh-view-options button[aria-pressed='true'] { color: var(--mh-text); background: var(--mh-surface); border-color: var(--mh-border); box-shadow: var(--mh-shadow); }
.home-view .all-connections .group-list-page { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; padding: 0; }
.home-view .all-connections .list-item:has(> .connection-group) { grid-column: 1 / -1; }
.home-view .all-connections .connection-group > .children { padding-top: 16px; }
.home-view .all-connections .list-item a.home-connection {
    display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 22px 16px;
    min-height: 154px; box-sizing: border-box; padding: 24px; border: 1px solid var(--mh-border);
    border-radius: 14px; background: var(--mh-surface); box-shadow: 0 2px 5px rgba(0,0,0,.025);
    transition: border-color .15s ease, background-color .15s ease;
}
.home-view .all-connections .list-item a.home-connection:hover { transform: none; border-color: var(--mh-accent); background: var(--mh-surface-2); box-shadow: none; }
.home-view .all-connections .list-item .icon.type { width: 30px; height: 30px; margin: 0; }
.home-view .all-connections .list-item .name { font: inherit; font-size: 16px; font-weight: 600; white-space: normal; overflow-wrap: anywhere; letter-spacing: -.025em; line-height: 1.5; }
.mh-card-meta { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--mh-border); }
.mh-protocol { font: 11px ui-monospace, 'SFMono-Regular', Consolas, monospace; color: var(--mh-muted); letter-spacing: .06em; }
.mh-open-label { color: var(--mh-accent); font-size: 12px; font-weight: 550; }
.home-view .all-connections.mh-compact .group-list-page { grid-template-columns: 1fr; gap: 8px; }
.home-view .all-connections.mh-compact .list-item a.home-connection { grid-template-columns: 28px minmax(0,1fr) auto; gap: 16px; padding: 16px 20px; min-height: 64px; border-radius: 10px; }
.home-view .all-connections.mh-compact .list-item .icon.type { width: 22px; height: 22px; }
.home-view .all-connections.mh-compact .mh-card-meta { grid-column: auto; border: 0; padding: 0; gap: 24px; }
.home-view div.recent-connections { margin: 0; text-align: left; }
.home-view .recent-connections .placeholder { margin: 0; padding: 24px; border: 1px dashed var(--mh-border-strong); border-radius: 12px; font-size: 13px; font-weight: 400; text-align: center; }
.home-view div.recent-connections div.connection { margin: 0 16px 16px 0; border-radius: 12px; box-shadow: none; }
.mh-shortcuts { order: 5; margin-top: 30px; color: var(--mh-muted); font-size: 12px; }
.mh-shortcuts summary { width: fit-content; cursor: pointer; padding: 8px 0; font-weight: 500; }
.mh-shortcuts summary:hover { color: var(--mh-accent); }
.mh-shortcuts-body { max-width: 650px; padding: 8px 0; }
.mh-shortcuts-body p { display: flex; align-items: baseline; gap: 16px; line-height: 1.6; }
.mh-shortcuts kbd { flex: 0 0 150px; font: 11px ui-monospace, 'SFMono-Regular', Consolas, monospace; color: var(--mh-text); }
.login-ui:before { background: none; }
.login-ui .login-dialog { border-radius: 18px; border: 1px solid var(--mh-border); padding: 38px; width: 410px; max-width: calc(100vw - 40px); box-sizing: border-box; box-shadow: 0 16px 56px rgba(0,0,0,.07); }
.login-ui .login-dialog .logo { margin: 0 auto 12px; width: 112px; height: 28px; }
.login-ui .login-dialog .version .app-name { font-size: 12px; }
.mh-login-intro { margin: 26px 0 28px; text-align: center; }
.mh-login-intro h1 { font-size: 25px; font-weight: 600; letter-spacing: -.045em; margin: 0 0 8px; }
.mh-login-intro p { font-size: 13px; color: var(--mh-muted); margin: 0; }
.mh-masthead h1, .mh-login-intro h1 { padding: 0; }
.login-ui .login-dialog input[type=text], .login-ui .login-dialog input[type=password] {
    border: 1px solid var(--mh-border); border-radius: 8px;
    background: var(--mh-surface-2); color: var(--mh-text);
    padding: 12px; font-family: inherit; font-size: 14px;
}
.login-ui .login-fields .labeled-field { margin-bottom: 16px; }
.login-ui .login-fields .labeled-field input { box-sizing: border-box; min-height: 44px; font-size: 14px; background: var(--mh-surface-2); }
.login-ui .login-dialog input[type=submit] { min-height: 44px; font-weight: 600; border-radius: 9px; }
.login-ui .login-dialog .buttons { margin-top: 24px; }
button.mh-theme-toggle { appearance: none; -webkit-appearance: none; border-radius: 12px; background-image: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid var(--mh-accent); outline-offset: 3px; }
.settings .section-header { padding-bottom: 12px; margin-top: 24px; font-size: 16px; }
.settings table.sorted td, .settings table.sorted th { padding: 10px 12px; }
.page-tabs .page-list li a[href] { padding-top: 14px; padding-bottom: 14px; }
#guac-menu .menu-section { padding-bottom: 16px; }
#guac-menu .menu-section > .header { font-size: 11px; letter-spacing: .045em; }
#guac-menu .clipboard textarea { min-height: 120px; line-height: 1.6; }
@media (max-width: 700px) {
    .home-view .connection-list-ui { padding: 24px 20px 64px; }
    .mh-home-brand { margin-bottom: 32px; }
    .mh-masthead { margin-bottom: 26px; }
    .home-view .connection-list-ui > .header { gap: 12px; }
    .home-view .header .filter { order: 3; width: 100%; flex-basis: 100%; }
    .home-view .header .user-menu { margin-left: auto; max-width: 48%; }
    .home-view .header .user-menu .menu-dropdown { display: block; width: 100%; max-width: 100%; min-width: 0; }
    .home-view .header .user-menu .menu-title { width: 100%; max-width: 100%; white-space: nowrap; }
    .home-view .menu-dropdown .menu-contents { right: 0; left: auto; max-width: calc(100vw - 40px); }
    .home-view .all-connections .group-list-page { grid-template-columns: minmax(0,1fr); }
    .home-view .all-connections .list-item a.home-connection { padding: 20px; min-height: 140px; }
    .home-view .all-connections.mh-compact .list-item a.home-connection { grid-template-columns: 24px minmax(0,1fr) auto; padding: 14px; gap: 12px; }
    .home-view .all-connections.mh-compact .mh-open-label { display: none; }
    .home-view .all-connections.mh-compact .list-item .name { font-size: 14px; }
    .mh-shortcuts-body p { flex-direction: column; gap: 4px; }
    .mh-shortcuts kbd { flex-basis: auto; }
    .login-ui .login-dialog { padding: 30px 24px; }
    .page-tabs .page-list { overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .home-view .all-connections .list-item a.home-connection, .mh-theme-toggle, input, select, textarea { transition: none; }
}

#mh-performance p, #mh-performance output { font-size: 12px; line-height: 1.6; }
#mh-performance output { display: block; color: var(--mh-muted); }
#mh-performance select { max-width: 100%; margin-top: 6px; }
#mh-performance button { font-size: 12px; margin: 4px 2px 4px 0; }