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

}
/* =====================================================================
   ITLabForge - branding theme for Apache Guacamole 1.6.0
   Secure RDP gateway for the ITLabForge Lab Player.
   Palette (from itlabforge.com):
     navy bg     #0B1220     panel #111a2e / #16213a
     logo blue   #0B5CAB     ember amber #D97706 / #F59E0B
   Loaded as an extension; rules below are appended last and override stock.
   ===================================================================== */

:root {
    --itf-bg:        #0B1220;
    --itf-bg-2:      #111a2e;
    --itf-panel:     #16213a;
    --itf-border:    #243049;
    --itf-blue:      #0B5CAB;
    --itf-blue-2:    #0a4f95;
    --itf-ember:     #D97706;
    --itf-ember-2:   #F59E0B;
    --itf-text:      #e8eefc;
    --itf-muted:     #93a4c3;
}

/* ---------- branded loading splash (animated logo) ----------
   A full-screen splash that shows the animated mark while the SPA boots,
   then fades out.  Pure CSS - no scripts needed. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: var(--itf-bg) url('app/ext/itlabforge-branding/images/loader.svg') center center no-repeat;
    background-size: 128px 128px;
    animation: itfSplashOut 1.8s ease 1.1s forwards;
}
body::after {
    content: "Connecting to Lab Player\2026";
    position: fixed;
    left: 0; right: 0; top: calc(50% + 92px);
    text-align: center;
    z-index: 100001;
    color: var(--itf-muted);
    font: 600 13px/1.4 'Segoe UI',Inter,Roboto,Arial,sans-serif;
    letter-spacing: 2px;
    animation: itfSplashOut 1.8s ease 1.1s forwards;
}
@keyframes itfSplashOut {
    to { opacity: 0; visibility: hidden; }
}

/* ---------- global background ---------- */
body,
.login-ui,
#content,
.fullscreen {
    background: radial-gradient(1100px 560px at 50% -12%, var(--itf-bg-2) 0%, var(--itf-bg) 62%) !important;
    color: var(--itf-text);
}

/* ---------- login screen ---------- */
.login-ui {
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-ui .login-dialog {
    background: var(--itf-panel) !important;
    border: 1px solid var(--itf-border);
    border-radius: 16px;
    box-shadow: 0 24px 70px rgba(0,0,0,0.6);
    padding: 36px 32px 30px;
    max-width: 430px;
}

/* official animated logo replaces the stock graphic */
.login-ui .logo,
.login-dialog .logo,
.login-ui .login-dialog .logo,
.login-ui .logo img,
.login-dialog .logo img {
    content: url('app/ext/itlabforge-branding/images/logo.svg') !important;
    background-image: url('app/ext/itlabforge-branding/images/logo.svg') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;
    width: 300px !important;
    height: 88px !important;
    max-width: 300px !important;
    margin: 2px auto 6px auto !important;
    display: block !important;
}

/* contextual tagline under the logo */
.login-ui .login-dialog::before {
    content: "Secure remote access to your ITLabForge lab pods";
    display: block;
    text-align: center;
    color: var(--itf-muted);
    font-size: 13px;
    margin: 0 0 20px;
    letter-spacing: .2px;
}

.login-ui .login-dialog .version,
.login-ui .copyright {
    color: var(--itf-muted) !important;
    opacity: 0.75;
}

/* ---------- inputs ---------- */
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], textarea, select {
    background: var(--itf-bg-2) !important;
    color: var(--itf-text) !important;
    border: 1px solid var(--itf-border) !important;
    border-radius: 9px !important;
}
input:focus, textarea:focus, select:focus {
    border-color: var(--itf-blue) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(11,92,171,0.30) !important;
}

