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

.login-ui .sso-providers {

    padding: 0.25em 0.5em;
    position: absolute;
    bottom: 0;
    left: 0;

}

.sso-providers ul {
    list-style: none;
}

.sso-providers ul, .sso-providers li {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.sso-providers li::before {
    content: ' / ';
}

.sso-providers li:first-child::before {
    display: none;
}
/*
 * 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;

}
:root {
  --mt-ink: #102027;
  --mt-ink-soft: #3e5660;
  --mt-ink-faint: #6f8389;
  --mt-surface: rgba(255, 255, 255, 0.88);
  --mt-surface-solid: #ffffff;
  --mt-surface-raised: rgba(255, 255, 255, 0.96);
  --mt-surface-muted: #f1f7f5;
  --mt-border: rgba(54, 92, 96, 0.16);
  --mt-border-strong: rgba(23, 68, 72, 0.26);
  --mt-primary: #087f8c;
  --mt-primary-strong: #065f68;
  --mt-primary-soft: rgba(8, 127, 140, 0.13);
  --mt-accent: #f59f52;
  --mt-accent-soft: rgba(245, 159, 82, 0.2);
  --mt-danger: #c2413d;
  --mt-danger-strong: #9f302d;
  --mt-focus: rgba(8, 127, 140, 0.28);
  --mt-shadow-sm: 0 6px 18px rgba(21, 50, 54, 0.08);
  --mt-shadow-md: 0 18px 45px rgba(21, 50, 54, 0.14);
  --mt-shadow-lg: 0 28px 80px rgba(13, 39, 43, 0.22);
  --mt-radius-xs: 10px;
  --mt-radius-sm: 14px;
  --mt-radius-md: 20px;
  --mt-radius-lg: 28px;
  --mt-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body,
.app,
div.login-ui,
.home,
.settings,
.settings-ui,
div.displayMiddle,
.logged-out-modal guac-modal {
  color: var(--mt-ink) !important;
  font-family: "Aptos", "Segoe UI Variable Text", "Carlito", "Trebuchet MS", sans-serif !important;
}

body,
.app,
div.login-ui,
div.displayMiddle,
.logged-out-modal guac-modal {
  background:
    radial-gradient(circle at 10% 8%, rgba(245, 159, 82, 0.22), transparent 30rem),
    radial-gradient(circle at 88% 4%, rgba(8, 127, 140, 0.2), transparent 32rem),
    linear-gradient(135deg, #eef7f3 0%, #f8f4ea 46%, #e8f1ef 100%) !important;
  background-attachment: fixed !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(16, 32, 39, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 32, 39, 0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent 78%);
}

body::after {
  content: "";
  position: fixed;
  right: -8rem;
  bottom: -10rem;
  width: 34rem;
  height: 34rem;
  z-index: -1;
  pointer-events: none;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(8, 127, 140, 0.18), transparent 68%);
  filter: blur(2px);
}

h1,
h2,
h3,
h4,
h5,
h6,
.header h2,
.settings-ui h1,
.settings-ui h2,
.settings-ui .section-header {
  color: var(--mt-ink) !important;
  letter-spacing: -0.02em;
  text-shadow: none !important;
}

h2,
.header h2 {
  text-transform: none !important;
}

p,
.title,
.login-ui .version,
.login-ui .version .version-number,
.connection .last-used,
.home .connection-group .caption,
.badge,
.settings-ui .header,
.settings-ui p,
.list-item .usage,
.placeholder {
  color: var(--mt-ink-soft) !important;
}

a,
a:visited,
a:hover,
a:active,
a:focus,
.link,
.connection a,
.connection a:visited,
.connection a:hover,
.connection-group a,
.connection-group a:visited,
.connection-group a:hover,
.group a,
.user a,
.user a:visited,
.user a:hover,
.user-group a,
.user-group a:visited,
.user-group a:hover {
  color: var(--mt-primary-strong) !important;
  text-decoration-color: rgba(8, 127, 140, 0.32) !important;
}

/* Guacamole creates hidden clipboard helpers. Keep them out of visual flow. */
textarea.clipboard-service-target,
.clipboard-service-target,
textarea[class*="clipboard"],
textarea[aria-hidden="true"],
.guac-clipboard-target {
  display: none !important;
  visibility: hidden !important;
  position: fixed !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  left: -9999px !important;
  top: -9999px !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Login */
div.login-ui {
  display: table !important;
  isolation: isolate;
  overflow: hidden;
}

.login-ui::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(115deg, rgba(6, 95, 104, 0.88), rgba(11, 43, 51, 0.72) 44%, rgba(245, 159, 82, 0.55)),
    radial-gradient(circle at 22% 28%, rgba(255, 255, 255, 0.22), transparent 15rem);
  clip-path: polygon(0 0, 58% 0, 45% 100%, 0 100%);
}

.login-ui::after {
  content: "BROWSER WORKSPACE";
  position: absolute;
  left: clamp(1.5rem, 6vw, 5rem);
  bottom: clamp(1.5rem, 7vw, 5rem);
  max-width: 13ch;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(2.8rem, 8vw, 7rem);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.08em;
  pointer-events: none;
}

.login-ui .login-dialog-middle {
  position: relative;
  z-index: 1;
  padding: clamp(1.5rem, 5vw, 4rem);
  text-align: right !important;
}

.login-ui .login-dialog {
  position: relative;
  width: min(92vw, 430px) !important;
  max-width: 430px !important;
  padding: clamp(1.5rem, 4vw, 2.2rem) !important;
  text-align: left !important;
  border: 1px solid rgba(255, 255, 255, 0.78) !important;
  border-radius: var(--mt-radius-lg) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(241, 247, 245, 0.88)) !important;
  box-shadow: var(--mt-shadow-lg) !important;
  backdrop-filter: blur(22px) saturate(130%);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  overflow: hidden !important;
  animation: mtPanelIn 420ms var(--mt-ease);
}

