/* ==========================================================================
   1. CUSTOM LOGO IMAGE REGISTRATION (FIXED OVERRIDE)
   ========================================================================== */
div.login-ui .login-dialog .logo,
.login-ui .login-dialog-middle .logo,
.login-ui .login-dialog .logo {
    background-image: url('app/ext/jextron-link-theme/images/logo.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    display: block !important;
    height: 120px !important;    
    width: 100% !important;     
    margin: 20px auto !important; 
}

/* ==========================================================================
   2. GLOBAL BACKGROUND CONFIGURATION & VIEW PLATES
   ========================================================================== */
html, 
body, 
#app,
.viewport,
.login-ui-container, 
div.login-ui, 
.home-view, 
.settings-view,
.manage-settings-view {
    background-image: url('app/ext/jextron-link-theme/images/bg.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

/* Clear intermediate structural layout layers */
.page-container,
.main-view,
div[ng-view],
.client-view, 
.client-view-content,
.normal-view {
    background: transparent !important;
    background-color: transparent !important;
}

/* Dark translucent control panel wrapper for the settings area */
.settings-tab-container {
    background-color: rgba(15, 15, 15, 0.65) !important;
    padding: 15px !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

/* Login box structure containment */
.login-ui .login-dialog {
    background-color: rgba(25, 25, 25, 0.96) !important;
    border: 2px solid #ff6600 !important;
    box-shadow: 0 0 25px rgba(255, 102, 0, 0.35) !important;
    border-radius: 6px !important;
}

/* ==========================================================================
   3. NAVIGATION HEADER & TOP MENU TABS
   ========================================================================== */
.navigation, 
.header,
.settings-view .header {
    background-color: rgba(15, 15, 15, 0.75) !important; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important;  
    border-bottom: 1px solid rgba(255, 102, 0, 0.2) !important;
    padding: 5px 15px !important;
}

/* Sub-page section navigation links */
.page-tabs .page-list li a,
.navigation .tabs li a,
.settings-view .tabs li a,
.navigation .tabs li,
.user-menu .name {
    color: #ffffff !important;
    background-color: rgba(0, 0, 0, 0.4) !important;
    padding: 0.75em 1em !important;
    display: block !important;
    border-radius: 4px !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9) !important;
    font-weight: 600 !important;
    transition: all 0.15s ease-in-out !important;
}

/* Active/current tab highlight style */
.page-tabs .page-list li.current a,
.navigation .tabs li.current,
.settings-view .tabs li.current,
.tabs li.current a,
.navigation .tabs li.current a,
.tabs li.current {
    background-color: #ff9933 !important; 
    color: #121212 !important;            
    font-weight: bold !important;
    text-shadow: none !important; 
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.2) !important;
}

/* Hover style over options inside headers or tabs lists */
.page-tabs .page-list li a:hover,
.navigation .tabs li a:hover,
.settings-view .tabs li a:hover,
.navigation .tabs li:hover,
.settings-view .tabs li:hover,
.tabs li a:hover {
    background-color: rgba(255, 153, 51, 0.9) !important; 
    color: #121212 !important;
    text-shadow: none !important;
}

/* ==========================================================================
   4. MANAGEMENT DATA TABLES & AREA ISOLATIONS
   ========================================================================== */
.filter {
    background-color: rgba(30, 30, 30, 0.9) !important;
    border: 1px solid #444444 !important;
}

th, 
.table .header,
thead tr {
    background-color: rgba(20, 20, 20, 0.9) !important;
    color: #ff6600 !important;
    font-weight: bold !important;
}

/* Darkened backing plates for empty spaces or list rows */
.group-list-page,
.settings-tab-container .content,
.table-container {
    background-color: rgba(20, 20, 20, 0.75) !important;
    border-radius: 4px !important;
    padding: 15px !important;
}

/* Rows un-hovered style */
tr td,
.list-item .caption,
.table td {
    background-color: rgba(25, 25, 25, 0.75) !important;
    color: #ffffff !important;
    transition: background-color 0.15s ease;
}

/* Mouse hover row transformation to light orange block */
.list-item:not(.selected) .caption:hover,
.list-item .caption:hover,
tr:hover td,
.menu-item:hover,
.selected {
    background-color: rgba(255, 153, 51, 0.6) !important;
    color: #121212 !important;
    border-left: 4px solid #ff9933 !important;
}

/* ==========================================================================
   5. USER MENU DROPDOWN CONTROLS
   ========================================================================== */
.user-menu .menu-dropdown .menu-title {
    background-color: rgba(25, 25, 25, 0.75) !important;
    color: #ff6600 !important;
    border: 1px solid rgba(255, 102, 0, 0.3) !important;
    border-radius: 4px !important;
    padding: 0.5em 2em 0.5em 2.5em !important;
    transition: all 0.2s ease !important;
}

.user-menu .menu-dropdown .menu-title:hover,
.user-menu .menu-dropdown.open .menu-title {
    background-color: rgba(255, 153, 51, 0.85) !important;
    color: #121212 !important;
    border-color: #ff9933 !important;
}

.user-menu .menu-dropdown .menu-contents {
    background-color: rgba(20, 20, 20, 0.95) !important;
    border: 1px solid #ff6600 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6) !important;
}

.user-menu .menu-dropdown .menu-contents ul li a,
.user-menu .menu-dropdown .menu-contents .menu-item {
    color: #ffffff !important;
    background-color: transparent !important;
    padding: 8px 15px !important;
    display: block !important;
}

.user-menu .menu-dropdown .menu-contents ul li a:hover,
.user-menu .menu-dropdown .menu-contents .menu-item:hover {
    background-color: rgba(255, 153, 51, 0.8) !important;
    color: #121212 !important;
}

/* ==========================================================================
   6. TYPOGRAPHY, DISCOVERY MESSAGES & INPUT LABELS
   ========================================================================== */
h1, h2, h3, .settings-view h2, .caption {
    color: #ff6600 !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7) !important; 
}

/* Dark backup box structure for instructions page descriptors */
.settings-tab-container p, 
.settings-view p,
.manage-settings-view p {
    background-color: rgba(15, 15, 15, 0.8) !important;
    color: #ff6600 !important;
    padding: 12px 18px !important;
    border-radius: 6px !important;
    border-left: 4px solid #ff6600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
    line-height: 1.5 !important;
}

/* Empty alert placeholders */
.group-list-page .placeholder,
.settings-view .placeholder,
p.placeholder {
    color: #ff9933 !important;
    background-color: rgba(10, 10, 10, 0.85) !important;
    padding: 15px !important;
    border-radius: 6px !important;
    text-align: center !important;
    font-weight: bold !important;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.9) !important;
}

/* Identity / App text corrections inside login context */
.login-ui .login-dialog h2,
.login-ui .login-dialog .application-title,
.login-ui .login-dialog title {
    color: #ffffff !important;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.9) !important;
}

.login-ui .login-dialog .version .app-name,
.login-ui .login-dialog .notification {
    color: #ff6600 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8) !important;
    font-weight: bold !important;
}

.login-ui .login-dialog .version .version-number {
    color: #aaaaaa !important;
}

.login-ui .login-dialog .field-header {
    color: #ff6600 !important;
    text-shadow: none !important;
}

/* Input Fields & Actions elements */
input, select, textarea {
    background-color: #2a2a2a !important;
    color: #ffffff !important;
    border: 1px solid #444444 !important;
}
input:focus, select:focus {
    border-color: #ff6600 !important;
    box-shadow: 0 0 5px rgba(255, 102, 0, 0.5) !important;
}

.login-ui .login-dialog button, .submit-button, .button, button {
    background-color: #ff6600 !important;
    color: #121212 !important;
    font-weight: bold !important;
    border: none !important;
    text-transform: uppercase !important;
    border-radius: 4px !important;
}
.login-ui .login-dialog button:hover, .submit-button:hover, .button:hover, button:hover {
    background-color: #ff9933 !important;
    color: #121212 !important;
    box-shadow: 0 0 10px rgba(255, 153, 51, 0.5) !important;
    cursor: pointer !important;
}.cloud-menu-container {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 999;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.cloud-action-bar {
    display: flex;
    gap: 8px;
    background: rgba(30, 30, 30, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 6px 10px;
    border-radius: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    transition: opacity 0.2s ease;
}

/* Subtle fade out when mouse leaves to avoid blocking active desktop real-estate */
.cloud-action-bar:not(:hover) {
    opacity: 0.4;
}

.cloud-btn {
    background: transparent;
    border: none;
    color: #e0e0e0;
    padding: 6px 12px;
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
}

.cloud-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.cloud-btn.active {
    background: #0078d4; /* Windows Cloud Blue Accent */
    color: #ffffff;
}

/* Responsive collapse behavior for small displays */
@media (max-width: 600px) {
    .btn-text {
        display: none;
    }
    .cloud-action-bar {
        padding: 6px;
    }
}/*
 * 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;

}