/* ---------- buttons (brand blue, ember on hover/primary) ---------- */
button, input[type="submit"], input[type="button"], .button {
    background: var(--itf-blue) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 9px !important;
    font-weight: 600;
    transition: background .15s ease, box-shadow .15s ease;
}
button:hover, input[type="submit"]:hover, .button:hover {
    background: var(--itf-blue-2) !important;
    box-shadow: 0 0 0 3px rgba(11,92,171,0.25);
}
.login-ui button[type="submit"], .login-dialog .button[type="submit"] {
    background: linear-gradient(135deg, var(--itf-blue) 0%, var(--itf-blue-2) 100%) !important;
}
button.danger, .button.danger { background: #dc2626 !important; }

/* ---------- top menu / header ---------- */
.menu, #menu, .header, .page-tabs {
    background: var(--itf-bg-2) !important;
    border-bottom: 1px solid var(--itf-border);
    color: var(--itf-text);
}
.menu .menu-title { color: var(--itf-text) !important; }
/* small brand mark in the header */
.menu .menu-title::before {
    content: url('app/ext/itlabforge-branding/images/mark.svg');
    display: inline-block;
    width: 22px; height: 22px;
    vertical-align: middle;
    margin-right: 9px;
    transform: translateY(-1px);
}

/* ---------- connection list / home cards ---------- */
.connection, .connection-group, .recent-connections .connection {
    background: var(--itf-panel) !important;
    border: 1px solid var(--itf-border) !important;
    border-radius: 12px !important;
    color: var(--itf-text);
}
.connection:hover { border-color: var(--itf-blue) !important; }

/* ---------- in-session connecting / status overlay ---------- */
.status-overlay, .guac-error-dialog, .client-status,
[class*="loading"] .status, .notification {
    background: var(--itf-bg) !important;
    color: var(--itf-text) !important;
}

/* ---------- links + scrollbars ---------- */
a { color: var(--itf-blue); }
a:hover { color: #4f9fe0; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--itf-border); border-radius: 6px; }
::-webkit-scrollbar-track { background: var(--itf-bg); }

/* ---------- Guacamole Settings / admin tabs visibility on dark theme ----------
   Guacamole hardcodes these tab links to color:#000 (invisible on navy). */
.page-tabs .page-list li a[href],
.page-tabs .page-list li a[href]:visited,
.section-tabs li a {
    color: var(--itf-text) !important;
}
.page-tabs .page-list li a[href]:hover,
.section-tabs li a:hover {
    background-color: var(--itf-panel) !important;
    color: #ffffff !important;
}
.page-tabs .page-list li.current a[href],
.section-tabs li.current a {
    color: #ffffff !important;
    border-bottom: 2px solid var(--itf-blue) !important;
}

/* settings section content + tables */
.settings, .settings .section, .settings .header h2 { color: var(--itf-text) !important; }
.settings table th, .settings table td { color: var(--itf-text) !important; border-color: var(--itf-border) !important; }
.settings .section .header { color: var(--itf-text) !important; }

/* dropdown menus (top-right user menu, etc.) */
.menu-dropdown, .menu-dropdown .menu-contents, .menu-dropdown a, .menu-dropdown li a {
    background: var(--itf-panel) !important;
    color: var(--itf-text) !important;
}
.menu-dropdown a:hover, .menu-dropdown li a:hover { background: var(--itf-bg-2) !important; color:#fff !important; }

/* hide the redundant app-name text on the login (logo already shows the name) */
.login-ui .app-name, .login-dialog .app-name { display: none !important; }

/* ---------- Guacamole list / table row content on dark theme ----------
   Guacamole hardcodes color:#000 on row links (usernames, connection names),
   list-item names, dropdown items and "new ..." links. Force them light. */
.connection-group a, .connection-group a:hover, .connection-group a:visited,
.connection a, .connection a:hover, .connection a:visited,
.user-group a, .user-group a:hover, .user-group a:visited,
.user a, .user a:hover, .user a:visited,
.list-item .name,
.menu-dropdown .menu-contents li a,
.settings.connections .connection-list .new-connection-group a,
.settings.connections .connection-list .new-connection a,
.settings.connections .connection-list .new-sharing-profile a,
.settings a, .settings table td, .settings table td a, .settings .name {
    color: var(--itf-text) !important;
}
.connection a:hover, .user a:hover, .connection-group a:hover, .user-group a:hover,
.menu-dropdown .menu-contents li a:hover, .settings a:hover {
    color: #ffffff !important;
}
.menu-dropdown .menu-contents li a:hover { background: var(--itf-bg-2) !important; }
/* keep history-recording links as accent blue */
.settings.connectionHistory a.history-session-recording { color: #4f9fe0 !important; }