.login-ui .login-dialog::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--mt-primary), var(--mt-accent));
}

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

.redirect-field-container,
.login-ui.continuation {
  display: grid !important;
  place-items: center !important;
  min-height: 100vh !important;
  width: 100vw !important;
  padding: clamp(1.5rem, 5vw, 4rem) !important;
  background: #eef6f6 !important;
}

.redirect-field,
.login-ui.continuation .login-dialog-middle {
  display: block !important;
  width: min(92vw, 430px) !important;
  text-align: center !important;
}

.redirect-field,
.login-ui.continuation .login-dialog {
  position: relative;
  width: min(92vw, 430px) !important;
  max-width: 430px !important;
  padding: clamp(1.5rem, 4vw, 2.2rem) !important;
  border: 1px solid var(--mt-border) !important;
  border-radius: var(--mt-radius-lg) !important;
  background: #fff !important;
  box-shadow: var(--mt-shadow-lg) !important;
  color: var(--mt-ink) !important;
  text-align: center !important;
}

.redirect-field::before,
.login-ui.continuation .login-dialog::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  border-radius: var(--mt-radius-lg) var(--mt-radius-lg) 0 0;
  background: var(--mt-primary) !important;
}

.redirect-field p,
.login-ui.continuation .login-dialog p {
  display: block !important;
  min-height: 1.25rem !important;
  margin: 0 !important;
  color: var(--mt-ink) !important;
  font-weight: 700 !important;
  text-align: center !important;
}

.login-ui .login-dialog .version {
  margin-bottom: 1.2rem;
  padding: 0 !important;
  text-align: center;
}

.login-ui .login-dialog .version .app-name {
  color: var(--mt-ink) !important;
  font-size: 1.3rem !important;
  letter-spacing: -0.03em;
  text-transform: none !important;
}

.login-ui .login-dialog .version .version-number {
  right: 1rem !important;
  bottom: 1rem !important;
  padding: 0.35rem 0.65rem !important;
  border-radius: 999px !important;
  background: var(--mt-primary-soft) !important;
  color: var(--mt-primary-strong) !important;
  opacity: 1 !important;
}

.login-ui .login-fields,
.login-ui .login-dialog .login-fields {
  display: grid !important;
  gap: 0.8rem !important;
}

.login-ui p.login-error {
  top: 1rem !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  width: min(92vw, 560px);
  border: 1px solid rgba(194, 65, 61, 0.28) !important;
  border-radius: var(--mt-radius-sm) !important;
  background: rgba(255, 244, 241, 0.96) !important;
  color: var(--mt-danger-strong) !important;
  box-shadow: var(--mt-shadow-md);
}

/* Inputs and forms */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
select,
textarea,
div.location,
.login-ui .login-dialog .login-fields input,
.login-ui .login-fields .labeled-field.empty input,
.login-ui .login-fields .labeled-field input:focus,
.header .filter input {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.62rem 0.85rem !important;
  border: 1px solid var(--mt-border-strong) !important;
  border-radius: var(--mt-radius-xs) !important;
  outline: none !important;
  background: rgba(255, 255, 255, 0.86) !important;
  color: var(--mt-ink) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  font: inherit !important;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

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

input:focus,
select:focus,
textarea:focus,
.header .filter input:focus,
.login-ui .login-dialog .login-fields input:focus {
  border-color: var(--mt-primary) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px var(--mt-focus), inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}

.login-ui .login-fields .labeled-field .field-header {
  margin: 0.68rem 0.9rem !important;
  color: var(--mt-ink-faint) !important;
  opacity: 0.9 !important;
}

.form table.fields th,
.settings table.properties th,
th {
  color: var(--mt-ink-soft) !important;
  text-shadow: none !important;
}

/* Buttons */
.button,
button,
a.button,
input[type="submit"],
.login-ui .buttons .login,
.login-ui .buttons input[type="submit"],
.settings-ui .button {
  min-height: 2.5rem;
  border: 1px solid rgba(6, 95, 104, 0.16) !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--mt-primary), var(--mt-primary-strong)) !important;
  color: #fff !important;
  text-shadow: none !important;
  box-shadow: 0 10px 22px rgba(8, 127, 140, 0.22) !important;
  font-weight: 750 !important;
  letter-spacing: 0.01em;
  transition: transform 160ms var(--mt-ease), box-shadow 160ms ease, filter 160ms ease, background-color 160ms ease;
}

