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

}
:root{--bg:#0b1220;--panel:#111a2e;--panel2:#18243d;--line:#243049;--txt:#e5edf8;--mut:#94a3b8;--acc:#38bdf8;--acc2:#6366f1}
body{background:radial-gradient(1200px 600px at 20% -10%,#16264a 0%,var(--bg) 60%) fixed !important;font-family:Inter,"Segoe UI",system-ui,-apple-system,Roboto,sans-serif !important}
body,div,span,p,li,td,th,label,h1,h2,h3,h4,a,.caption,.name{color:var(--txt) !important}
a:hover{color:var(--acc) !important}
.header{background:var(--panel) !important;border-bottom:1px solid var(--line) !important}
.header h2,.header h1{font-weight:600 !important;letter-spacing:.05em}
.header h2{border-left:4px solid var(--acc);padding-left:12px !important}
input,select,textarea{background:var(--panel) !important;color:var(--txt) !important;border:1px solid var(--line) !important;border-radius:8px !important}
input::placeholder,textarea::placeholder{color:var(--mut) !important}
input:focus,select:focus,textarea:focus{outline:none !important;border-color:var(--acc) !important;box-shadow:0 0 0 3px rgba(56,189,248,.2) !important}
option{background:var(--panel) !important;color:var(--txt) !important}
button,input[type=submit],a.button{background:linear-gradient(135deg,var(--acc),var(--acc2)) !important;color:#fff !important;border:none !important;border-radius:8px !important;text-shadow:none !important;box-shadow:0 2px 8px rgba(99,102,241,.35);transition:filter .15s,transform .15s}
button:hover,input[type=submit]:hover,a.button:hover{filter:brightness(1.12);transform:translateY(-1px)}
button *,a.button *{color:#fff !important}

.recent-connections{padding:28px 16px !important;display:flex;flex-wrap:wrap;justify-content:center;gap:22px}
.recent-connections .connection{display:flex !important;flex-direction:column;align-items:center;justify-content:flex-end;gap:10px;width:auto !important;min-width:210px;padding:16px 18px 14px !important;margin:0 !important;background:linear-gradient(160deg,var(--panel2),var(--panel)) !important;border:1px solid var(--line) !important;border-radius:16px !important;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .18s,box-shadow .18s,border-color .18s}
.recent-connections .connection:hover{transform:translateY(-5px);border-color:var(--acc) !important;box-shadow:0 18px 40px rgba(56,189,248,.18),0 0 0 1px rgba(56,189,248,.35)}
.recent-connections .connection .caption{font-weight:600;font-size:1.02em;text-align:center;letter-spacing:.02em}
.recent-connections .thumbnail,.recent-connections .thumbnail img{border:none !important;box-shadow:0 6px 18px rgba(0,0,0,.5) !important;border-radius:10px !important}

.all-connections .group-list,.all-connections .group-list > div{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px;padding:16px}
.all-connections .connection,.all-connections .connection-group{background:var(--panel) !important;border:1px solid var(--line) !important;border-radius:12px !important;padding:12px 14px !important;margin:0 !important;transition:transform .15s,border-color .15s,background .15s}
.all-connections .connection:hover,.all-connections .connection-group:hover{background:var(--panel2) !important;border-color:var(--acc) !important;transform:translateY(-2px)}
.all-connections .caption{font-weight:500;font-size:1.02em}

.connection,.connection-group,.user,.user-group,.history-entry{border-radius:8px;transition:background .15s}
.connection:hover,.connection-group:hover,.user:hover,.user-group:hover{background:var(--panel2) !important}

/* ---- metricas de Proxmox dentro de cada tarjeta ---- */
.vm-metrics{width:100%;margin-top:10px;font-size:.78em;line-height:1.2}
.vm-head{display:flex;align-items:center;gap:7px;margin-bottom:6px;color:var(--mut) !important}
.vm-head span{color:var(--mut) !important}
.vm-dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.vm-dot.on{background:#22c55e;box-shadow:0 0 8px #22c55e}
.vm-dot.off{background:#ef4444}
.vm-row{display:flex;align-items:center;gap:8px;margin:5px 0}
.vm-label{width:38px;color:var(--mut) !important;flex:none}
.vm-bar{flex:1;height:7px;background:#1e293b;border-radius:6px;overflow:hidden}
.vm-fill{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--acc),var(--acc2));transition:width .6s}
.vm-fill.vm-hot{background:linear-gradient(90deg,#f59e0b,#ef4444)}
.vm-val{min-width:92px;text-align:right;color:var(--txt) !important;flex:none}

table{border-collapse:collapse}
th{background:var(--panel) !important;border-bottom:1px solid var(--line) !important}
td{border-bottom:1px solid var(--line) !important}
tr:hover td{background:var(--panel2) !important}
.page-tabs a,.page-list a{border-radius:8px 8px 0 0}
.page-tabs .current a,.page-list .current a,.page-list li.current{background:var(--panel2) !important;border-bottom:2px solid var(--acc) !important}
.menu-dropdown .menu-contents,.menu-contents,.dialog,.notification,.modal,.guac-modal{background:var(--panel) !important;border:1px solid var(--line) !important;border-radius:12px !important;box-shadow:0 20px 50px rgba(0,0,0,.55) !important}
.caption .icon,.caption .protocol,.connection .icon,.user-menu .icon{filter:invert(.92) brightness(1.3)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#334155;border-radius:8px}
::-webkit-scrollbar-track{background:transparent}
.login-ui{background:radial-gradient(1000px 500px at 30% 0%,#16264a 0%,var(--bg) 65%) !important}
.login-ui .login-dialog{background:var(--panel) !important;border:1px solid var(--line);border-radius:16px;box-shadow:0 25px 60px rgba(0,0,0,.6)}
.login-ui .login-dialog .logo{background-image:url('app/ext/tema-panel/logo.svg') !important;background-size:contain;background-repeat:no-repeat;background-position:center;width:100%;height:90px}