/*
 * CarrierClass dark theme for Apache Guacamole 1.6.0
 * Icons are inline SVG data URIs, generated at build time.
 */

:root {
    --cc-bg:          #0a0e16;
    --cc-bg-2:        #0e1420;
    --cc-surface:     #121a28;
    --cc-surface-2:   #182235;
    --cc-surface-3:   #1f2b42;
    --cc-input:       #0d1320;
    --cc-border:      rgba(148, 163, 184, 0.12);
    --cc-border-2:    rgba(148, 163, 184, 0.22);
    --cc-text:        #e6ebf4;
    --cc-text-2:      #b6c0d2;
    --cc-muted:       #7d889c;
    --cc-accent:      #22d3ee;
    --cc-accent-2:    #6366f1;
    --cc-accent-soft: rgba(34, 211, 238, 0.12);
    --cc-grad:        linear-gradient(135deg, #22d3ee 0%, #3b82f6 55%, #6366f1 100%);
    --cc-danger:      #ef4444;
    --cc-radius:      12px;
    --cc-font:        "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

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

html, body {
    background: var(--cc-bg);
    color: var(--cc-text);
}

body, input, button, select, textarea,
input[type="submit"], a.button {
    font-family: var(--cc-font);
}

body { -webkit-font-smoothing: antialiased; }

a { color: var(--cc-accent); }

::selection { background: rgba(34, 211, 238, 0.3); }

* { scrollbar-color: var(--cc-surface-3) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--cc-surface-3); border-radius: 10px; border: 2px solid var(--cc-bg); }
::-webkit-scrollbar-track { background: transparent; }

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

/* ------------------------------------------------------------------ */
/* Brand pieces                                                         */
/* ------------------------------------------------------------------ */

.cc-mark {
    display: inline-block;
    width: 28px;
    height: 28px;
    background: url("app/ext/carrierclass-branding/images/mark.svg") center / contain no-repeat;
    flex: 0 0 auto;
}

.cc-mark-lg {
    width: 64px;
    height: 64px;
    filter: drop-shadow(0 10px 28px rgba(34, 211, 238, 0.35));
}

.cc-word {
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--cc-text);
}

.cc-word span {
    font-weight: 300;
    background: var(--cc-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Login brand block */
.cc-login-brand {
    text-align: center;
    margin: 0 0 1.75em;
}

.cc-login-brand .cc-mark-lg { display: block; margin: 0 auto 1em; }

.cc-login-brand .cc-word { font-size: 1.9em; line-height: 1.1; }

.cc-login-brand .cc-tagline {
    margin-top: 0.55em;
    font-size: 0.72em;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cc-muted);
}

.cc-login-foot {
    margin-top: 1.4em;
    padding-top: 1.1em;
    border-top: 1px solid var(--cc-border);
    font-size: 0.72em;
    color: var(--cc-muted);
    text-align: center;
    letter-spacing: 0.02em;
}

.cc-login-foot .cc-lock {
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    margin: -0.2em 0.45em 0 0;
    vertical-align: middle;
    background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%237d889c%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%225%22 y=%2211%22 width=%2214%22 height=%2210%22 rx=%222%22/%3E%3Cpath d=%22M8 11V8a4 4 0 0 1 8 0v3%22/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Top bar (home + settings) */
.cc-topbar {
    display: flex;
    align-items: center;
    padding: 0.85em 1.25em;
    background:
        linear-gradient(90deg, rgba(34, 211, 238, 0.10), rgba(99, 102, 241, 0.06) 45%, transparent 80%),
        var(--cc-bg-2);
    border-bottom: 1px solid var(--cc-border);
}

.cc-brand-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.7em;
    text-decoration: none;
    color: var(--cc-text);
}

.cc-brand-inline .cc-word { font-size: 1.2em; }

.cc-brand-inline .cc-divider {
    width: 1px;
    height: 1.3em;
    background: var(--cc-border-2);
}

.cc-brand-inline .cc-sub {
    font-size: 0.78em;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cc-muted);
}

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

div.login-ui {
    background:
        radial-gradient(900px 520px at 12% -8%, rgba(34, 211, 238, 0.16), transparent 62%),
        radial-gradient(820px 560px at 108% 108%, rgba(99, 102, 241, 0.20), transparent 60%),
        linear-gradient(rgba(148, 163, 184, 0.045) 1px, transparent 1px) 0 0 / 44px 44px,
        linear-gradient(90deg, rgba(148, 163, 184, 0.045) 1px, transparent 1px) 0 0 / 44px 44px,
        var(--cc-bg);
}