.button:hover,
button:hover,
a.button:hover,
input[type="submit"]:hover,
.login-ui .buttons .login:hover,
.settings-ui .button:hover {
  background: linear-gradient(135deg, #0a94a3, var(--mt-primary-strong)) !important;
  color: #fff !important;
  filter: saturate(1.05) brightness(1.02);
  box-shadow: 0 16px 30px rgba(8, 127, 140, 0.28) !important;
  transform: translateY(-1px);
}

.button:active,
button:active,
a.button:active,
input[type="submit"]:active {
  transform: translateY(0);
}

button.danger,
a.button.danger,
.menu-dropdown .menu-contents li a.danger {
  background: linear-gradient(135deg, var(--mt-danger), var(--mt-danger-strong)) !important;
  color: #fff !important;
}

button:disabled,
input[type="submit"]:disabled,
button.danger:disabled {
  opacity: 0.58 !important;
  cursor: not-allowed;
  transform: none !important;
}

/* Header and navigation */
.header {
  position: relative;
  z-index: 40;
  width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--mt-border) !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow: 0 12px 32px rgba(21, 50, 54, 0.08) !important;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  overflow: visible !important;
}

.header h2 {
  padding: 0.82rem 1.1rem !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
}

.header .filter {
  padding: 0.5rem !important;
}

.header .filter input {
  min-height: 2.25rem;
  border-left: 1px solid var(--mt-border) !important;
}

.menu-dropdown {
  border-left: 1px solid var(--mt-border) !important;
  background: rgba(255, 255, 255, 0.34) !important;
}

.menu-dropdown:hover,
.menu-dropdown.open,
.menu-dropdown.open:hover {
  background: rgba(8, 127, 140, 0.1) !important;
}

.menu-dropdown .menu-title {
  color: var(--mt-ink) !important;
  font-weight: 800 !important;
}

.menu-dropdown .menu-indicator {
  opacity: 0.74;
}

.menu-dropdown .menu-contents,
.menu,
.menu .content,
.settings-panel,
.settings-panel .content {
  border: 1px solid var(--mt-border) !important;
  border-radius: var(--mt-radius-md) !important;
  background: var(--mt-surface-raised) !important;
  box-shadow: var(--mt-shadow-md) !important;
  color: var(--mt-ink) !important;
  overflow: visible !important;
}

.menu-dropdown .menu-contents {
  right: 0 !important;
  top: calc(100% + 0.45rem) !important;
  min-width: 13rem !important;
  padding: 0.35rem !important;
  border-left: 1px solid var(--mt-border) !important;
  border-bottom: 1px solid var(--mt-border) !important;
}

.menu-dropdown .menu-contents li a,
.user-menu .menu-dropdown .menu-contents li a,
.page-tabs .page-list li a[href],
.section-tabs li a {
  border-radius: 12px;
  color: var(--mt-ink) !important;
  text-decoration: none !important;
  transition: background-color 140ms ease, color 140ms ease;
}

.menu-dropdown .menu-contents li a:hover,
.user-menu .menu-dropdown .menu-contents li a:hover,
.page-tabs .page-list li a[href]:hover,
.section-tabs li a:hover {
  background: var(--mt-primary-soft) !important;
  color: var(--mt-primary-strong) !important;
}

.menu-dropdown .menu-contents li a.current,
.menu-dropdown .menu-contents li a.current:hover,
.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: rgba(16, 32, 39, 0.08) !important;
  color: var(--mt-ink-soft) !important;
  opacity: 1 !important;
}

.user-menu .menu-dropdown .menu-contents .profile {
  margin: 0.7rem !important;
  border-bottom: 1px solid var(--mt-border) !important;
}

.page-tabs .page-list ul,
.section-tabs ul {
  border-bottom: 1px solid var(--mt-border) !important;
  background: rgba(255, 255, 255, 0.48) !important;
}

/* Application surfaces */
.home,
.settings,
.settings-ui .page,
div.section,
div.recent-connections,
div.clipboardDiv,
div.all-connections,
.settings-ui .settings,
.settings-ui .section,
.client-panel,
.clipboard,
.keyboard {
  border: 1px solid var(--mt-border) !important;
  border-radius: var(--mt-radius-md) !important;
  background: var(--mt-surface) !important;
  box-shadow: var(--mt-shadow-sm) !important;
  color: var(--mt-ink) !important;
}

