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

}
/*
 * z0nk3r Dark Theme for Apache Guacamole 1.6.0
 *
 * Palette lifted from https://z0nk3r.github.io/assets/css/style.css (:root).
 *
 * Loaded via the extension CSS servlet (app.css), which index.html includes
 * AFTER the main application bundle. Overrides therefore win at equal
 * specificity -- !important is used only where an upstream rule is more
 * specific than what we can restate cleanly.
 *
 * Sections mirror the upstream layout under app/<area>/styles/ so this file
 * stays diffable against Guacamole's own sources.
 */

:root {

    /* Core palette (from the site's :root) */
    --z-bg:            #060000;
    --z-fg:            #fdf6e3;
    --z-fg-rgb:        253, 246, 227;

    /* Translucent layers, mirroring the site's surface/border scale */
    --z-surface-1:     rgba(253, 246, 227, 0.03);
    --z-surface-2:     rgba(253, 246, 227, 0.06);
    --z-surface-3:     rgba(253, 246, 227, 0.10);
    --z-surface-4:     rgba(253, 246, 227, 0.16);
    --z-border:        rgba(253, 246, 227, 0.10);
    --z-border-strong: rgba(253, 246, 227, 0.18);
    --z-muted:         rgba(253, 246, 227, 0.60);
    --z-faint:         rgba(253, 246, 227, 0.38);

    /* Semantic accents, drawn from the site's syntax-highlight colors.
       Guacamole needs these; the site itself is monochrome. */
    --z-code:          #deca9f;

    /* Opaque field fill, tuned to sit just above the login dialog's #141010.
       Must NOT be translucent -- see the login section for why. */
    --z-field:         #1c1717;

    /* Corner radii, matching the site's scale */
    --z-radius-sm:     0.25rem;
    --z-radius-md:     0.375rem;
    --z-radius-xl:     0.75rem;
    --z-radius-full:   9999px;
    --z-green:         #abd26e;
    --z-green-dim:     rgba(171, 210, 110, 0.18);
    --z-red:           #ff6568;
    --z-red-dim:       rgba(255, 101, 104, 0.16);
    --z-amber:         #f4c466;
    --z-amber-dim:     rgba(244, 196, 102, 0.16);
    --z-teal:          #6eccbf;

    /* Let native widgets (scrollbars, selects, date pickers) render dark */
    color-scheme: dark;

}

/* Scrollbars ------------------------------------------------------------- */

* {
    scrollbar-color: var(--z-surface-4) transparent;
}

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--z-surface-4);
    border-radius: 6px;
    border: 3px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-clip: content-box; background-color: rgba(253, 246, 227, 0.28); }

/* Text selection --------------------------------------------------------- */

::selection { background: var(--z-green-dim); color: var(--z-fg); }

/* =======================================================================
 * index/ -- global chrome
 * ======================================================================= */

/* ui.css */

body {
    background: var(--z-bg);
    color: var(--z-fg);
}

.list-item .name  { color: var(--z-fg); }
.list-item .usage { color: var(--z-muted); }

.list-item.selected                       { background: var(--z-green-dim); }
.list-item:not(.selected) .caption:hover  { background: var(--z-surface-2); }
.disabled .list-item:not(.selected):hover { background: inherit; }

.expandable.expanded > .children > .list-item:before { border-left:   1px solid var(--z-border-strong); }
.expandable.expanded > .children > .list-item:after  { border-bottom: 1px solid var(--z-border-strong); }

/* headers.css */

.header {
    background: var(--z-surface-1);
    border-bottom: 1px solid var(--z-border);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.header:not(.ng-hide) ~ * .header,
.header:not(.ng-hide) ~ .header {
    border-top: 1px solid var(--z-border);
}

.header .filter input {
    border-left: 1px solid var(--z-border);
    background-color: transparent;
    color: var(--z-fg);
}

h1, h2, h3, h4 { color: var(--z-fg); }

/* input.css */

div.location,
input[type=text],
input[type=email],
input[type=number],
input[type=password],
input[type=search],
input[type=date],
input[type=time],
textarea,
select {
    background: var(--z-surface-2);
    border: 1px solid var(--z-border-strong);
    color: var(--z-fg);
}

input[type=text]:focus,
input[type=email]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=search]:focus,
textarea:focus,
select:focus {
    border-color: var(--z-green);
    outline: none;
}

