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

.login-ui .sso-providers {

    padding: 0.25em 0.5em;
    position: absolute;
    bottom: 0;
    left: 0;

    display: none;

}

.login-ui .sso-providers:last-child {
    display: block;
}

.sso-providers ul {
    list-style: none;
}

.sso-providers ul, .sso-providers li {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.sso-providers li::before {
    content: ' / ';
}

.sso-providers li:first-child::before {
    display: none;
}
/**
 * ═══════════════════════════════════════════════════════════════════════════════
 * CodinCloud - Branding CSS v5.1
 * Complete theme with proper color contrast
 * ═══════════════════════════════════════════════════════════════════════════════
 */

:root {
    --cc-primary: #8B5CF6;
    --cc-primary-light: #A78BFA;
    --cc-secondary: #EC4899;
    --cc-success: #10B981;
    --cc-warning: #F59E0B;
    --cc-danger: #EF4444;
    --cc-info: #3B82F6;
    
    /* Backgrounds - darkest to lightest */
    --cc-bg-darkest: #0a0a0f;
    --cc-bg-darker: #12121a;
    --cc-bg-dark: #1a1a25;
    --cc-bg-medium: #242430;
    --cc-bg-light: #2e2e3d;
    --cc-bg-lighter: #3a3a4d;
    
    /* Text colors - ensure contrast */
    --cc-text-white: #ffffff;
    --cc-text-primary: #f0f0f5;
    --cc-text-secondary: #c0c0cc;
    --cc-text-muted: #8888a0;
    --cc-text-dark: #1a1a25;
    
    --cc-border: rgba(139, 92, 246, 0.3);
    --cc-border-light: rgba(255, 255, 255, 0.1);
    --cc-radius: 8px;
    --cc-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   GLOBAL RESET & BASE
   ═══════════════════════════════════════════════════════════════════════════════ */

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

/* Force all text to be light by default */
body, body * {
    color: inherit;
}

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--cc-bg-darker); }
::-webkit-scrollbar-thumb { 
    background: var(--cc-bg-lighter); 
    border-radius: 5px; 
    border: 2px solid var(--cc-bg-darker);
}
::-webkit-scrollbar-thumb:hover { background: var(--cc-primary); }

/* ═══════════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
    color: var(--cc-text-white) !important;
}

p, span, div, label, li {
    color: var(--cc-text-primary);
}

a {
    color: var(--cc-primary-light) !important;
    text-decoration: none !important;
}

a:hover {
    color: var(--cc-secondary) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LOGIN PAGE
   ═══════════════════════════════════════════════════════════════════════════════ */

.login-ui { 
    background: linear-gradient(135deg, var(--cc-bg-darkest) 0%, var(--cc-bg-dark) 100%) !important;
    background-image: 
        radial-gradient(ellipse at 20% 80%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(236, 72, 153, 0.1) 0%, transparent 50%),
        linear-gradient(135deg, var(--cc-bg-darkest) 0%, var(--cc-bg-dark) 100%) !important;
}

/* CodinCloud Logo on Login */
.login-ui .logo,
.login-ui .login-logo,
.login-ui img[src*="logo"] {
    content: url('images/logo.png') !important;
    max-width: 180px !important;
    max-height: 180px !important;
    width: auto !important;
    height: auto !important;
    margin-bottom: 20px !important;
}

/* Hide default Guacamole title, show CodinCloud */
.login-ui .login-dialog::before {
    content: 'CodinCloud' !important;
    display: block !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, var(--cc-primary), var(--cc-secondary)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-align: center !important;
    margin-bottom: 8px !important;
    letter-spacing: -0.5px !important;
}

.login-ui .login-dialog .title {
    font-size: 14px !important;
    color: var(--cc-text-muted) !important;
    font-weight: 400 !important;
    margin-bottom: 24px !important;
}

.login-ui .login-dialog {
    background: var(--cc-bg-medium) !important;
    border: 1px solid var(--cc-border) !important;
    border-radius: 16px !important;
    box-shadow: var(--cc-shadow) !important;
}

.login-ui .login-dialog h1,
.login-ui .login-dialog h2,
.login-ui .login-dialog h3,
.login-ui .login-dialog .title {
    color: var(--cc-text-white) !important;
}