.home,
.settings-ui .page,
.settings-ui .settings,
.settings,
div.section,
div.recent-connections,
div.clipboardDiv,
div.all-connections {
  margin: clamp(0.75rem, 2vw, 1.25rem) !important;
  padding: clamp(0.9rem, 2vw, 1.25rem) !important;
}

.connection-list,
.settings-panel .page,
.settings-ui .section,
.all-connections .list-buttons {
  background: transparent !important;
}

.connection-group,
.recent-connections,
.home .connection-group {
  margin-bottom: 1rem !important;
}

/* Connection and list cards */
.connection,
.connection-group,
.group,
.user,
.user-group,
.sharing-profile,
.recent-connections .connection,
.home .recent-connections .connection,
.home .connection-list .connection,
.settings-ui .list-item,
.list-item {
  border-radius: var(--mt-radius-sm) !important;
  color: var(--mt-ink) !important;
  transition: transform 170ms var(--mt-ease), border-color 170ms ease, box-shadow 170ms ease, background-color 170ms ease;
}

.connection,
.group,
.recent-connections .connection,
.home .recent-connections .connection,
.home .connection-list .connection,
.settings-ui .list-item,
.settings .list-item,
.connection-list .list-item,
.user,
.user-group,
.sharing-profile {
  border: 1px solid var(--mt-border) !important;
  background: rgba(255, 255, 255, 0.78) !important;
  box-shadow: var(--mt-shadow-sm) !important;
  margin-bottom: 0.72rem !important;
  padding: 0.72rem 0.86rem !important;
  overflow: hidden !important;
}

.recent-connections .connection {
  display: inline-block !important;
  vertical-align: top;
  margin: 0.55rem !important;
  min-width: 10rem;
}

.connection-list .connection {
  display: inline-block !important;
  min-height: 44px;
}

.connection .caption,
.connection-group > .caption,
.group .caption,
.list-item .caption,
.caption,
.caption:visited,
.caption:hover,
.caption:active,
.caption:focus,
.list-item .caption:hover,
.list-item .caption:focus,
.list-item:not(.selected) .caption:hover,
.list-item:not(.selected) .caption:focus,
.selected .caption,
.active .caption,
.connection:hover .caption,
.connection:focus .caption,
.connection:focus-within .caption,
.recent-connections .connection:hover .caption,
.recent-connections .connection:focus .caption,
.recent-connections .connection:focus-within .caption {
  color: var(--mt-ink) !important;
  text-decoration: none !important;
  background: transparent !important;
  background-color: transparent !important;
}

.connection-name,
.group-name,
.recent-connections .connection-name,
.connection .caption .name,
.connection .name,
.group .name,
.list-item .name,
.user-menu .menu-dropdown .menu-contents .profile .full-name {
  color: var(--mt-ink) !important;
  font-weight: 800 !important;
}

.connection-list .connection .caption {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

.connection-list .connection .last-used {
  display: inline-flex !important;
  align-items: center !important;
  margin-left: 0.4rem !important;
  font-size: 0.86rem !important;
  line-height: 1.2 !important;
  white-space: nowrap;
}

.connection:hover,
.connection:focus,
.connection:focus-within,
.group:hover,
.group:focus,
.group:focus-within,
.user:hover,
.user-group:hover,
.sharing-profile:hover,
.recent-connections .connection:hover,
.recent-connections .connection:focus,
.recent-connections .connection:focus-within,
.home .recent-connections .connection:hover,
.home .recent-connections .connection:focus,
.home .recent-connections .connection:focus-within,
.list-item:not(.selected):hover,
.selected,
.active,
.connection.selected,
.connection.active,
.list-item.selected,
.recent-connections .connection.selected,
.recent-connections .connection.active {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(232, 246, 244, 0.92)) !important;
  border-color: rgba(8, 127, 140, 0.34) !important;
  box-shadow: var(--mt-shadow-md) !important;
  color: var(--mt-ink) !important;
  transform: translateY(-1px);
}

.success,
.button.success,
button.success,
input[type="submit"].success,
.connected,
.connection.connected,
.recent-connections .connection.connected,
tr.success,
tr.selected,
tr.active,
.caption.active {
  background: var(--mt-primary-soft) !important;
  border-color: rgba(8, 127, 140, 0.34) !important;
  color: var(--mt-ink) !important;
}

.caption.active * {
  opacity: 0.72 !important;
}

.connection .icon,
.connection-group .icon,
.sharing-profile .icon,
.icon.user,
.icon.user-group {
  border-radius: 9px;
  background-color: rgba(8, 127, 140, 0.1);
  box-shadow: inset 0 0 0 1px rgba(8, 127, 140, 0.1);
}

