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

}
/* =========================================================================
   SSAKS × Apache Guacamole — professional theme
   Aligned with the Nextcloud instance at ssaks-cl.us.to
   Design tokens derived from Nextcloud primary #3b6aa8
   ========================================================================= */

:root {
    --ss-primary:        #3b6aa8;
    --ss-primary-bright: #5b8fd6;
    --ss-primary-hover:  #4a7cc0;
    --ss-bg-0:  #0e1a2b;
    --ss-bg-1:  #14243c;
    --ss-surface:   #1b2f4d;
    --ss-surface-2: #24406a;
    --ss-border:      rgba(255, 255, 255, 0.12);
    --ss-border-soft: rgba(255, 255, 255, 0.22);
    --ss-text:        #eaf1fb;
    --ss-text-muted:  #9fb4d4;
    --ss-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
}

/* Global dark base — prevents white flashes on transitional / logged-out
   states (login, home, settings, and the client view set their own on top). */
html, body {
    background-color: #0e1a2b !important;
}
/* Logged-out screen background */
.logged-out-modal,
.automatic-login-rejected-modal {
    background: radial-gradient(1200px 820px at 50% 40%, #1c3557 0%, #0e1a2b 65%) !important;
}

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

.login-ui {
    background-color: var(--ss-bg-0) !important;
    background-image:
        linear-gradient(135deg, rgba(14, 26, 43, 0.88), rgba(20, 36, 60, 0.80)),
        url('app/ext/ssaks-branding/images/background.png') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    font-family: var(--ss-font) !important;
}

.login-ui .login-dialog {
    background: rgba(16, 27, 45, 0.74) !important;
    border: 1px solid var(--ss-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55) !important;
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    backdrop-filter: blur(16px) saturate(120%);
    padding: 42px 38px 34px !important;
    width: 350px !important;
    max-width: 88vw !important;
    box-sizing: border-box !important;
}

/* Logo — generous separation from the first field */
.login-ui .login-dialog .logo {
    background-image: url('app/ext/ssaks-branding/images/logo.png') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    height: 104px !important;
    width: 100% !important;
    margin: 4px 0 40px 0 !important;
    padding: 0 !important;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45));
}

/* --- Floating-label fields ------------------------------------------------
   Guacamole renders the "Username"/"Password" text as a <label> in
   .field-header (not a native placeholder). We animate it as a floating
   label: centered inside the input when empty, floated above when the field
   is focused or has a value (.labeled-field loses its .empty class). -------- */

.login-ui .login-dialog .fields { display: block !important; }

.login-ui .login-dialog .labeled-field {
    position: relative !important;
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
}
.login-ui .login-dialog .form-field,
.login-ui .login-dialog .username-field,
.login-ui .login-dialog .password-field { margin: 0 !important; padding: 0 !important; }

.login-ui .login-dialog .labeled-field input[type="text"],
.login-ui .login-dialog .labeled-field input[type="password"],
.login-ui .login-dialog .labeled-field input[type="email"] {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 50px !important;
    padding: 0 14px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1.5px solid var(--ss-border-soft) !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-family: var(--ss-font) !important;
    caret-color: var(--ss-primary-bright) !important;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease !important;
}
.login-ui .login-dialog .labeled-field input:focus {
    outline: none !important;
    border-color: var(--ss-primary-bright) !important;
    background: rgba(255, 255, 255, 0.09) !important;
    box-shadow: 0 0 0 3px rgba(91, 143, 214, 0.28) !important;
}

.login-ui .login-dialog .field-header {
    position: absolute !important;
    left: 11px !important;
    top: 15px !important;
    margin: 0 !important;
    padding: 0 6px !important;
    pointer-events: none !important;
    transform-origin: left center !important;
    transition: transform .15s ease, color .15s ease !important;
    z-index: 3 !important;
    background: transparent !important;
    border: 0 !important;
}
.login-ui .login-dialog .field-header label {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.58) !important;
    white-space: nowrap !important;
    cursor: text !important;
}
/* Floated state — field focused or has a value */
.login-ui .login-dialog .labeled-field:focus-within .field-header,
.login-ui .login-dialog .labeled-field:not(.empty) .field-header {
    transform: translateY(-26px) scale(0.82) !important;
    background: #16273f !important;
    border-radius: 4px !important;
}
.login-ui .login-dialog .labeled-field:focus-within .field-header label,
.login-ui .login-dialog .labeled-field:not(.empty) .field-header label {
    color: var(--ss-primary-bright) !important;
}