.login-ui .login-dialog label {
    color: var(--cc-text-secondary) !important;
    font-weight: 500 !important;
}

.login-ui .login-dialog p,
.login-ui .login-dialog span,
.login-ui .login-dialog div {
    color: var(--cc-text-primary) !important;
}

.login-ui .login-dialog input[type="text"],
.login-ui .login-dialog input[type="password"],
.login-ui .login-dialog input[type="email"] {
    background: var(--cc-bg-darker) !important;
    border: 1px solid var(--cc-border) !important;
    border-radius: var(--cc-radius) !important;
    color: var(--cc-text-white) !important;
    padding: 12px !important;
}

.login-ui .login-dialog input::placeholder {
    color: var(--cc-text-muted) !important;
}

.login-ui .login-dialog input[type="submit"],
.login-ui .login-dialog button.login,
.login-ui .login-dialog .login-button {
    background: linear-gradient(135deg, var(--cc-primary), var(--cc-secondary)) !important;
    border: none !important;
    border-radius: var(--cc-radius) !important;
    color: var(--cc-text-white) !important;
    font-weight: 600 !important;
    padding: 12px 24px !important;
    cursor: pointer !important;
}

.login-ui .login-dialog .error,
.login-ui .login-dialog .warning {
    background: rgba(239, 68, 68, 0.2) !important;
    border: 1px solid var(--cc-danger) !important;
    color: #fca5a5 !important;
    border-radius: var(--cc-radius) !important;
    padding: 10px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   HEADER & NAVIGATION
   ═══════════════════════════════════════════════════════════════════════════════ */

.header, .guac-header, [class*="header"] {
    background: linear-gradient(90deg, var(--cc-bg-darkest), var(--cc-bg-dark)) !important;
    border-bottom: 1px solid var(--cc-border) !important;
}

.header *, .guac-header * {
    color: var(--cc-text-primary) !important;
}

/* CodinCloud Header Branding */
.header .title, .guac-header .title,
.header .logo, .guac-header .logo,
.header h1, .guac-header h1 {
    color: var(--cc-text-white) !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    background: linear-gradient(135deg, var(--cc-primary), var(--cc-secondary)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Logo in header */
.header img[src*="logo"],
.guac-header img[src*="logo"],
.header .logo img,
.guac-header .logo img {
    content: url('images/logo.png') !important;
    max-height: 32px !important;
    width: auto !important;
}

.header a, .header button,
.guac-header a, .guac-header button {
    color: var(--cc-text-secondary) !important;
    background: transparent !important;
}

.header a:hover, .header button:hover,
.guac-header a:hover, .guac-header button:hover {
    color: var(--cc-primary-light) !important;
}

/* Navigation tabs */
.nav-tabs, .tabs, [class*="tab-bar"] {
    background: var(--cc-bg-darker) !important;
    border-bottom: 1px solid var(--cc-border) !important;
}

.nav-tabs a, .tabs a, .tab {
    color: var(--cc-text-secondary) !important;
    background: transparent !important;
}

.nav-tabs a:hover, .tabs a:hover, .tab:hover {
    color: var(--cc-text-white) !important;
    background: var(--cc-bg-light) !important;
}

.nav-tabs a.active, .tabs a.active, .tab.active, .tab.selected {
    color: var(--cc-primary-light) !important;
    background: var(--cc-bg-medium) !important;
    border-bottom: 2px solid var(--cc-primary) !important;
}

/* User menu dropdown */
.user-menu, .dropdown-menu, [class*="dropdown"] {
    background: var(--cc-bg-medium) !important;
    border: 1px solid var(--cc-border) !important;
    border-radius: var(--cc-radius) !important;
    box-shadow: var(--cc-shadow) !important;
}

.user-menu *, .dropdown-menu * {
    color: var(--cc-text-primary) !important;
}

.user-menu a, .dropdown-menu a,
.user-menu button, .dropdown-menu button {
    color: var(--cc-text-primary) !important;
    background: transparent !important;
}

.user-menu a:hover, .dropdown-menu a:hover,
.user-menu button:hover, .dropdown-menu button:hover {
    background: var(--cc-bg-light) !important;
    color: var(--cc-text-white) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   HOME SCREEN & CONNECTION LIST
   ═══════════════════════════════════════════════════════════════════════════════ */

.home-screen, .home, [class*="home"] { 
    background: var(--cc-bg-darker) !important;
    background-image: 
        radial-gradient(ellipse at 10% 90%, rgba(139, 92, 246, 0.08) 0%, transparent 40%),
        radial-gradient(ellipse at 90% 10%, rgba(236, 72, 153, 0.05) 0%, transparent 40%) !important;
}

.home-screen h1, .home-screen h2, .home-screen h3,
.home h1, .home h2, .home h3 {
    color: var(--cc-text-white) !important;
}

/* Welcome banner on home */
.home-screen .header h1::before,
.home h1::before,
.recent-connections-header::before {
    content: '🚀 ' !important;
}

.home-screen p, .home-screen span, .home-screen div,
.home p, .home span, .home div {
    color: var(--cc-text-primary) !important;
}

/* Section headers */
.recent-connections-header,
.all-connections-header,
.connection-group-header,
.section-header,
[class*="section-header"] {
    color: var(--cc-text-white) !important;
    font-weight: 600 !important;
    border-bottom: 1px solid var(--cc-border) !important;
    padding-bottom: 8px !important;
    margin-bottom: 16px !important;
}

/* Connection items */
.connection-list .connection,
.recent-connection,
[class*="connection-item"] {
    background: var(--cc-bg-medium) !important;
    border: 1px solid var(--cc-border-light) !important;
    border-radius: var(--cc-radius) !important;
    transition: all 0.2s ease !important;
}

.connection-list .connection:hover,
.recent-connection:hover,
[class*="connection-item"]:hover {
    transform: translateY(-2px) !important;
    border-color: var(--cc-primary) !important;
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.25) !important;
}

.connection-list .connection .name,
.connection .name,
[class*="connection"] .name { 
    color: var(--cc-text-white) !important; 
    font-weight: 500 !important;
}

.connection-list .connection .protocol,
.connection .protocol,
[class*="connection"] .protocol { 
    color: var(--cc-text-muted) !important; 
    font-size: 0.85em !important;
}

/* Connection groups */
.connection-group {
    background: var(--cc-bg-dark) !important;
    border: 1px solid var(--cc-border-light) !important;
    border-radius: var(--cc-radius) !important;
}

.connection-group .caption,
.connection-group .name {
    color: var(--cc-text-secondary) !important;
}

.connection-group .icon {
    filter: brightness(0) invert(1) !important;
    opacity: 0.8 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SETTINGS PAGE (IMPORTANT!)
   ═══════════════════════════════════════════════════════════════════════════════ */

.settings-page, .settings, .preferences, .preferences-page,
.guac-settings, [class*="settings"], [class*="preferences"] {
    background: var(--cc-bg-darker) !important;
    color: var(--cc-text-primary) !important;
}

/* Settings content area */
.settings-page *, .settings *, .preferences *,
.guac-settings *, [class*="settings-content"] * {
    color: var(--cc-text-primary) !important;
}

/* Settings headers */
.settings-page h1, .settings-page h2, .settings-page h3, .settings-page h4,
.settings h1, .settings h2, .settings h3, .settings h4,
.preferences h1, .preferences h2, .preferences h3, .preferences h4,
.section-title, [class*="section-title"] {
    color: var(--cc-text-white) !important;
    font-weight: 600 !important;
}

/* Settings sections */
.settings-section, .preferences-section, .section,
[class*="settings-section"], [class*="form-section"] {
    background: var(--cc-bg-medium) !important;
    border: 1px solid var(--cc-border-light) !important;
    border-radius: var(--cc-radius) !important;
    padding: 16px !important;
    margin-bottom: 16px !important;
}

/* Settings labels */
.settings label, .preferences label,
.settings-page label, .preferences-page label,
.guac-form label, form label,
[class*="field-label"], [class*="form-label"] {
    color: var(--cc-text-secondary) !important;
    font-weight: 500 !important;
}

/* Settings descriptions/help text */
.settings .description, .preferences .description,
.settings-page .description, .field-description,
.help-text, [class*="help-text"], [class*="description"] {
    color: var(--cc-text-muted) !important;
    font-size: 0.9em !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FORMS & INPUTS (CRITICAL FOR SETTINGS)
   ═══════════════════════════════════════════════════════════════════════════════ */

input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="url"], input[type="search"],
input[type="tel"], input[type="date"], input[type="time"],
textarea, select {
    background: var(--cc-bg-darker) !important;
    border: 1px solid var(--cc-border) !important;
    border-radius: var(--cc-radius) !important;
    color: var(--cc-text-white) !important;
    padding: 10px 12px !important;
}

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

input:focus, textarea:focus, select:focus {
    border-color: var(--cc-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2) !important;
}

/* Select dropdowns */
select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238888a0' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    padding-right: 30px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

select option {
    background: var(--cc-bg-medium) !important;
    color: var(--cc-text-primary) !important;
}

/* Checkboxes and radios */
input[type="checkbox"], input[type="radio"] {
    accent-color: var(--cc-primary) !important;
    width: 18px !important;
    height: 18px !important;
}

/* Form groups */
.form-group, .field, .input-group,
[class*="form-group"], [class*="field-wrapper"] {
    margin-bottom: 16px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════════════════ */

button, .button, .btn,
input[type="button"], input[type="submit"],
[class*="button"], [role="button"] {
    background: var(--cc-bg-light) !important;
    border: 1px solid var(--cc-border) !important;
    border-radius: var(--cc-radius) !important;
    color: var(--cc-text-white) !important;
    padding: 10px 16px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    font-weight: 500 !important;
}

button:hover, .button:hover, .btn:hover,
input[type="button"]:hover, input[type="submit"]:hover {
    background: var(--cc-bg-lighter) !important;
    border-color: var(--cc-primary) !important;
}

/* Primary buttons */
button.primary, .button.primary, .btn-primary,
input[type="submit"], .submit-button {
    background: linear-gradient(135deg, var(--cc-primary), var(--cc-secondary)) !important;
    border: none !important;
    color: var(--cc-text-white) !important;
}

button.primary:hover, .button.primary:hover, .btn-primary:hover {
    opacity: 0.9 !important;
    transform: translateY(-1px) !important;
}

/* Danger buttons */
button.danger, .button.danger, .btn-danger {
    background: var(--cc-danger) !important;
    border-color: var(--cc-danger) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════════════════════════ */

table {
    background: var(--cc-bg-medium) !important;
    border-collapse: collapse !important;
    width: 100% !important;
}

th {
    background: var(--cc-bg-dark) !important;
    color: var(--cc-text-white) !important;
    font-weight: 600 !important;
    padding: 12px !important;
    text-align: left !important;
    border-bottom: 2px solid var(--cc-border) !important;
}

td {
    background: var(--cc-bg-medium) !important;
    color: var(--cc-text-primary) !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--cc-border-light) !important;
}

tr:hover td {
    background: var(--cc-bg-light) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   GUACAMOLE NATIVE MENU (Swipe from left / Ctrl+Alt+Shift)
   Complete override of default light theme
   ═══════════════════════════════════════════════════════════════════════════════ */

/* HIDE menu completely when closed - no visible edge pixels */
.menu:not(.open),
#guac-menu:not(.open),
#filesystem-menu:not(.open),
.client-body > .menu:not(.open) {
    left: -500px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Main menu container - CRITICAL: override the default #EEE background */
.client-body > .menu,
.menu#guac-menu,
#guac-menu,
#filesystem-menu,
div.menu {
    background: #12121a !important;
    background-color: #12121a !important;
}

/* When menu is open - ensure visibility */
.menu.open,
#guac-menu.open,
#filesystem-menu.open {
    left: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    background: #12121a !important;
    border-right: 2px solid #8B5CF6 !important;
    box-shadow: 4px 0 30px rgba(0, 0, 0, 0.7) !important;
}

/* Menu content wrapper - MUST be fully opaque */
.menu .menu-content,
.menu > .menu-content,
#guac-menu .menu-content,
#guac-menu > .menu-content {
    background: #1a1a25 !important;
    background-color: #1a1a25 !important;
    opacity: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
}

/* Menu body - scrollable content area */
.menu .menu-body,
.menu > .menu-content > .menu-body,
#guac-menu .menu-body {
    background: #12121a !important;
    background-color: #12121a !important;
    padding: 16px !important;
}

/* Menu sections - individual setting groups */
.menu .menu-section,
.menu-section,
#guac-menu .menu-section,
#clipboard-settings,
#keyboard-settings,
#mouse-settings,
#display-settings,
#devices,
#connection-settings {
    background: #242430 !important;
    background-color: #242430 !important;
    border: 1px solid rgba(139, 92, 246, 0.2) !important;
    border-radius: 8px !important;
    padding: 16px !important;
    margin-bottom: 12px !important;
}

/* Section headers */
.menu h2,
.menu h3,
.menu-section h3,
#guac-menu h2,
#guac-menu h3,
.connection-select-menu,
.share-menu {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid rgba(139, 92, 246, 0.3) !important;
}

/* All text elements in menu */
.menu *,
#guac-menu *,
#filesystem-menu *,
.menu-section *,
.menu-body * {
    color: #f0f0f5 !important;
}

/* Labels */
.menu label,
.menu-section label,
#guac-menu label {
    color: #c0c0cc !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    display: block !important;
    margin-bottom: 6px !important;
}

/* All inputs in menu */
.menu input[type="text"],
.menu input[type="number"],
.menu input[type="password"],
.menu select,
.menu textarea,
#guac-menu input,
#guac-menu select,
#guac-menu textarea {
    background: #0a0a0f !important;
    background-color: #0a0a0f !important;
    border: 1px solid rgba(139, 92, 246, 0.3) !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.menu input:focus,
.menu select:focus,
.menu textarea:focus {
    border-color: #8B5CF6 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2) !important;
}

/* Clipboard textarea */
#clipboard-settings textarea,
.menu textarea {
    min-height: 120px !important;
    resize: vertical !important;
    font-family: monospace !important;
}

/* Buttons in menu */
.menu button,
.menu .button,
#guac-menu button {
    background: #2e2e3d !important;
    border: 1px solid rgba(139, 92, 246, 0.3) !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    padding: 10px 16px !important;
    cursor: pointer !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.menu button:hover,
.menu .button:hover {
    background: #8B5CF6 !important;
    border-color: #8B5CF6 !important;
}

/* Checkboxes and radios */
.menu input[type="checkbox"],
.menu input[type="radio"],
#guac-menu input[type="checkbox"],
#guac-menu input[type="radio"] {
    accent-color: #8B5CF6 !important;
    width: 18px !important;
    height: 18px !important;
}

/* Share links section */
#share-links {
    background: rgba(139, 92, 246, 0.15) !important;
    border: 1px solid #8B5CF6 !important;
}

