/*
 * CXPN Remote Access — dark theme + branding for Apache Guacamole 1.6.0
 * Palette: white / black / #25B089 accent, on a #363636 base.
 * Selectors verified against the live core bundle (1.guacamole.*.css). The core
 * theme is light with dark SVG icons, so many rules use !important to win the
 * specificity battle against attribute selectors like input[type=text].
 */

:root {
    --cxpn-bg:            #363636;  /* base background        */
    --cxpn-bg-elev:       #404040;  /* dialogs, panels        */
    --cxpn-bg-elev2:      #4a4a4a;  /* inputs, hover surfaces */
    --cxpn-header:        #2b2b2b;  /* top bar                */
    --cxpn-border:        rgba(255, 255, 255, 0.18);
    --cxpn-text:          #f0f0f0;
    --cxpn-text-dim:      #b8b8b8;
    --cxpn-accent:        #25b089;
    --cxpn-accent-hover:  #2cc79b;
    --cxpn-accent-active: #1d8d6d;
    --cxpn-danger:        #c0392b;
    --cxpn-danger-hover:  #e74c3c;
}

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

html,
body {
    background: var(--cxpn-bg) !important;
    color: var(--cxpn-text);
}

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

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

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

/* Core uses div.login-ui{background:#fff}, which out-specifies a plain .login-ui */
.login-ui { background: var(--cxpn-bg) !important; }

.login-ui .login-dialog {
    background-color: var(--cxpn-bg-elev);
    border: 1px solid var(--cxpn-border);
    border-radius: 6px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    color: var(--cxpn-text);
}

.login-ui .login-dialog .logo {
    width: 12em;
    height: 10.3em;          /* 465:398 aspect of the lockup */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-background-size: contain;
    background-image: url('app/ext/cxpn-branding/resources/images/cxpn-login.svg');
}

.login-ui .login-dialog .version,
.login-ui .login-dialog .copyright { color: var(--cxpn-text-dim); }

/* ---- Header / top bar --------------------------------------------------- */

.header {
    background: var(--cxpn-header);
    color: var(--cxpn-text);
    border-bottom: 1px solid var(--cxpn-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.header h2 { color: var(--cxpn-text); }

.header .logo {
    background-image: url('app/ext/cxpn-branding/resources/images/cxpn-mark.svg') !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* ---- Text inputs / textareas / selects ---------------------------------- *
 * Core sets input[type=text],textarea{background:#fff} which beats a bare
 * input{} rule, so we must be explicit + !important here.                    */

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
    background-color: var(--cxpn-bg-elev2) !important;
    color: var(--cxpn-text) !important;
    border: 1px solid var(--cxpn-border) !important;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    background-color: var(--cxpn-bg-elev2) !important;
    color: var(--cxpn-text) !important;
    border-color: var(--cxpn-accent) !important;
    outline: none;
}

input::placeholder,
textarea::placeholder { color: var(--cxpn-text-dim) !important; }

select option { background: var(--cxpn-bg-elev); color: var(--cxpn-text); }

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

/* Chrome/WebKit autofill would otherwise force a white box with black text */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--cxpn-text) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--cxpn-bg-elev2) inset !important;
    caret-color: var(--cxpn-text) !important;
}

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

a.button,
button,
input[type="submit"] {
    background-color: var(--cxpn-accent);
    color: #ffffff;
    border: 1px solid var(--cxpn-accent);
    text-shadow: none;
    font-weight: bold;
}

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

a.button:active,
button:active,
input[type="submit"]:active {
    background-color: var(--cxpn-accent-active);
    border-color: var(--cxpn-accent-active);
}

button.danger,
a.button.danger {
    background-color: var(--cxpn-danger) !important;
    border-color: var(--cxpn-danger) !important;
    color: #ffffff;
}

button.danger:hover,
a.button.danger:hover {
    background-color: var(--cxpn-danger-hover) !important;
    border-color: var(--cxpn-danger-hover) !important;
}

button:disabled,
input[type="submit"]:disabled { opacity: 0.5; }

/* ---- Content text (core sets these to #000) ----------------------------- */

.menu-dropdown .menu-contents li a,
.menu-section h3,
.list-item .name,
.caption,
.notification,
.connection a, .connection a:hover, .connection a:visited,
.connection-group a, .connection-group a:hover, .connection-group a:visited,
.user a, .user a:hover, .user a:visited,
.user-group a, .user-group a:hover, .user-group a:visited,
.settings.connections .connection-list .new-connection a,
.settings.connections .connection-list .new-connection-group a,
.settings.connections .connection-list .new-sharing-profile a {
    color: var(--cxpn-text) !important;
}

/* ---- Tabs (page + section) ---------------------------------------------- */

.page-tabs .page-list li a[href],
.page-tabs .page-list li a[href]:visited,
.section-tabs li a {
    color: var(--cxpn-text) !important;
}

.page-tabs .page-list li a.current,
.section-tabs li a.current {
    color: var(--cxpn-accent) !important;
    border-bottom: 2px solid var(--cxpn-accent);
}

/* ---- Menus / dropdowns -------------------------------------------------- */

.menu,
.menu-content,
.menu-body,
.menu-dropdown .menu-contents,
.user-menu .menu-dropdown .menu-contents {
    background-color: var(--cxpn-bg-elev) !important;
    color: var(--cxpn-text);
}

.menu-dropdown .menu-contents li a:hover {
    background-color: rgba(37, 176, 137, 0.18) !important;
    color: #ffffff !important;
}

/* Top-right user-menu icon: swap to the white variant shipped with Guacamole */
.user-menu .menu-dropdown .menu-title {
    background-image: url('images/user-icons/guac-user-white.svg') !important;
}

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

table { color: var(--cxpn-text); }

th, thead {
    background-color: #2f2f2f;
    color: var(--cxpn-text);
    border-color: var(--cxpn-border);
}

td, tr { border-color: var(--cxpn-border); }

.list-item:hover,
tr:hover td,
.connection:hover,
.connection-group:hover { background-color: rgba(37, 176, 137, 0.15); }

/* ---- Logout / login-rejected pages + notifications ---------------------- *
 * Core paints these full-screen overlays #fff, with a white .notification card
 * inside (the "you have logged out / log in again" box).                      */

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

.notification {
    background: var(--cxpn-bg-elev) !important;
    color: var(--cxpn-text) !important;
    border: 1px solid var(--cxpn-border);
    border-radius: 6px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

.notification .title,
.notification p { color: var(--cxpn-text) !important; }

/* ---- Icons -------------------------------------------------------------- *
 * Core icons are dark SVGs (images/*.svg). Invert so they read on dark.
 * The CXPN header/login logos are .logo (not .icon) and are unaffected.      */

.icon { filter: invert(0.88) brightness(1.05); }

/* ---- Scrollbars (WebKit) ------------------------------------------------ */

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--cxpn-bg); }
::-webkit-scrollbar-thumb { background: #5a5a5a; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--cxpn-accent); }
/*
 * 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}