.login-ui .login-dialog.notification,
div.login-ui.continuation .login-dialog.notification {
    position: relative;
    max-width: 400px;
    padding: 2.4em 2.1em 1.6em;
    font-size: 1em;
    color: var(--cc-text);
    background: rgba(16, 22, 35, 0.74);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid var(--cc-border);
    border-radius: 20px;
    box-shadow:
        0 40px 100px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.02),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

div.login-ui.continuation .login-dialog.notification { max-width: 440px; }

/* thin gradient accent along the top edge of the card */
.login-ui .login-dialog.notification::before {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    top: -1px;
    height: 2px;
    border-radius: 2px;
    background: var(--cc-grad);
    opacity: 0.85;
}

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

.login-ui .login-dialog p {
    color: var(--cc-text-2);
    font-size: 0.9em;
    line-height: 1.5;
    text-align: center;
}

.login-ui .login-dialog th { text-shadow: none; color: var(--cc-text-2); }

/* Floating-label inputs */
.login-ui .login-fields .labeled-field {
    margin-bottom: 0.8em;
    border-radius: 11px;
    background: var(--cc-input);
}

.login-ui .login-fields .labeled-field .field-header {
    margin: 0.95em 1em;
    font-size: 0.92em;
    opacity: 1;
    color: var(--cc-muted);
}

.login-ui .login-dialog .login-fields input,
.login-ui .login-dialog .login-fields input[type="text"],
.login-ui .login-dialog .login-fields input[type="password"] {
    margin: 0;
    padding: 0.85em 1em;
    font-size: 1em;
    color: var(--cc-text);
    background: var(--cc-input);
    border: 1px solid var(--cc-border-2);
    border-radius: 11px;
    outline: none;
    max-width: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.login-ui .login-fields .labeled-field.empty input { background: transparent; }

.login-ui .login-fields .labeled-field input:hover { border-color: rgba(148, 163, 184, 0.35); }

.login-ui .login-fields .labeled-field input:focus {
    background: var(--cc-input);
    border-color: var(--cc-accent);
    box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.14);
}

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