.expandable > .children {
  margin-left: 14px !important;
  padding-left: 16px !important;
  border-left: 1px dashed rgba(8, 127, 140, 0.2);
}

.expandable.expanded > .children > .list-item::before,
.expandable.expanded > .children > .list-item::after {
  border-color: rgba(8, 127, 140, 0.22) !important;
}

.recent-connections .connection .thumbnail > * {
  border: 1px solid rgba(16, 32, 39, 0.2) !important;
  border-radius: var(--mt-radius-xs);
  background: #07181d !important;
  box-shadow: 0 10px 24px rgba(16, 32, 39, 0.18) !important;
}

.recent-connections .connection .remove-recent {
  top: 0.65rem !important;
  right: 0.65rem !important;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
}

/* Settings, lists, and tables */
.settings .toolbar {
  gap: 0.65rem;
}

.settings .action-buttons,
.settings .toolbar .action-buttons {
  margin: 0.5rem 0 !important;
}

.settings.connections .connection-list .new-connection,
.settings.connections .connection-list .new-connection-group,
.settings.connections .connection-list .new-sharing-profile {
  opacity: 0.8 !important;
  font-style: normal !important;
}

.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(--mt-primary-strong) !important;
}

.settings-ui .tab,
.settings-ui .tabs li,
.settings-ui .tabs a {
  border: 1px solid var(--mt-border) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.74) !important;
  color: var(--mt-ink) !important;
}

.settings-ui .tab.active,
.settings-ui .tabs .active,
.settings-ui .tabs a.active,
.settings-ui .tab:hover,
.settings-ui .tabs a:hover {
  background: var(--mt-primary-soft) !important;
  border-color: rgba(8, 127, 140, 0.34) !important;
  color: var(--mt-primary-strong) !important;
}

table,
table.sorted,
.settings-ui table,
.settings-ui .table {
  width: 100%;
  border: 1px solid var(--mt-border) !important;
  border-collapse: separate !important;
  border-spacing: 0;
  border-radius: var(--mt-radius-sm) !important;
  background: var(--mt-surface-raised) !important;
  box-shadow: var(--mt-shadow-sm);
  overflow: hidden !important;
}

th,
td,
.settings-ui th,
.settings-ui td,
table.sorted th,
table.sorted td {
  border-color: var(--mt-border) !important;
  color: var(--mt-ink) !important;
  background: transparent !important;
  padding: 0.62rem 0.8rem !important;
}

thead th,
.settings-ui thead th,
table.sorted th {
  background: rgba(8, 127, 140, 0.1) !important;
  color: var(--mt-ink-soft) !important;
  font-weight: 800 !important;
}

tbody tr,
table.sorted tbody tr {
  transition: background-color 140ms ease;
}

tbody tr:hover,
.settings-ui tbody tr:hover,
table.sorted tbody tr:hover {
  background: rgba(8, 127, 140, 0.07) !important;
}

/* Client and remote-session chrome */
.client-toolbar,
.client-panel,
#other-connections .client-panel {
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: rgba(7, 24, 29, 0.92) !important;
  color: #ecf8f6 !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.client-toolbar .guac-btn,
#other-connections button.close-other-connection,
#other-connections .client-panel-connection {
  border-radius: var(--mt-radius-xs) !important;
}

#other-connections .client-panel-handle {
  background-color: rgba(255, 255, 255, 0.88) !important;
  border-radius: 8px 0 0 8px;
}

#other-connections .client-panel-connection {
  border-color: rgba(255, 255, 255, 0.24) !important;
  background: #07181d !important;
}

#other-connections .client-panel-connection .name {
  background: linear-gradient(to top, rgba(7, 24, 29, 0.92), rgba(7, 24, 29, 0.58)) !important;
  color: #fff !important;
}

.clipboard,
.keyboard {
  background: rgba(7, 24, 29, 0.95) !important;
  color: #ecf8f6 !important;
}

.notification,
.modal,
.dialog,
.logged-out-modal guac-modal {
  border-radius: var(--mt-radius-md) !important;
  background: var(--mt-surface-raised) !important;
  color: var(--mt-ink) !important;
  box-shadow: var(--mt-shadow-lg) !important;
}

/* Motion */
.login-ui .login-dialog,
.header,
.home,
.settings,
div.section,
div.recent-connections,
div.all-connections,
.connection,
.group,
.recent-connections .connection {
  animation: mtFadeUp 280ms var(--mt-ease) both;
}

.recent-connections .connection:nth-child(2n),
.connection-list .connection:nth-child(2n) {
  animation-delay: 35ms;
}

.recent-connections .connection:nth-child(3n),
.connection-list .connection:nth-child(3n) {
  animation-delay: 70ms;
}

@keyframes mtPanelIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes mtFadeUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}