input::placeholder, textarea::placeholder { color: var(--z-faint); }

input[type=text]:disabled,
input[type=password]:disabled,
textarea:disabled,
select:disabled {
    color: var(--z-faint);
    background: var(--z-surface-1);
}

/* buttons.css -- upstream buttons are already dark (#3C3C3C); harmonize
   them to the palette rather than inverting anything. */

input[type="submit"], button, a.button {
    background-color: var(--z-surface-3);
    border: 1px solid var(--z-border-strong);
    color: var(--z-fg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

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

input[type="submit"]:active, button:active, a.button:active {
    background-color: var(--z-surface-2);
    box-shadow: inset 1px 1px 0.25em rgba(0, 0, 0, 0.5);
}

button.danger, a.button.danger          { background: var(--z-red-dim); border-color: var(--z-red); color: var(--z-red); }
button.danger:hover, a.button.danger:hover  { background: rgba(255, 101, 104, 0.28); color: var(--z-fg); }
button.danger:active, a.button.danger:active { background: rgba(255, 101, 104, 0.36); }

input[type="submit"]:disabled, button:disabled, button.danger:disabled {
    background-color: var(--z-surface-1);
    border-color: var(--z-border);
    color: var(--z-faint);
}

/* lists.css */

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

.recent-connections .connection:hover { background: var(--z-surface-2); }

.recent-connections .connection .thumbnail > * {
    border: 1px solid var(--z-border-strong);
    background: #000;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.6);
}

/* sorted-tables.css */

table.sorted th { background: var(--z-surface-2); color: var(--z-fg); }
table.sorted th, table.sorted td { border: 1px solid var(--z-border); }
table.sorted tr:hover td { background: var(--z-surface-1); }

/* status.css / logged-out.css / automatic-login-rejected.css */

.global-status-modal guac-modal { background: rgba(0, 0, 0, 0.7); }

.logged-out-modal guac-modal,
.automatic-login-rejected-modal guac-modal {
    background: var(--z-bg);
}

/* other-connections.css -- already dark upstream; only soften the borders */

#other-connections .client-panel {
    border: 1px solid var(--z-border-strong);
    background: rgba(0, 0, 0, 0.5);
}

#other-connections button.close-other-connection img { background: var(--z-red); }
#other-connections button.close-other-connection:hover img { background: #ff8e5c; }

/* =======================================================================
 * login/
 * ======================================================================= */

div.login-ui { background: var(--z-bg); }

/*
 * The login fields have no placeholder attribute. Their label is a
 * .field-header positioned absolutely BEHIND the input (z-index: -1,
 * opacity: 0.5), and upstream hides it by painting the input an opaque
 * white once the field is focused or non-empty.
 *
 * That makes an opaque background load-bearing here: a translucent fill
 * lets the label show through and it collides with the typed value. This
 * is the one place in the theme where a surface token must not be used.
 *
 * Only the login page does this -- the labeled-field pattern in settings,
 * preferences, connection parameters and the client modal renders its
 * .field-header as an ordinary table cell beside the input.
 */
.login-ui .login-dialog .login-fields input {
    border: 1px solid var(--z-border-strong);
    background: var(--z-field);
    color: var(--z-fg);
}

/* Empty and unfocused: stay transparent so the label reads through. */
.login-ui .login-fields .labeled-field.empty input { background: transparent; }

/* Focused: opaque again, covering the label while typing. */
.login-ui .login-fields .labeled-field input:focus { background: var(--z-field); }

.login-ui .login-fields .labeled-field .field-header { color: var(--z-fg); }

.login-ui.error p.login-error {
    background: var(--z-red-dim);
    border: 1px solid var(--z-red);
    color: var(--z-red);
}

.login-ui .login-dialog .version .version-number {
    background: var(--z-green-dim);
    color: var(--z-green);
    border-radius: var(--z-radius-full);
}

/*
 * Rounded corners, on the site's radius scale.
 *
 * The dialog element carries BOTH .login-dialog and .notification, so its
 * panel is painted by the .notification rule above. Radius is applied via
 * .login-ui .login-dialog to keep it scoped to the login page -- notifications
 * elsewhere (client status modal, file transfers) stay square.
 */
.login-ui .login-dialog {
    border-radius: var(--z-radius-xl);
}

.login-ui .login-dialog .login-fields input,
.login-ui .login-dialog input[type="submit"],
.login-ui .login-dialog button,
.login-ui .login-dialog a.button {
    border-radius: var(--z-radius-md);
}

.login-ui.error p.login-error {
    border-radius: var(--z-radius-md);
}

/* =======================================================================
 * home/ and navigation/
 * ======================================================================= */

div.recent-connections div.connection { border: 1px solid var(--z-border); }

/* navigation/menu.css */

.menu-dropdown {
    background: var(--z-surface-1);
    border-left: 1px solid var(--z-border);
}

.menu-dropdown:hover { background: var(--z-surface-2); }
.menu-dropdown.open, .menu-dropdown.open:hover { background: var(--z-surface-4); }

.menu-dropdown .menu-contents {
    background: #141010;
    border-left:   1px solid var(--z-border);
    border-bottom: 1px solid var(--z-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.menu-dropdown .menu-contents li a { color: var(--z-fg); }
.menu-dropdown .menu-contents li a:hover { background-color: var(--z-surface-3); }
.menu-dropdown .menu-contents li a.current,
.menu-dropdown .menu-contents li a.current:hover { background-color: transparent; }

.menu-dropdown .menu-contents li a.danger { color: var(--z-red); background-color: transparent; }
.menu-dropdown .menu-contents li a.danger:hover { background-color: var(--z-red-dim); }

/* navigation/tabs.css */

.page-tabs .page-list ul, .section-tabs ul {
    background: var(--z-surface-1);
    border-bottom: 1px solid var(--z-border);
}

.page-tabs .page-list li a[href], .section-tabs li a,
.page-tabs .page-list li a[href]:visited { color: var(--z-fg); }

.page-tabs .page-list li a[href]:hover, .section-tabs li a:hover { background-color: var(--z-surface-3); }

.page-tabs .page-list li a[href].current,
.page-tabs .page-list li a[href].current:hover,
.section-tabs li a.current,
.section-tabs li a.current:hover { background: var(--z-surface-4); }

/* navigation/user-menu.css */

.user-menu .menu-dropdown .menu-contents .profile { border-bottom: 1px solid var(--z-border-strong); }

/* =======================================================================
 * list/ and form/
 * ======================================================================= */

.pager .set-page.current {
    background: var(--z-surface-3);
    border: 1px solid var(--z-border);
}

.redirect-field-container { background: var(--z-bg); color: var(--z-fg); }

.terminal-color-scheme-field .custom-color-scheme {
    background: var(--z-surface-1);
    border: 1px solid var(--z-border-strong);
}

.terminal-color-scheme-field .guac-input-color { color: var(--z-bg); }
.terminal-color-scheme-field .guac-input-color.dark { color: var(--z-fg); }

.terminal-color-scheme-field .custom-color-scheme-hide-details,
.terminal-color-scheme-field .custom-color-scheme-show-details { color: var(--z-teal); }

/* =======================================================================
 * manage/ and settings/
 * ======================================================================= */

.attributes .form h3 {
    background: var(--z-surface-1);
    border-top:    1px solid var(--z-border);
    border-bottom: 1px solid var(--z-border);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.connection-parameters .form .fields,
.preferences .form .fields { border-left: 3px solid var(--z-border); }

.location-chooser .dropdown {
    background: #141010;
    border: 1px solid var(--z-border-strong);
}

.manage-user .notice.read-only,
.manage-user-group .notice.read-only {
    background: var(--z-amber-dim);
    border: 1px solid var(--z-amber);
    color: var(--z-amber);
}

.related-objects .abbreviated-related-objects ul li {
    background: var(--z-surface-2);
    border: 1px solid var(--z-border);
}

.related-objects .all-related-objects { border-top: 1px solid var(--z-border); }

.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(--z-fg);
}

.settings.connectionHistory a.history-session-recording { color: var(--z-teal); }

.settings table.session-list tr.session:hover { background: var(--z-surface-2); }

.settings.users table.user-list tr.user.disabled,
.settings.users table.user-list tr.user.disabled td.username a[href],
.settings.user-groups table.user-group-list tr.user-group.disabled,
.settings.user-groups table.user-group-list tr.user-group.disabled td.user-group-name a[href] {
    color: var(--z-faint);
}

/* settings/history-player.css -- already black upstream; align the accents */

.settings.connectionHistoryPlayer { background: #000; color: var(--z-fg); }

.settings.connectionHistoryPlayer .guac-player-button {
    border: 2px solid var(--z-border-strong);
    background: var(--z-bg);
    color: var(--z-fg);
}

.settings.connectionHistoryPlayer .guac-player-controls .heat-map .legend .key-events::after   { background-color: var(--z-green); }
.settings.connectionHistoryPlayer .guac-player-controls .heat-map .legend .frame-events::after { background-color: var(--z-muted); }
.settings.connectionHistoryPlayer .heat-map svg.key-events path   { fill: rgba(171, 210, 110, 0.5); }
.settings.connectionHistoryPlayer .heat-map svg.frame-events path { fill: rgba(253, 246, 227, 0.35); }

/* =======================================================================
 * client/ -- in-session chrome. The remote display itself is never touched.
 * ======================================================================= */

.menu { background: #141010; box-shadow: 1px 0 6px rgba(0, 0, 0, 0.7); }

.client .menu .header h2 { color: var(--z-fg); }

#guac-menu #devices .device,
#guac-menu #share-links {
    border: 1px solid var(--z-border);
    background: var(--z-surface-2);
}

#guac-menu #devices .device:hover { border-color: var(--z-green); }

.connection-select-menu .menu-dropdown .menu-contents .filter input {
    border-bottom: 1px solid var(--z-border);
    color: var(--z-fg);
}

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

#filesystem-menu .header.breadcrumbs .breadcrumb:hover { background-color: var(--z-surface-3); }

.file-browser .list-item.focused .caption {
    border: 1px dotted var(--z-border-strong);
    background: var(--z-green-dim);
}

.transfer-manager { background: #141010; color: var(--z-fg); }

#file-transfer-dialog .transfer-manager {
    border: 1px solid var(--z-border-strong);
    box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.7);
}

.transfer.in-progress .progress { background-color: var(--z-surface-2); }
.transfer .progress .bar        { background: var(--z-green); }
.transfer.savable .filename     { color: var(--z-teal); }
.transfer.error                 { background: var(--z-red-dim); color: var(--z-red); }

#connection-warning {
    background: var(--z-amber-dim);
    border-left: 2em solid var(--z-amber);
    color: var(--z-fg);
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}

.client-zoom .client-zoom-out, .client-zoom .client-zoom-in {
    border: 1px solid var(--z-border-strong);
    background: var(--z-surface-2);
}

.client-zoom .client-zoom-out:hover, .client-zoom .client-zoom-in:hover {
    border-color: var(--z-green);
    background: var(--z-surface-3);
}

.client-zoom .client-zoom-state input { background: transparent; border-color: var(--z-border); color: var(--z-fg); }

/* tiled-client-grid.css -- already dark; align tones only */

.tiled-client-grid .client-tile .client-tile-header { background: #1a1414; color: var(--z-fg); }
.tiled-client-grid .client-tile.focused .client-tile-header { background-color: var(--z-green-dim); }

/* =======================================================================
 * clipboard/, import/, notification/, osk/, player/, textInput/
 * ======================================================================= */

/* clipboard.css */

.clipboard, .clipboard-service-target { background: var(--z-surface-2); color: var(--z-fg); }
.clipboard { border: 1px solid var(--z-border-strong); }
.clipboard img { border: 1px solid var(--z-border-strong); }

.clipboard-editor .clipboard-contents-hidden-hint .clipboard-contents-hidden-hint-text {
    background: var(--z-surface-3);
    color: var(--z-muted);
}

/* import/ */

.import .errors .error-message,
.file-upload-container .file-error { color: var(--z-red); }

.import.help pre { background-color: var(--z-surface-2); color: var(--z-code); }
.import.help .footnotes { border-top: 1px solid var(--z-border); }

.file-upload-container {
    border: 1px solid var(--z-border);
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}

.file-upload-container .drop-target {
    background: var(--z-surface-1);
    border: 1px solid var(--z-border-strong);
}

.file-upload-container .drop-target.file-present { background: var(--z-surface-3); }
.file-upload-container .drop-target.drop-pending { background: var(--z-green-dim); }

/* notification/ */

.notification {
    background: #141010;
    color: var(--z-fg);
    border: 1px solid var(--z-border-strong);
    box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.7);
}

.notification.error { background: var(--z-red-dim); }

.notification .title-bar {
    background: var(--z-surface-1);
    border-bottom: 1px solid var(--z-border);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.notification .progress {
    background: var(--z-surface-2);
    border: 1px solid var(--z-border);
}

.notification .progress .bar {
    background: var(--z-green);
    box-shadow: none;
}

/* osk/ -- already dark; align to palette */

.guac-keyboard .guac-keyboard-key {
    background: var(--z-surface-3);
    border: 0.125em solid var(--z-border-strong);
    color: var(--z-fg);
}

.guac-keyboard .guac-keyboard-key.highlight { background: var(--z-surface-4); border-color: var(--z-muted); }

.guac-keyboard.guac-keyboard-modifier-shift .guac-keyboard-key-rshift,
.guac-keyboard.guac-keyboard-modifier-shift .guac-keyboard-key-lshift,
.guac-keyboard.guac-keyboard-modifier-control .guac-keyboard-key-rctrl,
.guac-keyboard.guac-keyboard-modifier-control .guac-keyboard-key-lctrl,
.guac-keyboard.guac-keyboard-modifier-alt .guac-keyboard-key-ralt,
.guac-keyboard.guac-keyboard-modifier-alt .guac-keyboard-key-lalt,
.guac-keyboard.guac-keyboard-modifier-alt-gr .guac-keyboard-key-alt-gr,
.guac-keyboard.guac-keyboard-modifier-caps .guac-keyboard-key-caps,
.guac-keyboard.guac-keyboard-modifier-super .guac-keyboard-key-super,
.guac-keyboard.guac-keyboard-modifier-lat .guac-keyboard-key-latin {
    background: var(--z-amber-dim);
    border-color: var(--z-amber);
}

.guac-keyboard .guac-keyboard-key.guac-keyboard-pressed {
    background: var(--z-green-dim);
    border-color: var(--z-green);
}

/* player/ */

.guac-player-text-container { background-color: var(--z-bg); color: var(--z-fg); }
.text-batches .text-batch .timestamp { color: var(--z-teal); }
.text-batches .text .future { color: var(--z-faint); }

guac-player .guac-player-status { background: rgba(0, 0, 0, 0.6); }

guac-player-progress-indicator .guac-player-progress-bar-container.past-halfway::before,
guac-player-progress-indicator .guac-player-progress-bar { border-color: var(--z-green); }

input[type="range"]::-webkit-slider-runnable-track,
input[type="range"]:focus::-webkit-slider-runnable-track,
input[type="range"]::-moz-range-track,
input[type="range"]::-ms-fill-lower,
input[type="range"]::-ms-fill-upper,
input[type="range"]:focus::-ms-fill-lower,
input[type="range"]:focus::-ms-fill-upper { background: var(--z-green); }

input[type="range"]::-webkit-slider-thumb,
input[type="range"]::-moz-range-thumb,
input[type="range"]::-ms-thumb { background: var(--z-fg); }

/* textInput/ -- already dark; align to palette */

.text-input { background: #141010; color: var(--z-fg); }
.text-input .target { color: var(--z-fg); }

.text-input .text-input-buttons button {
    background: var(--z-surface-3);
    border: 0.125em solid var(--z-border-strong);
    color: var(--z-fg);
}

.text-input .text-input-buttons button:active { background: var(--z-green-dim); border-color: var(--z-green); }
.text-input .text-input-buttons button.pressed { background: var(--z-amber-dim); border-color: var(--z-amber); }

/* =======================================================================
 * Icons
 *
 * Guacamole's glyphs are baked-in SVGs, overwhelmingly #000 line art (84
 * pure-black fills across 62 files) meant for white backgrounds. Rather
 * than forking all of them, dark glyphs are inverted in place.
 *
 * This is an ALLOWLIST, never a blanket filter: a filter on any ancestor
 * would invert the remote desktop canvas along with everything else.
 * Only elements whose entire content is a background-image glyph appear
 * here, which makes touching the display impossible by construction.
 *
 * hue-rotate(180deg) restores hue after inversion so the few colored
 * glyphs stay recognizable rather than flipping to their complements.
 * ======================================================================= */

/*
 * Filtered elements. Every selector here is a standalone glyph: a pseudo-
 * element, or a box sized purely to hold a background-image. None of them
 * contain text.
 *
 * An element carrying BOTH text and a background icon must never appear in
 * this list -- `filter` applies to the element's whole rendering, so it would
 * invert the label along with the glyph. Those cases are handled in the next
 * block by swapping the image instead.
 */
.icon,
.loading::before,
.menu-dropdown .menu-indicator,
.recent-connections .connection .remove-recent::after,
.file-upload-container .import-config .help::after,
.manage-user .page-tabs .page-list li.read-only a[href]:before,
.manage-user .page-tabs .page-list li.unlinked a[href]:before,
.manage-user .page-tabs .page-list li.linked a[href]:before,
.manage-user-group .page-tabs .page-list li.read-only a[href]:before,
.manage-user-group .page-tabs .page-list li.unlinked a[href]:before,
.manage-user-group .page-tabs .page-list li.linked a[href]:before,
table.sorted th.sort-primary:after,
.guac-player-text-container .text-controls .fullscreen-button,
.settings.connectionHistory a.history-session-recording::after {
    filter: invert(1) hue-rotate(180deg);
}

/*
 * Text-bearing elements: swap the glyph, never filter.
 *
 * These carry a label alongside their background icon (the username in the
 * user menu, device names, breadcrumbs, the text typed into the filter box).
 * Four of them have light variants already shipped in the webapp; the
 * remaining three are supplied by icons.css, which build.sh generates by
 * inlining recolored copies from theme/src/svg/.
 */
.user-menu .menu-dropdown .menu-title {
    background-image: url('images/user-icons/guac-user-white.svg');
}

.user-menu .menu-dropdown .menu-contents li a[href="#/"] {
    background-image: url('images/action-icons/guac-home.svg');
}

.user-menu .menu-dropdown .menu-contents li a[href="#/settings/users"],
.user-menu .menu-dropdown .menu-contents li a[href="#/settings/connections"],
.user-menu .menu-dropdown .menu-contents li a[href="#/settings/sessions"],
.user-menu .menu-dropdown .menu-contents li a[href="#/settings/preferences"] {
    background-image: url('images/action-icons/guac-config.svg');
}

.user-menu .menu-dropdown .menu-contents li a.logout {
    background-image: url('images/action-icons/guac-logout.svg');
}

.share-menu .menu-dropdown .menu-title {
    background-image: url('images/share-white.svg');
}

/*
 * Glyphs that already ship light (#fff) and sit on surfaces that stay dark.
 * Inverting these would make them black-on-black.
 */
.button.logout::before, button.logout::before,
.button.reconnect::before, button.reconnect::before,
.button.manage::before, button.manage::before,
.button.back::before, button.back::before,
.button.home::before, button.home::before,
.button.change-password::before, button.change-password::before,
a.button.add-user::before,
a.button.add-user-group::before,
a.button.add-connection::before,
a.button.add-connection-group::before,
a.button.import-connections::before,
.client .user-menu .menu-contents li a.disconnect,
.tiled-client-grid .client-user-count::before,
#other-connections .client-panel-connection a[href]::before,
.guac-player-controls .play-icon,
.guac-player-controls .pause-icon,
.login-ui .login-dialog .logo,
.clipboard img {
    filter: none;
}

/*
 * Never filtered, stated explicitly as a guard: the remote display, its
 * containers, and connection thumbnails must render true colors.
 */
.display,
.display *,
guac-client,
guac-tiled-clients,
.client-view .client-body,
.thumbnail-display,
.recent-connections .connection .thumbnail > * {
    filter: none !important;
}
/*
 * GENERATED by build.sh -- do not edit.
 * Source SVGs live in theme/src/svg/.
 */

.user-menu .menu-dropdown .menu-contents li a {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2264%22 height=%2264%22 viewBox=%220 0 64 64%22%3E%3Cg transform=%22translate(-33.342 -44.364) scale(.19138)%22%3E%3Cpath style=%22fill:%23fdf6e3%3Bfill-opacity:1%3Bstroke:%23fdf6e3%3Bstroke-width:.00956892%3Bstroke-linecap:round%3Bstroke-linejoin:miter%3Bstroke-miterlimit:4%3Bstroke-opacity:1%3Bstroke-dasharray:none%3Bstroke-dashoffset:0%22 d=%22M4 .656c-2.215 0-4 1.927-4 4.313V48.03c0 2.386 1.785 4.282 4 4.282h56c2.215 0 4-1.896 4-4.282V4.97c0-2.386-1.785-4.313-4-4.313H4zm10.313 10.938h35.374c1.4 0 2.532 1.093 2.532 2.469v24.843c0 1.376-1.132 2.469-2.532 2.469H14.313c-1.4 0-2.532-1.093-2.532-2.469V14.063c0-1.376 1.132-2.47 2.531-2.47z%22 transform=%22translate(174.22 231.813) scale(5.22525)%22/%3E%3Crect ry=%2218%22 rx=%2218%22 y=%22524.187%22 x=%22244.268%22 height=%2238.636%22 width=%22197.179%22 style=%22fill:%23fdf6e3%3Bfill-opacity:1%3Bstroke:%23fdf6e3%3Bstroke-width:.05000001%3Bstroke-linecap:round%3Bstroke-linejoin:miter%3Bstroke-miterlimit:4%3Bstroke-opacity:1%3Bstroke-dasharray:none%3Bstroke-dashoffset:0%22/%3E%3C/g%3E%3C/svg%3E");
}

.filter .search-string {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2264%22 height=%2264%22 viewBox=%220 0 64 64%22%3E%3Cg transform=%22rotate(-30 -4.365 73.476) scale(.14612)%22 style=%22opacity:.25%22%3E%3Ccircle r=%2216.506%22 cy=%2228.63%22 cx=%2231.496%22 style=%22fill:none%3Bfill-rule:evenodd%3Bstroke:%23fdf6e3%3Bstroke-width:5.49999952%3Bstroke-miterlimit:4%3Bstroke-dasharray:none%3Bstroke-opacity:1%22 transform=%22translate(176.854 190.011) scale(5.22525)%22/%3E%3Crect style=%22opacity:1%3Bfill:%23fdf6e3%3Bfill-opacity:1%3Bstroke:none%3Bstroke-width:8%3Bstroke-linecap:round%3Bstroke-linejoin:round%3Bstroke-miterlimit:4%3Bstroke-dasharray:none%3Bstroke-opacity:1%22 width=%2236.577%22 height=%22125.406%22 x=%22324.447%22 y=%22424.444%22 rx=%2210%22 ry=%2210%22/%3E%3C/g%3E%3C/svg%3E");
}

#guac-menu #devices .device.filesystem,
#filesystem-menu .header.breadcrumbs .breadcrumb.root {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2264%22 height=%2264%22 viewBox=%220 0 64 64%22%3E%3Cg transform=%22matrix(.5 0 0 .54546 -93.482 -177.995)%22%3E%3Cpath style=%22opacity:1%3Bfill:%23fdf6e3%3Bfill-opacity:1%3Bstroke:%23fdf6e3%3Bstroke-width:1.91485417%3Bstroke-linecap:round%3Bstroke-linejoin:round%3Bstroke-miterlimit:4%3Bstroke-dasharray:none%3Bstroke-opacity:1%22 d=%22M212 353.105h76c2.216 0 3.549 1.678 4 3.667l8 35.262c.451 1.99-1.784 7.334-4 7.334h-92c-2.216 0-4.451-5.345-4-7.334l8-35.262c.451-1.99 1.784-3.667 4-3.667z%22/%3E%3Crect style=%22opacity:1%3Bfill:%23060000%3Bfill-opacity:1%3Bstroke:%23fdf6e3%3Bstroke-width:1.91485417%3Bstroke-linecap:round%3Bstroke-linejoin:round%3Bstroke-miterlimit:4%3Bstroke-dasharray:none%3Bstroke-opacity:1%22 width=%22100.086%22 height=%2227.5%22 x=%22199.923%22 y=%22389.528%22 rx=%224%22 ry=%223.667%22/%3E%3Crect style=%22opacity:1%3Bfill:%23fdf6e3%3Bfill-opacity:1%3Bstroke:none%3Bstroke-width:1%3Bstroke-linecap:round%3Bstroke-linejoin:round%3Bstroke-miterlimit:4%3Bstroke-dasharray:none%3Bstroke-opacity:1%22 width=%2216%22 height=%227.333%22 x=%22278%22 y=%22404.195%22 rx=%221%22 ry=%221%22/%3E%3C/g%3E%3C/svg%3E");
}