.login-ui .login-dialog .buttons input[type="submit"] {
    width: 100%;
    margin: 0;
    padding: 0.9em 1em;
    font-size: 1em;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #fff;
    text-shadow: none;
    background: var(--cc-grad);
    background-size: 140% 140%;
    border: 0;
    border-radius: 11px;
    box-shadow: 0 12px 30px rgba(59, 130, 246, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease, background-position 0.4s ease;
}

.login-ui .login-dialog .buttons input[type="submit"]:hover {
    filter: brightness(1.08);
    background-position: 100% 0;
    transform: translateY(-1px);
    box-shadow: 0 16px 36px rgba(59, 130, 246, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.login-ui .login-dialog .buttons input[type="submit"]:active { transform: translateY(0); filter: brightness(0.95); }

.login-ui .login-dialog .buttons input[type="submit"]:disabled {
    opacity: 0.55;
    transform: none;
    cursor: progress;
}

.login-ui.continuation .login-dialog .buttons input[type="submit"] { width: 100%; }

/* Error banner */
.login-ui.error p.login-error {
    top: 1.25em;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: calc(100% - 2em);
    max-width: 440px;
    margin: 0;
    padding: 0.85em 1.1em;
    border-radius: 12px;
    color: #fecaca;
    background: rgba(127, 29, 29, 0.55);
    border: 1px solid rgba(248, 113, 113, 0.4);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

/* TOTP enrolment */
.login-ui .totp-qr-code img {
    background: #fff;
    padding: 10px;
    border: 0;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

.login-ui .totp-hide-details,
.login-ui .totp-show-details { color: var(--cc-accent); }

.login-ui h3.totp-details-header { color: var(--cc-text-2); }

.login-ui .totp-details td { color: var(--cc-text); }

.login-ui .login-dialog .login-fields .totp-code input {
    text-align: center;
    font-size: 1.35em;
    letter-spacing: 0.4em;
    font-variant-numeric: tabular-nums;
    padding: 0.6em 1em;
}

.login-ui .login-dialog .login-fields .totp-code input::placeholder {
    letter-spacing: 0.02em;
    font-size: 0.7em;
}

/* ------------------------------------------------------------------ */
/* Loading                                                              */
/* ------------------------------------------------------------------ */

.loading::before {
    width: 56px;
    height: 56px;
    margin-left: -28px;
    margin-top: -28px;
    background-image: url("app/ext/carrierclass-branding/images/mark.svg");
    background-size: 56px 56px;
    border-radius: 16px;
    animation: cc-pulse 1.4s ease-in-out infinite;
}

@keyframes cc-pulse {
    0%, 100% { transform: scale(0.92); opacity: 0.55; box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.35); }
    50%      { transform: scale(1);    opacity: 1;    box-shadow: 0 0 0 14px rgba(34, 211, 238, 0); }
}

/* ------------------------------------------------------------------ */
/* Headers, menus, tabs                                                 */
/* ------------------------------------------------------------------ */

.header {
    background: var(--cc-bg-2);
    border-bottom: 1px solid var(--cc-border);
    box-shadow: none;
}

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

.header h2 {
    padding: 1.15em 1.4em;
    font-size: 0.78em;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--cc-muted);
}

.header .filter { display: flex; align-items: center; }

.header .filter input,
.header .filter input[type="text"] {
    color: var(--cc-text);
    background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%237d889c%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%226.5%22/%3E%3Cpath d=%22M20 20l-4.2-4.2%22/%3E%3C/svg%3E") 0.85em center / 1em no-repeat;
    border: 0;
    border-left: 1px solid var(--cc-border);
    border-radius: 0;
    padding: 0.55em 0.9em 0.55em 2.4em;
    font-size: 0.9em;
    max-width: 16em;
}

.header .filter input:focus { outline: none; background-color: rgba(255, 255, 255, 0.02); }

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

/* user menu */
.menu-dropdown {
    border-left: 1px solid var(--cc-border);
    background: transparent;
    transition: background 0.15s ease;
}
.menu-dropdown:hover { background: rgba(255, 255, 255, 0.03); }
.menu-dropdown.open,
.menu-dropdown.open:hover { background: rgba(255, 255, 255, 0.05); }

.menu-dropdown .menu-title { color: var(--cc-text); padding: 0.9em 2.4em 0.9em 1em; }

.user-menu .menu-dropdown .menu-title {
    padding-left: 2.6em;
    font-weight: 600;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%2322d3ee%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%228%22 r=%224%22/%3E%3Cpath d=%22M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7%22/%3E%3C/svg%3E");
    background-position: 1em center;
    background-size: 1.1em;
}

.menu-dropdown .menu-indicator {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%237d889c%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 9l6 6 6-6%22/%3E%3C/svg%3E");
    background-size: 0.95em;
    transition: transform 0.15s ease;
}
.menu-dropdown.open .menu-indicator { transform: rotate(180deg); }

.menu-dropdown .menu-contents {
    top: calc(100% + 6px);
    right: 8px;
    min-width: 240px;
    padding: 0.35em;
    background: var(--cc-surface-2);
    border: 1px solid var(--cc-border-2);
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}

.menu-dropdown .menu-contents li a {
    color: var(--cc-text-2);
    border-radius: 9px;
    padding: 0.7em 0.9em;
    transition: background 0.12s ease, color 0.12s ease;
}

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

.menu-dropdown .menu-contents li a.current,
.menu-dropdown .menu-contents li a.current:hover { background-color: transparent; opacity: 0.4; }

.menu-dropdown .menu-contents li a.danger { color: #fff; background-color: rgba(239, 68, 68, 0.85); }
.menu-dropdown .menu-contents li a.danger:hover { background-color: var(--cc-danger); }

.user-menu .menu-dropdown .menu-contents li a {
    padding-left: 2.6em;
    background-position: 0.9em center;
    background-size: 1.05em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23b6c0d2%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%224%22 width=%2218%22 height=%2212%22 rx=%222%22/%3E%3Cpath d=%22M8 20h8M12 16v4%22/%3E%3C/svg%3E");
}
.user-menu .menu-dropdown .menu-contents li a[href="#/"] { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23b6c0d2%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 11l9-8 9 8%22/%3E%3Cpath d=%22M5 10v10h14V10%22/%3E%3Cpath d=%22M10 20v-6h4v6%22/%3E%3C/svg%3E"); }
.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("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23b6c0d2%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 6h9M17 6h3M4 12h3M11 12h9M4 18h11M19 18h1%22/%3E%3Ccircle cx=%2215%22 cy=%226%22 r=%222%22/%3E%3Ccircle cx=%229%22 cy=%2212%22 r=%222%22/%3E%3Ccircle cx=%2217%22 cy=%2218%22 r=%222%22/%3E%3C/svg%3E"); }
.user-menu .menu-dropdown .menu-contents li a.logout { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23f87171%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4%22/%3E%3Cpath d=%22M9 17l-5-5 5-5%22/%3E%3Cpath d=%22M4 12h11%22/%3E%3C/svg%3E"); color: #fca5a5; }
.user-menu .menu-dropdown .menu-contents li a.logout:hover { background-color: rgba(239, 68, 68, 0.12); }
.client .user-menu .menu-dropdown .menu-contents li a.disconnect { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23b6c0d2%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 6l12 12M18 6L6 18%22/%3E%3C/svg%3E"); }

.user-menu .menu-dropdown .menu-contents .profile {
    margin: 0.6em 0.6em 0.4em;
    padding-bottom: 0.8em;
    border-bottom: 1px solid var(--cc-border);
}
.user-menu .menu-dropdown .menu-contents .profile a { color: var(--cc-text); text-decoration: none; }
.user-menu .menu-dropdown .menu-contents .profile .organization,
.user-menu .menu-dropdown .menu-contents .profile .organizational-role { color: var(--cc-muted); }


/* page / section tabs */
.page-tabs .page-list ul,
.section-tabs ul {
    padding: 0 0.8em;
    background: var(--cc-bg-2);
    border-bottom: 1px solid var(--cc-border);
}

.page-tabs .page-list li a[href],
.page-tabs .page-list li a[href]:visited,
.section-tabs li a {
    color: var(--cc-muted);
    font-weight: 500;
    padding: 0.95em 1.1em;
    transition: color 0.12s ease, box-shadow 0.12s ease;
}

.page-tabs .page-list li a[href]:hover,
.section-tabs li a:hover {
    background-color: transparent;
    color: var(--cc-text);
}

.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: transparent;
    color: var(--cc-text);
    box-shadow: inset 0 -2px 0 var(--cc-accent);
}

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

.list-item .name,
.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(--cc-text);
}

.list-item .usage,
.caption .activeUserCount { color: var(--cc-muted); }

.list-item .caption { border-radius: 9px; transition: background 0.12s ease; }
.list-item:not(.selected) .caption:hover { background: rgba(255, 255, 255, 0.045); }
.list-item.selected { background: var(--cc-accent-soft); border-radius: 9px; }

.all-connections { margin: 1.25em 1.5em; }
.all-connections .list-item .caption { padding: 0.45em 0.6em; }

/* generic dark icons -> light */
.icon,
.connection .icon,
.connection-group .icon,
.sharing-profile .icon { filter: invert(0.88) hue-rotate(180deg); }

/* custom icons for the common cases (no filter) */
.connection .icon.rdp,
.connection .icon.vnc,
.connection-group.empty.balancer .icon {
    filter: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%2322d3ee%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%224%22 width=%2218%22 height=%2212%22 rx=%222%22/%3E%3Cpath d=%22M8 20h8M12 16v4%22/%3E%3C/svg%3E");
    background-size: 18px 18px;
}
.connection .icon.ssh,
.connection .icon.telnet,
.connection .icon.kubernetes {
    filter: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%2322d3ee%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%224%22 width=%2218%22 height=%2216%22 rx=%222%22/%3E%3Cpath d=%22M7 9l3 3-3 3M12 15h5%22/%3E%3C/svg%3E");
    background-size: 18px 18px;
}
.connection-group > .caption .icon {
    filter: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23fbbf24%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z%22/%3E%3C/svg%3E");
    background-size: 18px 18px;
}
.connection-group.expanded > .caption .icon { filter: none; background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23fbbf24%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 17V7a2 2 0 0 1 2-2h4l2 2h6a2 2 0 0 1 2 2v1%22/%3E%3Cpath d=%22M3 19l2.6-8H22l-2.6 8z%22/%3E%3C/svg%3E"); }
.expandable > .caption .icon.expand {
    filter: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%237d889c%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9 6l6 6-6 6%22/%3E%3C/svg%3E");
    background-size: 14px 14px;
    transition: transform 0.15s ease;
}
.expandable.expanded > .caption .icon.expand {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%237d889c%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9 6l6 6-6 6%22/%3E%3C/svg%3E");
    transform: rotate(90deg);
}
.expandable.empty > .caption .icon.expand { opacity: 0.25; }

.expandable.expanded > .children > .list-item:before { border-left-color: var(--cc-border-2); }
.expandable.expanded > .children > .list-item:after { border-bottom-color: var(--cc-border-2); }

/* recent connections */
div.recent-connections { margin: 1.25em 1em 0.5em; }

div.recent-connections div.connection {
    margin: 0.6em;
    padding: 0.75em 0.75em 0.6em;
    max-width: 300px;
    background: var(--cc-surface);
    border: 1px solid var(--cc-border);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.recent-connections .connection:hover {
    background: var(--cc-surface-2);
    border-color: rgba(34, 211, 238, 0.45);
    transform: translateY(-3px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(34, 211, 238, 0.15);
}

.recent-connections .connection .thumbnail { margin: 0 0 0.6em; }

.recent-connections .connection .thumbnail > * {
    max-width: 100%;
    border: 1px solid var(--cc-border);
    border-radius: 10px;
    box-shadow: none;
    background: #000;
}

.recent-connections .connection .caption .name { color: var(--cc-text); font-weight: 500; font-size: 0.92em; }

.recent-connections .connection .remove-recent::after { filter: invert(1); }

.placeholder {
    color: var(--cc-muted);
    text-shadow: none;
    font-size: 1em;
    font-weight: 500;
    opacity: 1;
    padding: 1em;
}

/* ------------------------------------------------------------------ */
/* Forms, inputs, buttons, tables                                       */
/* ------------------------------------------------------------------ */

div.location,
input[type=text], input[type=email], input[type=number], input[type=password],
input[type=search], input[type=date], input[type=time], textarea:not(.clipboard-service-target), select {
    color: var(--cc-text);
    background: var(--cc-input);
    border: 1px solid var(--cc-border-2);
    border-radius: 8px;
    padding: 0.45em 0.65em;
    font-size: 0.9em;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input[type=text]:focus, input[type=email]:focus, input[type=number]:focus,
input[type=password]:focus, input[type=search]:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--cc-accent);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.14);
}

select option { background: var(--cc-surface); color: var(--cc-text); }

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

input[type="submit"], button, a.button {
    color: var(--cc-text);
    text-shadow: none;
    font-weight: 600;
    background-color: var(--cc-surface-2);
    border: 1px solid var(--cc-border-2);
    border-radius: 9px;
    padding: 0.5em 1.15em;
    box-shadow: none;
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}

input[type="submit"]:hover, button:hover, a.button:hover {
    background-color: var(--cc-surface-3);
    border-color: rgba(34, 211, 238, 0.5);
}

input[type="submit"]:active, button:active, a.button:active {
    background-color: var(--cc-surface);
    box-shadow: none;
    transform: translateY(1px);
}

button.danger, a.button.danger {
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.45);
    color: #fca5a5;
}
button.danger:hover, a.button.danger:hover { background: rgba(239, 68, 68, 0.26); border-color: var(--cc-danger); color: #fff; }

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

.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 { background-position: 0.65em center; }

table.sorted { border-collapse: separate; border-spacing: 0; border: 1px solid var(--cc-border); border-radius: 12px; overflow: hidden; }
table.sorted th { background: var(--cc-surface-2); color: var(--cc-text-2); }
table.sorted th, table.sorted td { border: 0; border-bottom: 1px solid var(--cc-border); padding: 0.65em 1em; }
table.sorted tr:last-child td { border-bottom: 0; }
table.sorted tbody tr:hover td { background: rgba(255, 255, 255, 0.025); }
table.sorted th.sort-primary { color: var(--cc-text); }
table.sorted th.sort-primary:after { filter: invert(0.85); }

.settings table.properties th { color: var(--cc-text-2); }

.settings, .manage-user, .manage-user-group, .manage-connection,
.manage-connection-group, .manage-sharing-profile { color: var(--cc-text); }

/* ------------------------------------------------------------------ */
/* Notifications and dialogs                                            */
/* ------------------------------------------------------------------ */

.notification {
    color: var(--cc-text);
    background: var(--cc-surface);
    border: 1px solid var(--cc-border-2);
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

.notification.error { background: #1d1216; border-color: rgba(248, 113, 113, 0.4); }

.notification .title-bar {
    font-size: 0.85em;
    letter-spacing: 0.1em;
    color: var(--cc-text-2);
    background: var(--cc-surface-2);
    border-bottom: 1px solid var(--cc-border);
    box-shadow: none;
    padding: 0.85em 1.1em;
}

.notification .progress {
    background: var(--cc-input);
    border: 1px solid var(--cc-border-2);
    border-radius: 8px;
    overflow: hidden;
}
.notification .progress .bar { background: var(--cc-grad); box-shadow: none; }

guac-modal { background: rgba(5, 8, 14, 0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

/* in-session status / credential prompt */
.client-status-modal { background: rgba(5, 8, 14, 0.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

.client-status-modal .notification,
.client-status-modal .notification.error {
    width: calc(100% - 2em);
    max-width: 440px;
    margin: 0 auto;
    padding: 1.6em 1.6em 1.3em;
    color: var(--cc-text);
    background: rgba(16, 22, 35, 0.9);
    border: 1px solid var(--cc-border-2);
    border-radius: 18px;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
}

.client-status-modal .notification.error { border-color: rgba(248, 113, 113, 0.45); }

.client-status-modal .notification .parameters { max-width: none; }

.client-status-modal .notification .parameters .fields { border-spacing: 0 0.5em; border-collapse: separate; }

.client-status-modal .notification .parameters .fields .field-header {
    color: var(--cc-text-2);
    font-size: 0.85em;
    vertical-align: middle;
    white-space: nowrap;
}

.client-status-modal .notification .parameters input[type=email],
.client-status-modal .notification .parameters input[type=number],
.client-status-modal .notification .parameters input[type=password],
.client-status-modal .notification .parameters input[type=text],
.client-status-modal .notification .parameters textarea {
    width: 100%;
    max-width: none;
    padding: 0.65em 0.8em;
    font-size: 0.95em;
    color: var(--cc-text);
    background: var(--cc-input);
    border: 1px solid var(--cc-border-2);
    border-radius: 10px;
}

.client-status-modal .notification .parameters input:focus {
    border-color: var(--cc-accent);
    box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.14);
    outline: none;
}

.client-status-modal .notification .buttons { margin: 1em 0 0; }

.client-status-modal .notification .button,
.client-status-modal .notification button {
    min-width: 7em;
    padding: 0.6em 1.3em;
    font-weight: 600;
    color: var(--cc-text);
    background: var(--cc-surface-2);
    border: 1px solid var(--cc-border-2);
    border-radius: 10px;
}

.client-status-modal .notification .button:first-child,
.client-status-modal .notification button:first-child {
    color: #fff;
    background: var(--cc-grad);
    border-color: transparent;
    box-shadow: 0 10px 26px rgba(59, 130, 246, 0.3);
}

.client-status-modal .notification .button:hover,
.client-status-modal .notification button:hover { text-decoration: none; filter: brightness(1.1); }

/* in-session side menu (Ctrl+Alt+Shift) */
.menu {
    background: var(--cc-surface);
    color: var(--cc-text);
    border-right: 1px solid var(--cc-border);
    box-shadow: 20px 0 60px rgba(0, 0, 0, 0.5);
}

.menu-section h3 { color: var(--cc-text-2); font-size: 0.85em; letter-spacing: 0.08em; text-transform: uppercase; }

#guac-menu #devices .device,
#guac-menu #share-links {
    background-color: var(--cc-surface-2);
    border: 1px solid var(--cc-border);
    border-radius: 10px;
}
#guac-menu #devices .device:hover { border-color: rgba(34, 211, 238, 0.5); }

.menu .choice label, .menu .caption, .menu .figure .caption { color: var(--cc-text-2); }

.menu #mouse-settings .figure img,
.menu #keyboard-settings .figure img { filter: invert(0.9) hue-rotate(180deg); opacity: 0.9; }

.clipboard, #clipboard-settings textarea, .menu textarea {
    color: var(--cc-text);
    background: var(--cc-input);
    border: 1px solid var(--cc-border-2);
    border-radius: 10px;
}

/* ------------------------------------------------------------------ */
/* Round 2 fixes                                                        */
/* ------------------------------------------------------------------ */

/* hidden helper used by the clipboard service - keep it invisible */
.clipboard-service-target {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 0;
}

/* in-session clipboard editor; respect "contents hidden" mode */
.clipboard,
.clipboard-editor .clipboard {
    color: var(--cc-text);
    background: var(--cc-input);
    border: 1px solid var(--cc-border-2);
    border-radius: 10px;
    padding: 0.5em 0.65em;
}
.clipboard-editor .clipboard.clipboard-contents-hidden,
.menu textarea.clipboard.clipboard-contents-hidden { color: transparent; }
.clipboard-editor .clipboard-contents-hidden-hint .clipboard-contents-hidden-hint-text {
    background: rgba(255, 255, 255, 0.04);
    color: var(--cc-muted);
    border-radius: 8px;
    margin: 0.5em;
}

/* list filters (settings pages) */
.filter .search-string,
.filter input.search-string {
    background-color: var(--cc-input);
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%237d889c%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%226.5%22/%3E%3Cpath d=%22M20 20l-4.2-4.2%22/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 1em;
    background-position: 0.85em center;
    padding: 0.6em 0.8em 0.6em 2.4em;
}

/* settings "New connection / New group / Import / New user" buttons */
a.button.add-user,
a.button.add-user-group,
a.button.add-connection,
a.button.add-connection-group,
a.button.import-connections {
    padding: 0.55em 1em 0.55em 2.2em;
    font-size: 0.85em;
}
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 {
    width: 2.2em;
    background-position: 0.75em center;
    filter: invert(1);
}

/* section layout on settings + management pages */
.settings.section,
.manage-connection .section, .manage-connection-group .section,
.manage-user .section, .manage-user-group .section, .manage-sharing-profile .section {
    margin: 1.4em 1.75em;
}

.settings.section > p,
.settings.section p,
.view .section > p {
    color: var(--cc-text-2);
    line-height: 1.55;
    max-width: 75em;
}

h2.header,
.view h2.header {
    display: block;
    margin: 0;
    padding: 1.05em 1.75em;
    font-size: 0.78em;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--cc-text-2);
    background: var(--cc-bg-2);
    border-top: 1px solid var(--cc-border);
    border-bottom: 1px solid var(--cc-border);
}

h3.form-header {
    margin: 1.6em 0 0.6em;
    font-size: 0.78em;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cc-accent);
}

.form table.fields th,
.form .fields .field-header,
.manage-connection table.properties th,
.manage-connection-group table.properties th,
.manage-user table.properties th,
.manage-user-group table.properties th,
.manage-sharing-profile table.properties th { color: var(--cc-text-2); }

/* permission / related-object lists on user pages */
.related-objects .abbreviated-related-objects,
.related-objects .all-related-objects { color: var(--cc-text-2); }

/* credential prompt heading */
.client-status-modal .notification .parameters::before {
    content: "Sign in to this server";
    display: block;
    margin: 0 0 1em;
    font-size: 0.8em;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cc-muted);
    text-align: left;
}
/*
 * 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;

}
.totp-enroll p,.totp-details{font-size:.8em}.totp-qr-code{text-align:center}.totp-qr-code img{margin:1em;border:1px solid rgba(0,0,0,0.25);box-shadow:1px 1px 2px rgba(0,0,0,0.25);cursor:pointer}h3.totp-details-header{font-size:.8em}h3.totp-details-header::before{content:'▸ '}.totp-details-visible h3.totp-details-header::before{content:'▾ '}.totp-details,.totp-hide-details{display:none}.totp-details-visible .totp-details{display:table}.totp-details-visible .totp-hide-details{display:inline}.totp-details-visible .totp-show-details{display:none}.totp-hide-details,.totp-show-details{color:blue;text-decoration:underline;cursor:pointer;margin:0 .25em;font-weight:normal}.totp-details{margin:0 auto}.totp-details th{padding-right:.25em;text-align:left}.totp-details td{font-family:monospace}.totp-detail{display:inline-block;margin:0 .25em}