@media (max-width: 760px) {
  body::after,
  .login-ui::after {
    display: none;
  }

  .login-ui::before {
    clip-path: polygon(0 0, 100% 0, 100% 30%, 0 45%);
  }

  .login-ui .login-dialog-middle {
    padding: 1rem;
    text-align: center !important;
  }

  .login-ui .login-dialog {
    width: min(94vw, 430px) !important;
  }

  .header {
    flex-wrap: wrap;
  }

  .header h2 {
    min-width: 55%;
  }

  .header .filter,
  .settings .toolbar .filter {
    width: 100%;
  }

  .home,
  .settings-ui .page,
  .settings-ui .settings,
  .settings,
  div.section,
  div.recent-connections,
  div.clipboardDiv,
  div.all-connections {
    margin: 0.65rem !important;
    padding: 0.75rem !important;
  }

  .recent-connections .connection,
  .connection-list .connection {
    display: block !important;
    width: 100%;
    min-width: 0;
    margin: 0 0 0.65rem !important;
  }

  .settings .toolbar {
    display: block !important;
  }

  table,
  table.sorted,
  .settings-ui table {
    display: block;
    overflow-x: auto !important;
    white-space: nowrap;
  }
}

/* Compact professional refinement layer. Keep this last. */
:root {
  --mt-ink: #17262b;
  --mt-ink-soft: #425b63;
  --mt-ink-faint: #74878d;
  --mt-surface: #ffffff;
  --mt-surface-solid: #ffffff;
  --mt-surface-raised: #ffffff;
  --mt-surface-muted: #f5f8f8;
  --mt-border: #d9e4e4;
  --mt-border-strong: #c4d3d4;
  --mt-primary: #087987;
  --mt-primary-strong: #056572;
  --mt-primary-soft: #e7f4f5;
  --mt-danger: #c46767;
  --mt-danger-strong: #b75555;
  --mt-focus: rgba(8, 121, 135, 0.18);
  --mt-shadow-sm: 0 2px 8px rgba(23, 38, 43, 0.05);
  --mt-shadow-md: 0 8px 22px rgba(23, 38, 43, 0.08);
  --mt-shadow-lg: 0 14px 38px rgba(23, 38, 43, 0.12);
  --mt-radius-xs: 8px;
  --mt-radius-sm: 10px;
  --mt-radius-md: 14px;
  --mt-radius-lg: 18px;
}

html,
body,
.app,
.home,
.settings,
.settings-ui,
div.displayMiddle,
.logged-out-modal guac-modal {
  max-width: 100vw;
  background: #f7fafa !important;
  color: var(--mt-ink) !important;
  overflow-x: hidden !important;
}

body::before,
body::after,
.login-ui::after {
  display: none !important;
}

.login-ui::before {
  background: #eef6f6 !important;
  clip-path: none !important;
}

.login-ui .login-dialog {
  border-color: var(--mt-border) !important;
  background: #fff !important;
  box-shadow: var(--mt-shadow-lg) !important;
}

.login-ui .login-dialog::before {
  background: var(--mt-primary) !important;
}

/* Keep Guacamole's internal clipboard target usable but completely invisible. */
textarea.clipboard-service-target,
.clipboard-service-target,
textarea.clipboard-service-target:focus,
.clipboard-service-target:focus {
  display: block !important;
  visibility: visible !important;
  position: fixed !important;
  left: -10000px !important;
  top: -10000px !important;
  right: auto !important;
  bottom: auto !important;
  width: 1px !important;
  min-width: 1px !important;
  max-width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  max-height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: transparent !important;
  caret-color: transparent !important;
  opacity: 0 !important;
  overflow: hidden !important;
  resize: none !important;
  pointer-events: none !important;
  transform: none !important;
  z-index: -1 !important;
}

/* Avoid styling the internal clipboard target like a normal textarea. */
textarea:not(.clipboard-service-target),
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
select,
div.location,
.login-ui .login-dialog .login-fields input,
.header .filter input {
  min-height: 2.25rem !important;
  padding: 0.48rem 0.7rem !important;
  border-color: var(--mt-border-strong) !important;
  border-radius: var(--mt-radius-xs) !important;
  background: #fff !important;
  box-shadow: none !important;
}

input:focus,
select:focus,
textarea:not(.clipboard-service-target):focus,
.header .filter input:focus,
.login-ui .login-dialog .login-fields input:focus {
  border-color: var(--mt-primary) !important;
  box-shadow: 0 0 0 3px var(--mt-focus) !important;
}

.button,
button,
a.button,
input[type="submit"],
.login-ui .buttons .login,
.login-ui .buttons input[type="submit"],
.settings-ui .button {
  min-height: 2.25rem !important;
  padding: 0.45rem 0.9rem !important;
  border: 0 !important;
  background: var(--mt-primary) !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}