/* guac-menu Angular component */
guac-menu {
    display: block !important;
}

guac-menu .header {
    background: #12121a !important;
    border-bottom: 1px solid rgba(139, 92, 246, 0.3) !important;
    padding: 12px !important;
}

guac-menu .body {
    background: #1a1a25 !important;
    padding: 8px !important;
}

guac-menu .body a,
guac-menu .body button {
    display: block !important;
    padding: 10px 12px !important;
    color: #f0f0f5 !important;
    text-decoration: none !important;
    border-radius: 4px !important;
}

guac-menu .body a:hover,
guac-menu .body button:hover {
    background: rgba(139, 92, 246, 0.2) !important;
}

/* Filesystem menu specific */
#filesystem-menu .menu-content,
#filesystem-menu .menu-body {
    background: #12121a !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FILE BROWSER (SFTP)
   ═══════════════════════════════════════════════════════════════════════════════ */

.file-browser, [class*="file-browser"] {
    background: var(--cc-bg-dark) !important;
}

.file-browser *, [class*="file-browser"] * {
    color: var(--cc-text-primary) !important;
}

.file-browser .header, [class*="file-browser"] .header {
    background: var(--cc-bg-darker) !important;
    border-bottom: 1px solid var(--cc-border) !important;
    color: var(--cc-text-white) !important;
}

