/* ============================================
   TEMA MODERNO PER GUACAMOLE
   Design pulito, animazioni fluide, accessibilità
   ============================================ */

/* Variabili CSS per manutenibilità */
:root {
    --primary: #3b82f6;
    --primary-dark: #2563eb;
    --primary-light: #60a5fa;
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --dark-bg: #0f172a;
    --dark-surface: #1d3152;
    --dark-surface-light: #334155;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --border: #586d8a;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    --transition: all 0.2s ease;
}

/* modifica  */

/* ===== PULSANTI CON BORDI MOLTO TONDI ===== */
button,
input[type="submit"],
input[type="button"],
.login-ui .login-button,
.modal-contents button,
.dialog button,
.buttons button {
    border-radius: 40px !important;
}

.login-ui .login-dialog .buttons {
    text-align: right;
    margin: 1em 0 0;
    margin-bottom: 8px;
}

/* Pulsante login specifico */
.login-ui .login-button {
    background: linear-gradient(135deg, #345093 0%, #1e293b 100%);
    border: none;
    border-radius: 40px !important;
    padding: 12px 24px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition);
    width: 100%;
    margin-top: 0.5rem;
}

.login-ui .login-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -5px rgba(59, 130, 246, 0.4);
}

/* Pulsante danger */
button.danger {
    background: linear-gradient(135deg, var(--danger) 0%, #dc2626 100%);
    border: none;
    border-radius: 40px !important;
    padding: 10px 20px;
    transition: var(--transition);
}

button.danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

/* Pulsanti secondari */
button.secondary,
.button-secondary {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 40px !important;
    color: var(--text-primary);
}

button.secondary:hover,
.button-secondary:hover {
    background: rgba(59, 130, 246, 0.1);
    border-color: var(--primary);
}

/* ===== PLACEHOLDER LEGGIBILI ===== */
::placeholder {
    color: #f1f5f9!important;  /* Grigio chiaro */
    opacity: 1 !important;
    font-weight: 400;
}

/* fine modifica */

/* ===== BASE ===== */
body {
    color: var(--text-primary);
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

pre, code {
    color: var(--text-primary);
    background-color: #0f172a;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.5rem;
}

/* ===== LINK ===== */
a[href] {
    color: var(--primary-light);
    text-decoration: none;
    transition: var(--transition);
}

a[href]:hover {
    color: var(--primary);
    text-decoration: underline;
}

a[href]:visited {
    color: #a78bfa;
}

/* ===== FORM ELEMENTI ===== */
div.location,
input[type=text],
input[type=email],
input[type=number],
input[type=password],
textarea,
select {
    background-color: var(--dark-surface);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    transition: var(--transition);
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* ===== LOGIN PAGE ===== */
div.login-ui {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

.login-ui .login-dialog {
    background: #162654;
    border-radius: 24px;
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    color: white;
}


/* Logo migliorato con animazione */
.login-ui .login-dialog .logo {
    background-image: url('app/ext/custom-namespace/images/logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 230px;
    height: 150px;
    margin: 0 auto 1.5rem auto;
    transition: transform 0.3s ease;
}

.login-ui .login-dialog .logo:hover {
    transform: scale(1.02);
}

/* Nome app stilizzato */
.login-ui .login-dialog .version .app-name {
    font-weight: 700;
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--primary-light) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-align: center;
    font-size: 1.75em;
    letter-spacing: -0.02em;
}

/* Numero di Versione */
.login-ui .login-dialog .version .version-number {
    color: #000;
    background: #8eef8e;
    right: 20px;
}


/* Campi di login */
.login-ui .login-fields .labeled-field {
    background: transparent;
    margin-bottom: 1rem;
}

.login-ui .login-fields .labeled-field input {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 16px;
    width: 100%;
}

.login-ui .login-fields .labeled-field input:focus {
    background: var(--dark-bg);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* Pulsante login */
.login-ui .login-button {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border: none;
    border-radius: 12px;
    padding: 12px 24px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition);
    width: 100%;
    margin-top: 0.5rem;
}


.login-ui .login-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -5px rgba(59, 130, 246, 0.4);
}

.login-ui .login-button:active {
    transform: translateY(0);
}

/* Messaggi di errore login */
.login-ui.error p.login-error {
    background: linear-gradient(135deg, var(--danger) 0%, #dc2626 100%);
    border-radius: 12px;
    padding: 12px;
    margin-top: 1rem;
    color: white;
}

/* ===== MODALI ===== */
div.modal-contents,
div.logged-out-modal .ng-scope,
.logged-out-modal guac-modal {
    background: var(--dark-surface);
    border-radius: 20px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
}

div.logged-out-modal .ng-scope button {
    background: var(--primary);
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
    transition: var(--transition);
}

div.logged-out-modal .ng-scope button:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
}

/* ===== NOTIFICHE ===== */
.notification {
	color: #1e3954;
    border-radius: 12px;
    border: none;
    box-shadow: var(--shadow-md);
}

.notification.error,
.client-status-modal .notification.error {
    background: linear-gradient(135deg, var(--danger) 0%, #dc2626 100%);
    color: white;
}

button.danger {
    background: linear-gradient(135deg, var(--danger) 0%, #dc2626 100%);
    border: none;
    border-radius: 10px;
    transition: var(--transition);
}

button.danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

/* ===== HOME PAGE ===== */
.recent-connections .connection:hover {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: 12px;
    transform: translateX(4px);
    transition: var(--transition);
}

.list-item.selected {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: 12px;
}

.list-item:not(.selected) .caption:hover {
    background-color: rgba(59, 130, 246, 0.2);
    border-radius: 10px;
}

.list-item .name {
    color: var(--text-primary);
    font-weight: 500;
}

/* ===== MENU DROPDOWN ===== */
.menu-dropdown .menu-contents {
    background: var(--dark-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.menu-dropdown .menu-contents li a {
    color: var(--text-primary);
    padding: 10px 16px;
    transition: var(--transition);
}

.menu-dropdown .menu-contents li a:hover {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}

.menu-dropdown .menu-contents li a.danger {
    background: linear-gradient(135deg, var(--danger) 0%, #dc2626 100%);
}

/* ===== MENU GENERALE ===== */
.menu {
    background: var(--dark-surface);
    border-radius: 16px;
    border: 1px solid var(--border);
}

.clipboard,
.clipboard-service-target {
    background: var(--dark-bg);
    color: var(--primary-light);
    border-radius: 10px;
    padding: 8px 12px;
    font-family: monospace;
}

/* ===== SETTINGS / PAGINE ===== */
.page-tabs .page-list li a[href],
.section-tabs li a {
    color: var(--text-secondary);
    padding: 10px 16px;
    border-radius: 10px;
    transition: var(--transition);
}

.page-tabs .page-list li a[href]:hover,
.section-tabs li a:hover {
    background: rgba(59, 130, 246, 0.2);
    color: var(--text-primary);
}

.page-tabs .page-list li.active a,
.section-tabs li.active a {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
}

.settings table.session-list tr.session:hover {
    background: rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    cursor: pointer;
}

/* ===== CONNESSIONI ===== */
#connection-warning {
    background: rgba(239, 68, 68, 0.1);
    border-left: 4px solid var(--danger);
    border-radius: 8px;
    padding: 12px;
}

.transfer-manager {
    background: var(--dark-surface);
    border-radius: 12px;
    border: 1px solid var(--border);
}

.transfer.error {
    background: linear-gradient(135deg, var(--danger) 0%, #dc2626 100%);
    border-radius: 8px;
}

/* ===== USER MANAGEMENT ===== */
.user a,
.user-group a,
.connection a,
.connection-group a {
    color: var(--text-primary);
    transition: var(--transition);
}

.user a:hover,
.user-group a:hover,
.connection a:hover,
.connection-group a:hover {
    color: var(--primary-light);
}

.manage-user .notice.read-only {
    background: rgba(59, 130, 246, 0.1);
    border-radius: 10px;
    padding: 10px;
    color: var(--text-secondary);
}

/* ===== FILE SYSTEM ===== */
#filesystem-menu .header.breadcrumbs .breadcrumb {
    padding: 6px 12px;
    border-radius: 8px;
    transition: var(--transition);
}

#filesystem-menu .header.breadcrumbs .breadcrumb:hover {
    background: rgba(59, 130, 246, 0.2);
}

/* ===== CLIENT DI CONNESSIONE REMOTA ===== */
#guac-menu {
    background: var(--dark-surface);
    border-radius: 12px;
    padding: 8px;
}

#guac-menu button {
    background: transparent;
    border: none;
    border-radius: 8px;
    padding: 8px;
    transition: var(--transition);
    cursor: pointer;
}

#guac-menu button:hover {
    background: rgba(59, 130, 246, 0.2);
}

#guac-menu #zoom-out:hover,
#guac-menu #zoom-in:hover {
    background: var(--primary);
}

/* ===== LOCATION CHOOSER ===== */
.location-chooser .dropdown {
    background: var(--dark-surface);
    border: 1px solid var(--border);
    border-radius: 10px;
}

/* ===== SCROLLBAR PERSONALIZZATA ===== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--dark-bg);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--dark-surface-light);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* ===== ANIMAZIONI ===== */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-ui .login-dialog,
.modal-contents {
    animation: fadeIn 0.3s ease;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .login-ui .login-dialog .logo {
        width: 140px;
        height: 60px;
    }
    
    .login-ui .login-dialog .version .app-name {
        font-size: 1.25em;
    }
    
    .page-tabs .page-list li a[href],
    .section-tabs li a {
        padding: 6px 12px;
        font-size: 0.875rem;
    }
}
/*
 * 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}