/* Kill Chrome's cream autofill background: a SOLID opaque inset shadow masks
   the yellow, white text stays readable. (Translucent masks don't cover it.) */
.login-ui .login-dialog input:-webkit-autofill,
.login-ui .login-dialog input:-webkit-autofill:hover,
.login-ui .login-dialog input:-webkit-autofill:focus,
.login-ui .login-dialog input:-webkit-autofill:active {
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0 1000px #1a2c46 inset !important;
    box-shadow: 0 0 0 1000px #1a2c46 inset !important;
    caret-color: var(--ss-primary-bright) !important;
    transition: background-color 9999s ease-out 0s !important;
}

/* Show/hide-password toggle icon inside the password field */
.login-ui .login-dialog .password-field { position: relative !important; }
.login-ui .login-dialog .password-field input[type="password"],
.login-ui .login-dialog .password-field input[type="text"] {
    padding-right: 44px !important;
}
.login-ui .login-dialog .icon.toggle-password {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 22px !important;
    height: 22px !important;
    filter: brightness(0) invert(1) !important;
    opacity: 0.55 !important;
    cursor: pointer !important;
    transition: opacity .15s ease !important;
    z-index: 4 !important;
}
.login-ui .login-dialog .icon.toggle-password:hover { opacity: 0.9 !important; }

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

body.settings,
.settings,
body.settings #content {
    background: radial-gradient(1200px 820px at 72% -12%, #1c3557 0%, #0e1a2b 62%) !important;
    color: var(--ss-text) !important;
    font-family: var(--ss-font) !important;
}
body.settings #content { background: transparent !important; }
.settings .view,
.settings .connection-list,
.settings .connection-import,
.settings .settings-section { background: transparent !important; }