.button:hover,
button:hover,
a.button:hover,
input[type="submit"]:hover,
.login-ui .buttons .login:hover,
.settings-ui .button:hover {
  background: var(--mt-primary-strong) !important;
  box-shadow: none !important;
  transform: none !important;
}

button.danger,
a.button.danger,
.menu-dropdown .menu-contents li a.danger {
  background: var(--mt-danger) !important;
}

.button.success,
button.success,
input[type="submit"].success {
  background: var(--mt-primary) !important;
}

.header {
  min-height: 3rem;
  border-bottom: 1px solid var(--mt-border) !important;
  background: #fff !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.header h2 {
  padding: 0.72rem 0.9rem !important;
  font-size: 0.95rem !important;
}

.header .filter {
  padding: 0.38rem 0.5rem !important;
}

.menu-dropdown {
  border-left: 1px solid var(--mt-border) !important;
  background: transparent !important;
}

.menu-dropdown:hover,
.menu-dropdown.open,
.menu-dropdown.open:hover {
  background: #f1f6f6 !important;
}

.menu-dropdown .menu-title {
  padding: 0.72rem 2rem 0.72rem 0.8rem !important;
  font-size: 0.95rem !important;
}

.user-menu .menu-dropdown .menu-title {
  padding-left: 2rem !important;
}

.menu-dropdown .menu-contents,
.menu,
.menu .content,
.settings-panel,
.settings-panel .content {
  border-color: var(--mt-border) !important;
  border-radius: var(--mt-radius-md) !important;
  background: #fff !important;
  box-shadow: var(--mt-shadow-md) !important;
}

.menu-dropdown .menu-contents {
  top: calc(100% + 0.25rem) !important;
  min-width: 12rem !important;
  padding: 0.35rem !important;
}