.file-browser .current-directory {
    background: var(--cc-bg-medium) !important;
    color: var(--cc-text-secondary) !important;
}

.file-browser .file, [class*="file-browser"] .file {
    color: var(--cc-text-primary) !important;
    border-bottom: 1px solid var(--cc-border-light) !important;
    padding: 10px !important;
}

.file-browser .file:hover {
    background: rgba(139, 92, 246, 0.15) !important;
}

.file-browser .file .name {
    color: var(--cc-text-white) !important;
}

.file-browser .file.directory .name {
    color: var(--cc-primary-light) !important;
    font-weight: 500 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FILE TRANSFERS
   ═══════════════════════════════════════════════════════════════════════════════ */

.file-transfers, [class*="file-transfer"] {
    background: var(--cc-bg-dark) !important;
    border-top: 1px solid var(--cc-border) !important;
}

.file-transfers *, [class*="file-transfer"] * {
    color: var(--cc-text-primary) !important;
}

.file-transfers .transfer, [class*="transfer-item"] {
    background: var(--cc-bg-medium) !important;
    border: 1px solid var(--cc-border-light) !important;
    border-radius: var(--cc-radius) !important;
    margin: 8px !important;
}

.file-transfers .transfer .filename {
    color: var(--cc-text-white) !important;
}

.file-transfers .progress .bar {
    background: linear-gradient(90deg, var(--cc-primary), var(--cc-secondary)) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   DIALOGS & MODALS
   ═══════════════════════════════════════════════════════════════════════════════ */

.dialog, .modal, [class*="dialog"], [class*="modal"]:not(#cc-clipboard-overlay) {
    background: var(--cc-bg-medium) !important;
    border: 1px solid var(--cc-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
}

.dialog *, .modal * {
    color: var(--cc-text-primary) !important;
}

.dialog h1, .dialog h2, .dialog h3,
.modal h1, .modal h2, .modal h3 {
    color: var(--cc-text-white) !important;
}

.dialog .buttons, .modal .buttons,
.dialog-buttons, .modal-buttons {
    background: var(--cc-bg-dark) !important;
    border-top: 1px solid var(--cc-border-light) !important;
    padding: 12px !important;
}

/* Overlay behind dialogs */
.dialog-container, .modal-backdrop, [class*="overlay"] {
    background: rgba(0, 0, 0, 0.7) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CLIPBOARD PANEL (Native)
   ═══════════════════════════════════════════════════════════════════════════════ */

.clipboard, [class*="clipboard-editor"] {
    background: var(--cc-bg-dark) !important;
}

.clipboard *, [class*="clipboard-editor"] * {
    color: var(--cc-text-primary) !important;
}

.clipboard textarea {
    background: var(--cc-bg-darker) !important;
    border: 1px solid var(--cc-border) !important;
    color: var(--cc-text-white) !important;
    border-radius: var(--cc-radius) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   CLIENT VIEW - Full viewport for VNC/RDP/SSH
   IMPORTANT: Don't override Guacamole's native table-cell layout!
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Only set background colors, don't touch layout */
.client-view, .client, .client-body {
    background: var(--cc-bg-darkest) !important;
}

/* Viewport container - ensure it fills available space */
.viewport {
    width: 100% !important;
    height: 100% !important;
}

/* Tiled client grid - ensure full size */
.tiled-client-grid {
    width: 100% !important;
    height: 100% !important;
}

/* Main container inside tile */
div.main {
    background: var(--cc-bg-darkest) !important;
}

/* displayOuter/Middle use table layout - preserve it */
div.displayOuter {
    background: var(--cc-bg-darkest) !important;
}

div.displayMiddle {
    background: var(--cc-bg-darkest) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   NOTIFICATIONS & ALERTS
   ═══════════════════════════════════════════════════════════════════════════════ */

.notification, .alert, [class*="notification"], [class*="alert"] {
    background: var(--cc-bg-medium) !important;
    border: 1px solid var(--cc-border) !important;
    border-radius: var(--cc-radius) !important;
    color: var(--cc-text-primary) !important;
}

.notification.success, .alert.success, .alert-success {
    background: rgba(16, 185, 129, 0.2) !important;
    border-color: var(--cc-success) !important;
    color: #6ee7b7 !important;
}

.notification.error, .alert.error, .alert-danger {
    background: rgba(239, 68, 68, 0.2) !important;
    border-color: var(--cc-danger) !important;
    color: #fca5a5 !important;
}

.notification.warning, .alert.warning, .alert-warning {
    background: rgba(245, 158, 11, 0.2) !important;
    border-color: var(--cc-warning) !important;
    color: #fcd34d !important;
}

.notification.info, .alert.info, .alert-info {
    background: rgba(59, 130, 246, 0.2) !important;
    border-color: var(--cc-info) !important;
    color: #93c5fd !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LISTS
   ═══════════════════════════════════════════════════════════════════════════════ */

ul, ol {
    color: var(--cc-text-primary) !important;
}

li {
    color: var(--cc-text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PAGINATION & LIST CONTROLS
   ═══════════════════════════════════════════════════════════════════════════════ */

.pagination, [class*="pagination"] {
    background: transparent !important;
}

.pagination a, .pagination button {
    background: var(--cc-bg-medium) !important;
    color: var(--cc-text-primary) !important;
    border: 1px solid var(--cc-border-light) !important;
}

.pagination a:hover, .pagination button:hover {
    background: var(--cc-bg-light) !important;
}

.pagination .active {
    background: var(--cc-primary) !important;
    color: var(--cc-text-white) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LOADING & STATUS INDICATORS
   ═══════════════════════════════════════════════════════════════════════════════ */

.loading, [class*="loading"], .spinner {
    color: var(--cc-primary) !important;
}

.status-indicator {
    color: var(--cc-text-secondary) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   TOOLTIP
   ═══════════════════════════════════════════════════════════════════════════════ */

.tooltip, [class*="tooltip"] {
    background: var(--cc-bg-dark) !important;
    color: var(--cc-text-white) !important;
    border: 1px solid var(--cc-border) !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ICONS - Make sure they're visible
   ═══════════════════════════════════════════════════════════════════════════════ */

.icon, [class*="icon"] {
    filter: brightness(0) invert(1) !important;
    opacity: 0.85 !important;
}

.icon:hover, [class*="icon"]:hover {
    opacity: 1 !important;
}

/* Preserve colored icons */
.icon.colored, .status-icon {
    filter: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FOCUS STATES
   ═══════════════════════════════════════════════════════════════════════════════ */

:focus-visible {
    outline: 2px solid var(--cc-primary) !important;
    outline-offset: 2px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .header, .guac-header {
        padding: 8px 12px !important;
    }
    
    .connection-list .connection {
        padding: 12px !important;
    }
    
    .settings-section, .preferences-section {
        padding: 12px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ENSURE NO WHITE/LIGHT BACKGROUNDS LEAK THROUGH
   ═══════════════════════════════════════════════════════════════════════════════ */

.ng-scope, .ng-binding {
    color: inherit !important;
}

/* Override any inline white backgrounds */
[style*="background: white"], [style*="background-color: white"],
[style*="background:#fff"], [style*="background-color:#fff"],
[style*="background: #ffffff"], [style*="background-color: #ffffff"] {
    background: var(--cc-bg-medium) !important;
}

/* Override any inline dark text on light backgrounds */
[style*="color: black"], [style*="color:#000"],
[style*="color: #333"], [style*="color:#333"] {
    color: var(--cc-text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   DEVELOPER KEYBOARD INTEGRATION
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Ensure status bar stays above keyboard */
body.cc-keyboard-open #cc-status-bar {
    bottom: 52px !important;
    transition: bottom 0.3s ease !important;
}

body.cc-keyboard-open.cc-keyboard-expanded #cc-status-bar {
    bottom: 320px !important;
}

/* Terminal area adjustments when keyboard is open */
body.cc-keyboard-open .display {
    max-height: calc(100vh - 78px) !important; /* 52px keyboard + 26px status bar */
}

body.cc-keyboard-open.cc-keyboard-expanded .display {
    max-height: calc(100vh - 346px) !important; /* 320px keyboard + 26px status bar */
}

/* Ensure proper z-index layering */
#cc-dev-keyboard {
    z-index: 99990 !important;
}

#cc-kb-fab {
    z-index: 99995 !important;
}

#cc-status-bar {
    z-index: 99980 !important;
}

#cc-toolbar {
    z-index: 99985 !important;
}

/* Toolbar adjustment when keyboard is visible */
body.cc-keyboard-open #cc-toolbar {
    bottom: auto !important;
}

/* Smooth transitions for all keyboard-related elements */
.display,
.client-display,
.guac-viewport,
#cc-status-bar {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {
    #cc-kb-fab {
        width: 56px !important;
        height: 56px !important;
        font-size: 24px !important;
    }
    
    .cc-quick-bar .quick-btn {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    .kb-key {
        min-height: 48px !important;
    }
}
/*
 * 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;

}