/* Top bar: "Settings" + user menu */
.settings .header.tabbed {
    background: rgba(14, 26, 43, 0.55) !important;
    border: none !important;
    border-bottom: 1px solid var(--ss-border) !important;
    padding: 16px 28px !important;
}
.settings .header.tabbed > h2 {
    color: var(--ss-text) !important;
    text-transform: uppercase !important;
    letter-spacing: 1.6px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Tab bar (Active Sessions | History | Users | Groups | Connections | Preferences) */
.settings .page-list,
.settings .page-tabs {
    background: rgba(14, 26, 43, 0.35) !important;
    border-bottom: 1px solid var(--ss-border) !important;
    padding: 0 16px !important;
}
.settings .page-list a,
.settings .page-tabs a {
    color: var(--ss-text-muted) !important;
    text-decoration: none !important;
    padding: 13px 18px !important;
    border-bottom: 2px solid transparent !important;
    transition: color .15s, border-color .15s, background .15s !important;
}
.settings .page-list a:hover,
.settings .page-tabs a:hover {
    color: var(--ss-text) !important;
    background: rgba(255, 255, 255, 0.04) !important;
}
.settings .page-list a.current,
.settings .page-list a.selected,
.settings .page-tabs a.current {
    color: #ffffff !important;
    border-bottom-color: var(--ss-primary-bright) !important;
    background: rgba(59, 106, 168, 0.16) !important;
}

/* Section header bars (Appearance / Change Password / …) */
.settings h2.header {
    background: linear-gradient(90deg, rgba(59, 106, 168, 0.22), rgba(59, 106, 168, 0.03)) !important;
    color: var(--ss-text) !important;
    border: none !important;
    border-left: 3px solid var(--ss-primary-bright) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 12px 18px !important;
    margin: 26px 0 0 0 !important;
}

/* Text & labels */
.settings p,
.settings .description,
.settings .caption { color: var(--ss-text-muted) !important; }
.settings label,
.settings th,
.settings dt { color: var(--ss-text) !important; }

/* Form controls */
.settings input[type="text"],
.settings input[type="password"],
.settings input[type="number"],
.settings input[type="email"],
.settings select,
.settings textarea {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid var(--ss-border-soft) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    padding: 8px 12px !important;
    font-family: var(--ss-font) !important;
    font-size: 14px !important;
}
.settings input:focus,
.settings select:focus,
.settings textarea:focus {
    outline: none !important;
    border-color: var(--ss-primary-bright) !important;
    box-shadow: 0 0 0 3px rgba(91, 143, 214, 0.25) !important;
}
.settings select option { background: #16273f !important; color: #ffffff !important; }
.settings input[type="checkbox"],
.settings input[type="radio"] {
    accent-color: var(--ss-primary-bright) !important;
    width: 16px !important;
    height: 16px !important;
}
.settings input:-webkit-autofill {
    -webkit-text-fill-color: #fff !important;
    -webkit-box-shadow: 0 0 0 1000px #1a2c46 inset !important;
}

/* Buttons */
.settings button,
.settings input[type="submit"],
.settings input[type="button"],
.settings a.button {
    background: var(--ss-primary) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 18px !important;
    font-weight: 600 !important;
    font-family: var(--ss-font) !important;
    cursor: pointer !important;
    transition: background .15s, box-shadow .15s !important;
}
.settings button:hover,
.settings input[type="submit"]:hover,
.settings a.button:hover {
    background: var(--ss-primary-hover) !important;
    box-shadow: 0 6px 18px rgba(59, 106, 168, 0.4) !important;
}
.settings button.danger,
.settings .danger { background: #b0413e !important; }
.settings button.danger:hover { background: #c44c49 !important; }

/* Data tables (Users / History / Active Sessions) */
.settings table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: var(--ss-surface) !important;
    border: 1px solid var(--ss-border) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}
.settings table th {
    background: rgba(59, 106, 168, 0.20) !important;
    color: var(--ss-text) !important;
    text-transform: uppercase !important;
    letter-spacing: .6px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    padding: 12px 14px !important;
    text-align: left !important;
    border-bottom: 1px solid var(--ss-border) !important;
}
.settings table td {
    color: var(--ss-text) !important;
    padding: 11px 14px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.settings table tbody tr:hover td { background: rgba(255, 255, 255, 0.045) !important; }

/* =============================== USER MENU (all pages) ================== */

.user-menu .menu-title {
    color: var(--ss-text) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid var(--ss-border) !important;
    border-radius: 22px !important;
    padding: 7px 16px !important;
    font-weight: 500 !important;
}
.user-menu .menu-dropdown { color: var(--ss-text) !important; }
.user-menu .menu-contents {
    background: rgba(18, 30, 50, 0.98) !important;
    border: 1px solid var(--ss-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 46px rgba(0, 0, 0, 0.55) !important;
    color: var(--ss-text) !important;
}
.user-menu .menu-contents a,
.user-menu .page-list a { color: var(--ss-text) !important; text-decoration: none !important; }
.user-menu .menu-contents a:hover { background: rgba(255, 255, 255, 0.06) !important; }
.user-menu .menu-contents a.logout,
.user-menu .page-list a.logout { color: #ff9d9d !important; }

/* =============================== MODALS ================================ */
/* logout modal, fatal-error modal, notifications, confirmations */

guac-modal {
    background: rgba(6, 12, 22, 0.74) !important;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    font-family: var(--ss-font) !important;
}
/* modal-contents is just a full-screen centering wrapper — keep it transparent */
guac-modal .modal-contents {
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
/* the actual cards */
.logged-out-modal .notification,
.fatal-page-error-modal .fatal-page-error,
.automatic-login-rejected-modal .notification,
.guac-notification {
    background: rgba(18, 30, 50, 0.97) !important;
    color: var(--ss-text) !important;
    border: 1px solid var(--ss-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 26px 74px rgba(0, 0, 0, 0.6) !important;
    font-family: var(--ss-font) !important;
}
guac-modal h1,
guac-modal h2,
.modal-contents h1,
.fatal-page-error h1,
.guac-notification .title { color: #ffffff !important; }
/* Center the logged-out / rejected notification as a compact card */
.logged-out-modal .notification,
.automatic-login-rejected-modal .notification {
    max-width: 420px !important;
    margin: 0 auto !important;
    padding: 30px 34px !important;
    text-align: center !important;
}
guac-modal p,
.modal-contents p,
.fatal-page-error p { color: var(--ss-text-muted) !important; }
guac-modal button,
.modal-contents button,
.notification button,
.guac-notification button {
    background: var(--ss-primary) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 20px !important;
    font-weight: 600 !important;
    font-family: var(--ss-font) !important;
    cursor: pointer !important;
    transition: background .15s !important;
}
guac-modal button:hover,
.modal-contents button:hover,
.notification button:hover { background: var(--ss-primary-hover) !important; }

/* Login button */
.login-ui .login-dialog .buttons { margin: 8px 0 0 0 !important; }
.login-ui .login-dialog .buttons input[type="submit"],
.login-ui .login-dialog .buttons button {
    width: 100% !important;
    height: 48px !important;
    background: var(--ss-primary) !important;
    border: none !important;
    border-radius: 10px !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px !important;
    font-family: var(--ss-font) !important;
    cursor: pointer !important;
    box-shadow: 0 6px 18px rgba(59, 106, 168, 0.42) !important;
    transition: background .15s ease, box-shadow .15s ease, transform .05s ease !important;
}
.login-ui .login-dialog .buttons input[type="submit"]:hover,
.login-ui .login-dialog .buttons button:hover {
    background: var(--ss-primary-hover) !important;
    box-shadow: 0 8px 26px rgba(59, 106, 168, 0.55) !important;
}
.login-ui .login-dialog .buttons input[type="submit"]:active { transform: translateY(1px) !important; }

/* Remove any residual version/copyright text */
.login-ui .version,
.login-ui .copyright,
.login-ui .login-dialog .version { display: none !important; }

/* =============================== HOME / LANDING ========================= */

body.home,
.home-view,
.home-view .view,
#content .home-view {
    background: radial-gradient(1200px 820px at 72% -12%, #1c3557 0%, #0e1a2b 62%) !important;
    color: var(--ss-text) !important;
    font-family: var(--ss-font) !important;
}
body.home #content { background: transparent !important; }

/* Section headers ("Recent Connections" / "All Connections") */
.home-view .header {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--ss-border) !important;
    padding: 20px 28px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
}
.home-view .header h2 {
    color: var(--ss-text) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.6px !important;
    margin: 0 !important;
    padding: 2px 0 2px 12px !important;
    border-left: 3px solid var(--ss-primary-bright) !important;
}

/* "No recent connections." */
.home-view .placeholder {
    color: var(--ss-text-muted) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    text-align: center !important;
    padding: 30px 20px !important;
}

/* User menu pill (top-right "atish") */
.home-view .user-menu .menu-title {
    color: var(--ss-text) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid var(--ss-border) !important;
    border-radius: 22px !important;
    padding: 7px 16px !important;
    font-weight: 500 !important;
}
.home-view .user-menu .menu-dropdown { color: var(--ss-text) !important; }

/* Connection list */
.home-view .recent-connections,
.home-view .all-connections { padding: 12px 22px 20px !important; }
.home-view .list-item { margin: 9px 0 !important; }

.home-view a.home-connection {
    display: flex !important;
    align-items: center !important;
    gap: 13px !important;
    background: var(--ss-surface) !important;
    border: 1px solid var(--ss-border) !important;
    border-radius: 11px !important;
    padding: 15px 18px !important;
    color: var(--ss-text) !important;
    text-decoration: none !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    transition: background .15s ease, border-color .15s ease, transform .06s ease, box-shadow .15s ease !important;
}
.home-view a.home-connection:hover {
    background: var(--ss-surface-2) !important;
    border-color: var(--ss-primary-bright) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
}
.home-view a.home-connection:active { transform: translateY(1px) !important; }
.home-view .connection .icon,
.home-view a.home-connection .icon { filter: brightness(1.7) !important; opacity: .95 !important; }

/* --- WCAG AA contrast fixes -------------------------------------------------
   Guacamole renders several labels in its default near-black; on the dark
   theme those measured ~1.5:1 (fail). Force them to the light token. -------- */
.home-view a.home-connection .name,
.home-view .connection .name,
.home-view .connection .caption .name,
.connection .name,
.connection-group .name { color: var(--ss-text) !important; }

/* Navigation links (Home / Settings tabs / page-list) light on every page */
.page-list a,
a.home:not(.home-connection),
.header a.home:not(.home-connection) {
    color: var(--ss-text) !important;
    text-decoration: none !important;
}
.page-list a.current,
.page-list a.selected,
a.home.current:not(.home-connection) { color: #ffffff !important; }
.page-list a:hover { color: #ffffff !important; }

/* Filter input inside the "All Connections" header */
.home-view .header input[type="text"],
.home-view .filter input[type="text"] {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid var(--ss-border) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    padding: 9px 12px !important;
    font-size: 14px !important;
    min-width: 200px !important;
}
.home-view .header input[type="text"]::placeholder { color: var(--ss-text-muted) !important; }

/* --- Polish ------------------------------------------------------------- */

/* keep the user pill fully on-screen */
.home-view .header { padding-right: 34px !important; }
.home-view .user-menu { display: flex !important; align-items: center !important; }
.home-view .user-menu .menu-indicator { filter: brightness(2.2) !important; margin-left: 5px !important; }

/* connection protocol icon → light so it reads on the dark card */
.home-view a.home-connection .icon,
.home-view .connection .caption .icon {
    filter: brightness(0) invert(1) !important;
    opacity: 0.9 !important;
}

/* focus state on connection rows → brand accent, not the browser's gold outline */
.home-view a.home-connection:focus,
.home-view a.home-connection:focus-visible {
    outline: none !important;
    border-color: var(--ss-primary-bright) !important;
    box-shadow: 0 0 0 3px rgba(91, 143, 214, 0.35) !important;
}

/* themed login error/notification banner (e.g. "Invalid Login") */
.login-ui .notification {
    background: rgba(176, 58, 58, 0.20) !important;
    border: 1px solid rgba(220, 90, 90, 0.55) !important;
    color: #ffdada !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

/* =============================== MANAGE PAGES ==========================
   Connection / User / User-group edit pages use body.manage — the settings
   theme did not reach them (they were black-on-white, ~1.2:1). Mirror the
   settings treatment here so every admin surface is consistent + WCAG AA. */

body.manage,
.manage,
body.manage #content {
    background: radial-gradient(1200px 820px at 72% -12%, #1c3557 0%, #0e1a2b 62%) !important;
    color: var(--ss-text) !important;
    font-family: var(--ss-font) !important;
}
body.manage #content { background: transparent !important; }
.manage .view, .manage form { background: transparent !important; }

/* Top bar (title + user menu) */
.manage .header.tabbed {
    background: rgba(14, 26, 43, 0.55) !important;
    border: none !important;
    border-bottom: 1px solid var(--ss-border) !important;
    padding: 16px 28px !important;
}
.manage .header.tabbed > h2 {
    color: var(--ss-text) !important;
    text-transform: uppercase !important; letter-spacing: 1.6px !important;
    font-size: 15px !important; font-weight: 700 !important;
    border: none !important; padding: 0 !important; margin: 0 !important;
}

/* Section headers */
.manage h2.header {
    background: linear-gradient(90deg, rgba(59,106,168,0.22), rgba(59,106,168,0.03)) !important;
    color: var(--ss-text) !important;
    border: none !important;
    border-left: 3px solid var(--ss-primary-bright) !important;
    text-transform: uppercase !important; letter-spacing: 1px !important;
    font-size: 13px !important; font-weight: 700 !important;
    padding: 12px 18px !important; margin: 26px 0 0 0 !important;
}
.manage h3.form-header {
    color: var(--ss-text) !important;
    border: none !important;
    border-bottom: 1px solid var(--ss-border) !important;
    text-transform: uppercase !important; letter-spacing: .8px !important;
    font-size: 12.5px !important; font-weight: 700 !important;
    padding: 0 0 8px 0 !important; margin: 24px 0 14px 0 !important;
}

/* Text, labels, names */
.manage label, .manage th, .manage dt { color: var(--ss-text) !important; }
.manage p, .manage .description { color: var(--ss-text-muted) !important; }

/* Form controls */
.manage input[type="text"], .manage input[type="password"], .manage input[type="number"],
.manage input[type="email"], .manage select, .manage textarea {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid var(--ss-border-soft) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    padding: 8px 12px !important;
    font-family: var(--ss-font) !important;
    font-size: 14px !important;
}
.manage input:focus, .manage select:focus, .manage textarea:focus {
    outline: none !important;
    border-color: var(--ss-primary-bright) !important;
    box-shadow: 0 0 0 3px rgba(91,143,214,0.25) !important;
}
.manage select option { background: #16273f !important; color: #fff !important; }
.manage input[type="checkbox"], .manage input[type="radio"] {
    accent-color: var(--ss-primary-bright) !important; width: 16px !important; height: 16px !important;
}
.manage input:-webkit-autofill {
    -webkit-text-fill-color: #fff !important;
    -webkit-box-shadow: 0 0 0 1000px #1a2c46 inset !important;
}

/* Buttons */
.manage button, .manage input[type="submit"], .manage input[type="button"], .manage a.button {
    background: var(--ss-primary) !important; color: #fff !important; border: none !important;
    border-radius: 8px !important; padding: 10px 18px !important; font-weight: 600 !important;
    font-family: var(--ss-font) !important; cursor: pointer !important;
    transition: background .15s, box-shadow .15s !important;
}
.manage button:hover, .manage input[type="submit"]:hover { background: var(--ss-primary-hover) !important; }
.manage button.danger, .manage .danger { background: #b0413e !important; }
.manage button.danger:hover { background: #c44c49 !important; }

/* Tables (usage history) */
.manage table {
    width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important;
    background: var(--ss-surface) !important; border: 1px solid var(--ss-border) !important;
    border-radius: 10px !important; overflow: hidden !important;
}
.manage table th {
    background: rgba(59,106,168,0.20) !important; color: var(--ss-text) !important;
    text-transform: uppercase !important; letter-spacing: .6px !important;
    font-size: 12px !important; font-weight: 700 !important; padding: 12px 14px !important;
    text-align: left !important; border-bottom: 1px solid var(--ss-border) !important;
}
.manage table td { color: var(--ss-text) !important; padding: 11px 14px !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; }
.manage table tbody tr:hover td { background: rgba(255,255,255,0.045) !important; }

/* ---- Global name/username spans (Guacamole renders these near-black) ---- */
.name, .username, td.start, td.duration, td.remoteHost { color: var(--ss-text) !important; }

/* =============================== INTERACTIVE POLISH =====================
   Neutralizes Guacamole's default *square* and off-theme hover / focus /
   active / open states that leaked outside the page-scoped themes above.
   Fixes: user-pill "black sharp box" on click, pale-green square tab/menu
   hover, grey square button hover with harsh inset active shadow, and the
   browser's default focus outline — all replaced with consistent rounded,
   brand-accented states. */

/* Consistent rounded brand focus ring on every interactive element.
   box-shadow follows each element's own border-radius, so pills stay pills. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.menu-title:focus-visible,
.home-connection:focus-visible,
[tabindex]:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(91, 143, 214, 0.45) !important;
}
* { -webkit-tap-highlight-color: rgba(91, 143, 214, 0.22) !important; }

/* ---- User-menu pill ("atish" dropdown) ----
   The .menu-dropdown wrapper paints a square rgba(0,0,0,0.3) background when
   .open (and a faint one on :hover) — that was the black sharp box behind the
   rounded pill. Keep the wrapper transparent; move the rounded highlight onto
   the pill itself so open/hover read as one cohesive rounded control. */
.user-menu .menu-dropdown,
.user-menu .menu-dropdown:hover,
.user-menu .menu-dropdown.open,
.user-menu .menu-dropdown.open:hover {
    background: transparent !important;
    border-radius: 22px !important;
}
.user-menu .menu-title {
    border-radius: 22px !important;
    transition: background .15s ease, box-shadow .15s ease !important;
}
.user-menu .menu-title:hover { background: rgba(255, 255, 255, 0.14) !important; }
.user-menu .menu-dropdown.open .menu-title {
    background: rgba(91, 143, 214, 0.30) !important;
    box-shadow: 0 0 0 1px var(--ss-border-soft) inset !important;
}

/* ---- Tabs & in-dropdown links: replace pale-green (#ccddaa) square hover
        with a soft rounded highlight on EVERY page (not just .settings) ---- */
.page-tabs .page-list li a[href]:hover,
.section-tabs li a:hover,
.menu-dropdown .menu-contents li a:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--ss-text) !important;
    border-radius: 8px !important;
}
.page-tabs .page-list li a[href].current,
.page-tabs .page-list li a[href].current:hover,
.section-tabs li a.current {
    background: rgba(59, 106, 168, 0.20) !important;
    border-radius: 8px 8px 0 0 !important;
    opacity: 1 !important;
}
.menu-dropdown .menu-contents li a { border-radius: 8px !important; }

/* ---- Generic buttons: replace the grey (#5a5a5a) square hover and the
        harsh dark inset :active shadow with rounded brand states. Themed
        scopes above already win via !important; this catches every remaining
        button (client menu, text-input, import dialogs, etc.). Danger buttons
        keep their red. ---- */
a.button, button, input[type="submit"], input[type="button"] {
    border-radius: 8px !important;
}
a.button:hover, button:hover,
input[type="submit"]:hover, input[type="button"]:hover {
    background-color: var(--ss-primary-hover) !important;
}
a.button:active, button:active,
input[type="submit"]:active, input[type="button"]:active {
    background-color: var(--ss-primary) !important;
    box-shadow: none !important;
    transform: translateY(1px);
}
a.button.danger:hover, button.danger:hover { background-color: #c44c49 !important; }
a.button.danger:active, button.danger:active {
    background-color: #b0413e !important;
    box-shadow: none !important;
}

/* ---- Connection rows: kill the pale-green square wrapper hover ----
   Each row nests .list-item > .connection > .caption > a.home-connection.
   The default theme paints .connection:hover AND .caption:hover a square
   #ccddaa, whose sharp corners frame the rounded anchor (the "green sharp-
   edge boundaries"). Neutralize the wrappers so the rounded anchor owns the
   hover; give the anchor a brand hover in EVERY context (home + settings). */
.connection:hover,
.recent-connections .connection:hover,
.all-connections .connection:hover,
.list-item .caption:hover,
.list-item:not(.selected) .caption:hover {
    background: transparent !important;
}
a.home-connection { border-radius: 11px !important; }
a.home-connection:hover {
    background: var(--ss-surface-2) !important;
    border-color: var(--ss-primary-bright) !important;
    border-radius: 11px !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
}

/* Settings session table used its own green row hover */
.settings table.session-list tr.session:hover,
.settings table.session-list tr.session:hover td {
    background: rgba(255, 255, 255, 0.045) !important;
}

/* =============================== ZERO-GREEN SWEEP ======================
   Guacamole's stock accent for selection / progress / active keys / the
   history heat-map is a pale or olive green (#ccddaa, #ddeebb, #a3d655,
   #888822 + #dddd44 border, #5ba300). Every green surface in the app is
   remapped to the SSAKS brand palette so no green appears anywhere. The
   ONE intentional exception is the colour-picker hue slider (a functional
   rainbow spectrum), which stays untouched. */

/* Selected / focused list items (connection tree + in-session file browser).
   Solid brand fill + white text reads correctly on BOTH the dark connection
   list and the light file-browser panel. */
.list-item.selected,
.list-item.selected .caption,
.file-browser .list-item.focused .caption {
    background: var(--ss-primary) !important;
    color: #ffffff !important;
}

/* File-browser breadcrumb hover + client zoom-control hover */
#filesystem-menu .header.breadcrumbs .breadcrumb:hover,
.client-zoom .client-zoom-in:hover,
.client-zoom .client-zoom-out:hover {
    background: rgba(91, 143, 214, 0.28) !important;
    border-radius: 6px !important;
}

/* File-transfer / notification progress bars → brand blue */
.transfer .progress .bar,
.notification .progress .bar {
    background: var(--ss-primary-bright) !important;
    background-color: var(--ss-primary-bright) !important;
}

/* On-screen keyboard: lit modifier keys (olive → brand) */
.guac-keyboard-modifier-alt-gr .guac-keyboard-key-alt-gr,
.guac-keyboard-modifier-alt .guac-keyboard-key-lalt,
.guac-keyboard-modifier-alt .guac-keyboard-key-ralt,
.guac-keyboard-modifier-caps .guac-keyboard-key-caps,
.guac-keyboard-modifier-control .guac-keyboard-key-lctrl,
.guac-keyboard-modifier-control .guac-keyboard-key-rctrl,
.guac-keyboard-modifier-lat .guac-keyboard-key-latin,
.guac-keyboard-modifier-shift .guac-keyboard-key-lshift,
.guac-keyboard-modifier-shift .guac-keyboard-key-rshift,
.guac-keyboard-modifier-super .guac-keyboard-key-super {
    background: var(--ss-primary) !important;
    background-color: var(--ss-primary) !important;
    border-color: var(--ss-primary-bright) !important;
}

/* Text-input toolbar: pressed key (olive → brand) */
.text-input .text-input-buttons button.pressed {
    background: var(--ss-primary) !important;
    background-color: var(--ss-primary) !important;
    border-color: var(--ss-primary-bright) !important;
}

/* Connection-history heat-map: recolour the green "key events" series to amber
   so it stays distinct from the (blue) frame series without being green. */
.settings.connectionHistoryPlayer .guac-player-controls .heat-map .legend .key-events::after {
    background-color: #d99a3a !important;
}
.settings.connectionHistoryPlayer .heat-map svg.key-events path {
    fill: rgba(217, 154, 58, 0.55) !important;
}

/* =============================== CLIENT MENU (in-session) ==============
   The Ctrl+Alt+Shift sidebar (#guac-menu) and the file browser
   (#filesystem-menu) shipped as a light-grey (#eee) panel with black text —
   the last light surface in the app. Dark-theme it end-to-end to match SSAKS,
   keeping every label/field/control at WCAG-AA contrast. */

#guac-menu, #filesystem-menu {
    background: linear-gradient(180deg, #16273f 0%, #0e1a2b 100%) !important;
    color: var(--ss-text) !important;
    font-family: var(--ss-font) !important;
    border-right: 1px solid var(--ss-border) !important;
    box-shadow: 6px 0 26px rgba(0, 0, 0, 0.5) !important;
}

/* Header bar (connection-name dropdown + user menu) */
#guac-menu .header, #filesystem-menu .header {
    background: rgba(14, 26, 43, 0.55) !important;
    border-bottom: 1px solid var(--ss-border) !important;
    color: var(--ss-text) !important;
}
#guac-menu .header .menu-title, #guac-menu .header h2 { color: var(--ss-text) !important; }

/* Connection-select dropdown panel — so its light .name text reads on dark */
#guac-menu .menu-dropdown .menu-contents {
    background: rgba(18, 30, 50, 0.98) !important;
    border: 1px solid var(--ss-border) !important;
    border-radius: 12px !important;
}

/* Text: headers, labels, captions, table cells, zoom readout → light */
#guac-menu h2, #guac-menu h3, #guac-menu h4,
#guac-menu label, #guac-menu p, #guac-menu .caption,
#guac-menu .menu-title, #guac-menu .client-zoom-state,
#guac-menu td, #guac-menu th,
#filesystem-menu h2, #filesystem-menu h3, #filesystem-menu .filename {
    color: var(--ss-text) !important;
}
/* Descriptions / hints → muted (kept ≥4.5:1) */
#guac-menu .description,
#guac-menu .clipboard-contents-hidden-hint-text {
    color: var(--ss-text-muted) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}
#guac-menu .menu-section { border-color: var(--ss-border) !important; }
#guac-menu h3.form-header, #guac-menu h4 { border-bottom-color: var(--ss-border) !important; }

/* Form controls (color-scheme select, clipboard + custom-scheme textareas,
   connection-search input) → dark fields, light text, brand focus ring */
#guac-menu input[type="text"], #guac-menu input[type="search"], #guac-menu input:not([type]),
#guac-menu select, #guac-menu textarea, #guac-menu .search-string,
#filesystem-menu input {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid var(--ss-border-soft) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-family: var(--ss-font) !important;
}
#guac-menu select option { background: #16273f !important; color: #ffffff !important; }
#guac-menu input:focus, #guac-menu select:focus, #guac-menu textarea:focus {
    outline: none !important;
    border-color: var(--ss-primary-bright) !important;
    box-shadow: 0 0 0 3px rgba(91, 143, 214, 0.25) !important;
}
#guac-menu textarea.clipboard,
#guac-menu textarea.custom-color-scheme-details {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
}
#guac-menu .custom-color-scheme {
    background: rgba(255, 255, 255, 0.04) !important;
    border-radius: 8px !important;
}

/* Default browser-blue detail links → brand */
#guac-menu a.custom-color-scheme-show-details,
#guac-menu a.custom-color-scheme-hide-details {
    color: var(--ss-primary-bright) !important;
}

/* Zoom +/- buttons and pager numbers → translucent light-on-dark */
#guac-menu .client-zoom-out, #guac-menu .client-zoom-in, #guac-menu .set-page {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--ss-text) !important;
    border-radius: 6px !important;
}
#guac-menu .set-page.current { background: rgba(59, 106, 168, 0.30) !important; }