.menu-dropdown .menu-contents li a,
.user-menu .menu-dropdown .menu-contents li a {
  min-height: 2.25rem;
  padding-top: 0.58rem !important;
  padding-bottom: 0.58rem !important;
  border: 0 !important;
  border-radius: var(--mt-radius-xs) !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.menu-dropdown .menu-contents li a:hover,
.user-menu .menu-dropdown .menu-contents li a:hover,
.menu-dropdown .menu-contents li a.current,
.menu-dropdown .menu-contents li a.current:hover {
  background-color: var(--mt-primary-soft) !important;
  color: var(--mt-primary-strong) !important;
}

.user-menu .menu-dropdown .menu-contents .profile {
  margin: 0.45rem !important;
  padding-bottom: 0.55rem !important;
}

.home,
.settings,
.settings-ui .page,
.settings-ui .settings,
div.section,
div.recent-connections,
div.clipboardDiv,
div.all-connections,
.settings-ui .section {
  margin: 0 !important;
  padding: 0.85rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.home > div,
.settings > div,
.settings-ui .page > div,
div.all-connections,
div.recent-connections,
div.clipboardDiv,
.settings-ui .section {
  max-width: 100% !important;
}

.page-tabs .page-list ul,
.section-tabs ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0.7rem 0.85rem !important;
  border-bottom: 1px solid var(--mt-border) !important;
  background: transparent !important;
}

.page-tabs .page-list li,
.section-tabs li {
  display: block !important;
}

.page-tabs .page-list li a[href],
.section-tabs li a,
.settings-ui .tab,
.settings-ui .tabs li,
.settings-ui .tabs a {
  min-height: 2.25rem;
  padding: 0.58rem 0.9rem !important;
  border: 1px solid var(--mt-border) !important;
  border-radius: var(--mt-radius-xs) !important;
  background: #fff !important;
  box-shadow: none !important;
  color: var(--mt-ink-soft) !important;
}

.page-tabs .page-list li a[href]:hover,
.section-tabs li a:hover,
.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,
.settings-ui .tab.active,
.settings-ui .tabs .active,
.settings-ui .tabs a.active,
.settings-ui .tab:hover,
.settings-ui .tabs a:hover {
  border-color: var(--mt-border-strong) !important;
  background: var(--mt-primary-soft) !important;
  color: var(--mt-primary-strong) !important;
}

.connection,
.group,
.recent-connections .connection,
.home .recent-connections .connection,
.home .connection-list .connection,
.settings-ui .list-item,
.settings .list-item,
.connection-list .list-item,
.user,
.user-group,
.sharing-profile {
  margin: 0 0 0.45rem !important;
  padding: 0.58rem 0.68rem !important;
  border: 1px solid var(--mt-border) !important;
  border-radius: var(--mt-radius-xs) !important;
  background: #fff !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.recent-connections .connection {
  margin: 0.25rem !important;
  min-width: 9rem !important;
}

.connection:hover,
.connection:focus,
.connection:focus-within,
.group:hover,
.group:focus,
.group:focus-within,
.user:hover,
.user-group:hover,
.sharing-profile:hover,
.recent-connections .connection:hover,
.recent-connections .connection:focus,
.recent-connections .connection:focus-within,
.home .recent-connections .connection:hover,
.home .recent-connections .connection:focus,
.home .recent-connections .connection:focus-within,
.list-item:not(.selected):hover,
.selected,
.active,
.connection.selected,
.connection.active,
.list-item.selected,
.recent-connections .connection.selected,
.recent-connections .connection.active {
  background: var(--mt-primary-soft) !important;
  border-color: var(--mt-border-strong) !important;
  box-shadow: none !important;
  transform: none !important;
}

.connection .icon,
.connection-group .icon,
.sharing-profile .icon,
.icon.user,
.icon.user-group {
  border-radius: 6px !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.expandable > .children {
  margin-left: 0.75rem !important;
  padding-left: 0.75rem !important;
  border-left: 1px solid var(--mt-border) !important;
}

.settings .toolbar {
  gap: 0.45rem !important;
}

.settings .action-buttons,
.settings .toolbar .action-buttons,
.all-connections .list-buttons {
  margin: 0.45rem 0 !important;
  padding: 0 !important;
}

table,
table.sorted,
.settings-ui table,
.settings-ui .table {
  border-color: var(--mt-border) !important;
  border-radius: var(--mt-radius-xs) !important;
  background: #fff !important;
  box-shadow: none !important;
}

th,
td,
.settings-ui th,
.settings-ui td,
table.sorted th,
table.sorted td {
  padding: 0.52rem 0.65rem !important;
}

thead th,
.settings-ui thead th,
table.sorted th {
  background: #edf6f6 !important;
}

.placeholder {
  margin: 0.85rem 0 !important;
  font-size: 1.35rem !important;
  color: #9aa8ad !important;
  text-shadow: none !important;
}

.notification,
.modal,
.dialog,
.logged-out-modal guac-modal {
  border: 1px solid var(--mt-border) !important;
  border-radius: var(--mt-radius-md) !important;
  background: #fff !important;
  box-shadow: var(--mt-shadow-lg) !important;
}

.client-toolbar,
.client-panel,
#other-connections .client-panel,
.clipboard,
.keyboard {
  background: #111f24 !important;
  box-shadow: var(--mt-shadow-md) !important;
}

.login-ui .login-dialog,
.header,
.home,
.settings,
div.section,
div.recent-connections,
div.all-connections,
.connection,
.group,
.recent-connections .connection {
  animation: none !important;
}

@media (max-width: 760px) {
  .home,
  .settings-ui .page,
  .settings-ui .settings,
  .settings,
  div.section,
  div.recent-connections,
  div.clipboardDiv,
  div.all-connections,
  .settings-ui .section {
    padding: 0.65rem !important;
  }

  .page-tabs .page-list ul,
  .section-tabs ul {
    padding: 0.55rem 0.65rem !important;
  }
}

/* Settings action buttons: align Guacamole's built-in icon pseudo-elements. */
.settings .action-buttons,
.settings .toolbar .action-buttons,
.all-connections .list-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

.settings .action-buttons .button,
.settings .toolbar .action-buttons .button,
.all-connections .list-buttons .button,
a.button.add-user,
a.button.add-user-group,
a.button.add-connection,
a.button.add-connection-group,
a.button.import-connections {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 2.25rem !important;
  margin: 0 !important;
  padding: 0.48rem 0.95rem 0.48rem 2.15rem !important;
  line-height: 1.1 !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

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 {
  content: "" !important;
  position: absolute !important;
  left: 0.78rem !important;
  top: 50% !important;
  bottom: auto !important;
  width: 1rem !important;
  height: 1rem !important;
  margin: 0 !important;
  background-size: 1rem 1rem !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  transform: translateY(-50%) !important;
}

/* Final login/redirect positioning override. Keep auth-related cards centered. */
body:has(.login-ui),
body:has(.redirect-field-container) {
  display: grid !important;
  place-items: center !important;
  min-height: 100vh !important;
  margin: 0 !important;
}

body:has(.login-ui) .app,
body:has(.redirect-field-container) .app {
  display: grid !important;
  place-items: center !important;
  width: 100vw !important;
  min-height: 100vh !important;
}

div.login-ui,
.login-ui.initial,
.login-ui.continuation,
.redirect-field-container {
  position: fixed !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  padding: clamp(1.5rem, 5vw, 4rem) !important;
}

.login-ui .login-dialog-middle,
.login-ui.initial .login-dialog-middle,
.login-ui.continuation .login-dialog-middle,
.redirect-field {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  padding: 0 !important;
  text-align: center !important;
}

.login-ui .login-dialog,
.login-ui.initial .login-dialog,
.login-ui.continuation .login-dialog,
.redirect-field {
  justify-self: center !important;
  align-self: center !important;
  margin: 0 auto !important;
  transform: none !important;
}