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

}
/* Konekta · visual do portal (login e botões) */

.login-ui, .login-ui input, body {
    font-family: Inter, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
}

/* fundo (cobre a tela inteira, mesmo quando precisa rolar) */
div.login-ui {
    position: fixed;
    inset: 0;
    height: auto;
    display: block;
    overflow-y: auto;
    background:
        radial-gradient(900px 520px at 12% 8%, rgba(124, 58, 237, 0.38), transparent 62%),
        radial-gradient(760px 460px at 92% 95%, rgba(6, 176, 240, 0.16), transparent 60%),
        linear-gradient(160deg, #1c0a45 0%, #160833 55%, #0f0a24 100%);
}

.login-ui .login-dialog-middle {
    display: flex;
    min-height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding: 24px 0 72px;
}

/* cartão */
.login-ui .login-dialog,
.login-ui .login-dialog.notification {
    position: relative;
    max-width: 400px;
    width: calc(100% - 32px);
    background: #ffffff;
    color: #191329;
    border: 0;
    border-radius: 22px;
    box-shadow: 0 30px 80px rgba(5, 2, 20, 0.55), 0 2px 6px rgba(5, 2, 20, 0.25);
    padding: 36px 32px 30px;
    font-size: 16px;
    text-align: left;
}
.login-ui .login-dialog::after {
    content: "Acesso exclusivo do time Konekta";
    position: absolute;
    left: 0; right: 0; bottom: -38px;
    text-align: center;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.02em;
}

/* logo oficial (vertical) acima do cartão */
.login-ui .login-dialog { margin-top: 196px; }
.login-ui .login-dialog::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -176px;
    transform: translateX(-50%);
    width: 180px;
    height: 158px;
    background: url("app/ext/konekta-branding/images/konekta-vertical.svg") center / contain no-repeat;
}
.login-ui.continuation .login-dialog { margin-top: 196px; }

/* título do cartão */
.login-ui .login-dialog .logo { display: none; }
.login-ui .login-dialog .version { padding: 0 0 24px; }
.login-ui .login-dialog .version .app-name {
    font-size: 0;
    text-transform: none;
    text-align: center;
}
.login-ui .login-dialog .version .app-name::before {
    content: "Estação de vendas";
    display: block;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #191329;
}
.login-ui .login-dialog .version .app-name::after {
    content: "Entre com seu usuário e senha";
    display: block;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    color: #8a85a3;
}
.login-ui .login-dialog .version .version-number { display: none; }
.login-ui .login-dialog p { color: #4b4663; font-size: 14px; line-height: 1.5; }

/* campos */
.login-ui .login-fields .labeled-field {
    margin: 0 0 14px;
    z-index: auto;
}
.login-ui .login-fields .labeled-field .field-header {
    position: static;
    margin: 0 0 6px;
    opacity: 1;
    z-index: auto;
    font-size: 12.5px;
    font-weight: 600;
    color: #4b4663;
}
.login-ui .login-dialog .login-fields input,
.login-ui .login-fields .labeled-field.empty input,
.login-ui .login-fields .labeled-field input:focus {
    font-family: inherit;
    font-size: 15px;
    color: #191329;
    background: #ffffff;
    border: 1px solid #e3e2ee;
    border-radius: 12px;
    padding: 12px 14px;
    margin: 0;
    outline: none;
    box-shadow: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.login-ui .login-dialog .login-fields input:focus {
    border-color: #7c3aed;
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.15);
}

/* botão */
.login-ui .login-dialog .buttons { margin-top: 22px; }
.login-ui .login-dialog .buttons input[type="submit"] {
    width: 100%;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: #ffffff;
    background: linear-gradient(100deg, #6d28d9, #7c3aed);
    border: 0;
    border-radius: 12px;
    padding: 13px 18px;
    box-shadow: 0 10px 22px rgba(109, 40, 217, 0.38);
    text-shadow: none;
    cursor: pointer;
    transition: filter 0.15s, transform 0.1s;
}
.login-ui .login-dialog .buttons input[type="submit"]:hover { filter: brightness(1.07); }
.login-ui .login-dialog .buttons input[type="submit"]:active { transform: scale(0.98); }
.login-ui .login-dialog .buttons input[type="submit"]:disabled { opacity: 0.6; }

/* erro */
.login-ui.error p.login-error {
    left: 50%;
    right: auto;
    top: 20px;
    transform: translateX(-50%);
    width: calc(100% - 32px);
    max-width: 400px;
    margin: 0;
    padding: 12px 16px;
    background: #fdeaea;
    color: #991b1b;
    border: 0;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 10px 30px rgba(5, 2, 20, 0.35);
}

/* dentro do portal: botões no roxo da Konekta */
html body input[type="submit"],
html body button,
html body a.button {
    background-color: #6d28d9;
    border-radius: 10px;
    text-shadow: none;
}
html body input[type="submit"]:hover,
html body button:hover,
html body a.button:hover { background-color: #7c3aed; }
html body button.danger, html body a.button.danger { background-color: #c0392b; }


/* =====================================================================
   Tela inicial (estações)
   ===================================================================== */
.home-view { background: #f5f4fa; min-height: 100vh; overflow-x: hidden; }
.home-view .connection-list-ui { max-width: 1040px; margin: 0 auto; padding: 0 20px 56px; }

/* barra do topo: marca + usuário */
.home-view .connection-list-ui > .header:first-child {
    margin: 0 calc(50% - 50vw) 32px;
    padding: 0 max(20px, calc(50vw - 500px));
    width: 100vw;
    background: linear-gradient(110deg, #1c0a45, #160833);
    border: 0;
    box-shadow: 0 6px 20px rgba(20, 12, 45, 0.18);
    align-items: center;
    min-height: 64px;
}
.home-view .connection-list-ui > .header:first-child h2 {
    font-size: 0; padding: 0; display: flex; align-items: center; gap: 12px;
}
.home-view .connection-list-ui > .header:first-child h2::before {
    content: ""; width: 36px; height: 36px; border-radius: 10px;
    background: url("app/ext/konekta-branding/images/favicon-64.png") center / contain no-repeat;
}
.home-view .connection-list-ui > .header:first-child h2::after {
    content: "Konekta  ·  Estação de vendas"; white-space: pre;
    font-size: 17px; font-weight: 700; letter-spacing: -0.2px; text-transform: none; color: #fff;
}
.home-view .user-menu .menu-dropdown { border: 0; background: rgba(255,255,255,0.08); border-radius: 12px; margin: 12px 0; }
.home-view .user-menu .menu-dropdown:hover { background: rgba(255,255,255,0.14); }
.home-view .user-menu .menu-dropdown .menu-title {
    color: #fff; font-weight: 600; font-size: 14px; padding: 10px 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
    background-size: 18px; background-position: 12px center;
}
.home-view .user-menu .menu-dropdown .menu-indicator { filter: invert(1); opacity: 0.8; }
.user-menu .menu-dropdown .menu-contents {
    background: #fff; border: 1px solid #ececf3; border-radius: 14px;
    box-shadow: 0 16px 40px rgba(20, 12, 45, 0.18); margin-top: 8px; overflow: hidden; min-width: 220px;
}
.user-menu .menu-dropdown .menu-contents li a { color: #191329; font-size: 14px; padding-top: 11px; padding-bottom: 11px; }
.user-menu .menu-dropdown .menu-contents li a:hover { background-color: #f1ebfe; color: #6d28d9; }

/* ---------- Conexões recentes ---------- */
.home-view div.recent-connections {
    margin: 0 0 8px; padding: 0 0 28px; text-align: left;
    border-bottom: 1px solid #e7e5f0;
    display: grid; grid-template-columns: 1fr; gap: 14px;
}
.home-view div.recent-connections::before {
    content: "Conexões recentes"; order: -2;
    font-size: 24px; font-weight: 800; letter-spacing: -0.5px; color: #191329; line-height: 1.2;
}
.home-view div.recent-connections::after {
    content: "Acesse rapidamente a sua última sessão."; order: -1; margin: -10px 0 4px;
    font-size: 14px; font-weight: 500; color: #8a85a3;
}
.home-view .recent-connections p.placeholder {
    font-size: 14px; font-weight: 500; text-shadow: none; color: #8a85a3; opacity: 1; text-align: left; margin: 0;
}
.home-view div.recent-connections div.connection {
    margin: 0; padding: 0; max-width: none; display: block; border-radius: 18px;
    background: #fff; border: 1px solid #ececf3;
    box-shadow: 0 1px 2px rgba(20,12,45,.04), 0 8px 24px rgba(20,12,45,.06);
    transition: box-shadow .15s, border-color .15s;
}
.home-view div.recent-connections div.connection:hover { background: #fff; border-color: #cdb8fb; box-shadow: 0 14px 34px rgba(109,40,217,.14); }
.home-view .recent-connections .connection a {
    display: grid; grid-template-columns: 220px 1fr auto; align-items: center; gap: 22px; padding: 14px 20px 14px 14px;
}
.home-view .recent-connections .connection .thumbnail { margin: 0; }
.home-view .recent-connections .connection .thumbnail > * {
    max-width: 100%; width: 220px; border: 1px solid #e3e2ee; border-radius: 10px; box-shadow: none; background: #f5f4fa;
}
.home-view .recent-connections .connection .caption { text-align: left; }
.home-view .recent-connections .connection .caption .name {
    margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.4px; color: #191329; display: block;
}
.home-view .recent-connections .connection .caption::after {
    content: "● Sessão aberta no servidor";
    display: inline-block; margin-top: 10px; padding: 4px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 600; background: #e7f7ee; color: #0c7a43;
}
.home-view .recent-connections .connection a::after {
    content: "Abrir sessão";
    padding: 12px 22px 12px 46px; border-radius: 12px; font-size: 14px; font-weight: 600; color: #fff;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M8 20h8M12 16v4'/%3E%3C/svg%3E") 18px center / 18px no-repeat, linear-gradient(100deg, #4c1d95, #6d28d9);
    box-shadow: 0 8px 18px rgba(76,29,149,.3);
}
/* mostra só a mais recente; as outras aparecem na lista abaixo */
.home-view div.recent-connections div.connection ~ div.connection { display: none; }

/* ---------- Todas as conexões ---------- */
.home-view .connection-list-ui > .header:not(:first-child) {
    background: transparent; border: 0; box-shadow: none; margin: 28px 0 14px; align-items: flex-end;
}
.home-view .connection-list-ui > .header:not(:first-child) h2 {
    text-transform: none; font-size: 24px; font-weight: 800; letter-spacing: -0.5px; color: #191329; padding: 0;
}
.home-view .connection-list-ui > .header:not(:first-child) h2::after {
    content: "Selecione uma estação para acessar.";
    display: block; margin-top: 4px; font-size: 14px; font-weight: 500; letter-spacing: 0; color: #8a85a3;
}
.home-view .header .filter { border: 0; margin: 0; }
.home-view .header .filter .search-string, .home-view .header .filter input {
    border: 1px solid #e3e2ee; border-radius: 12px; background-color: #fff;
    padding: 10px 12px 10px 38px; background-size: 16px; background-position: 13px center;
    font-size: 14px; width: 260px; outline: none;
}
.home-view .header .filter input:focus { border-color: #7c3aed; box-shadow: 0 0 0 4px rgba(124,58,237,.15); }

.home-view div.all-connections { margin: 0; }
.home-view .all-connections .group-list-page { display: flex; flex-direction: column; gap: 10px; }
.home-view .all-connections .list-item .caption { padding: 0; }
.home-view .all-connections .list-item:hover,
.home-view .all-connections .caption:hover,
.home-view .all-connections .connection:hover { background: transparent; }
.home-view a.home-connection {
    display: grid; grid-template-columns: 44px minmax(0, 1fr) 210px auto; align-items: center; gap: 14px;
    padding: 12px 14px 12px 16px; background: #fff; border: 1px solid #ececf3; border-radius: 16px;
    box-shadow: 0 1px 2px rgba(20,12,45,.04), 0 4px 14px rgba(20,12,45,.05);
    color: #191329; transition: border-color .15s, box-shadow .15s;
}
.home-view a.home-connection:hover { border-color: #cdb8fb; box-shadow: 0 10px 26px rgba(109,40,217,.13); }
.home-view a.home-connection .icon.type {
    order: 1; width: 40px; height: 40px; border-radius: 11px; background-color: #f1ebfe;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d28d9' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M8 20h8M12 16v4'/%3E%3C/svg%3E");
    background-size: 22px 22px; background-position: center;
}
.home-view a.home-connection .name { order: 2; margin: 0; font-size: 16px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-view a.home-connection .activeUserCount,
.home-view a.home-connection::before {
    order: 3; justify-self: start; font-style: normal; font-size: 13px; font-weight: 500; color: #4b4663;
    position: static; float: none; white-space: nowrap; padding-left: 18px;
    background: radial-gradient(circle at 5px 50%, var(--dot, #b4b0c6) 4.5px, transparent 5px) no-repeat;
}
.home-view a.home-connection .activeUserCount { --dot: #22c55e; color: #15803d; font-weight: 600; }
.home-view a.home-connection::before { content: "Livre"; }
.home-view a.home-connection.active::before { display: none; }
.home-view a.home-connection::after {
    order: 4; content: "Abrir sessão";
    padding: 9px 16px 9px 38px; border-radius: 11px; font-size: 13.5px; font-weight: 600; color: #5b21b6;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b21b6' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M8 20h8M12 16v4'/%3E%3C/svg%3E") 14px center / 17px no-repeat, #efe8fd;
    transition: background-color .15s;
}
.home-view a.home-connection:hover::after { background-color: #e4d8fc; }
.home-view .pager { margin-top: 20px; }

@media (max-width: 720px) {
    .home-view .connection-list-ui > .header:first-child h2::after { content: "Konekta"; }
    .home-view .connection-list-ui > .header:not(:first-child) { flex-wrap: wrap; gap: 12px; }
    .home-view .connection-list-ui > .header:not(:first-child) h2 { flex: 1 0 100%; }
    .home-view .header guac-group-list-filter, .home-view .header .filter { flex: 1 0 100%; }
    .home-view .header .filter .search-string, .home-view .header .filter input { width: 100%; }
    .home-view .recent-connections .connection a { grid-template-columns: 1fr; }
    .home-view .recent-connections .connection .thumbnail > * { width: 100%; }
    .home-view .recent-connections .connection a::after { text-align: center; }
    .home-view a.home-connection { grid-template-columns: 40px minmax(0, 1fr) auto; }
    .home-view a.home-connection .activeUserCount, .home-view a.home-connection::before { grid-column: 2; grid-row: 2; margin-top: -6px; }
    .home-view a.home-connection::after { grid-row: 1 / span 2; grid-column: 3; content: "Abrir"; }
}

/* =====================================================================
   Barra no topo da sessão aberta
   ===================================================================== */
.kt-bar {
    flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
    height: 52px; padding: 0 12px 0 8px; background: #fff; border-bottom: 1px solid #ececf3;
    font-family: Inter, "Segoe UI", -apple-system, Roboto, Arial, sans-serif; color: #191329;
    box-shadow: 0 2px 10px rgba(20,12,45,.06); z-index: 3; position: relative;
}
.kt-bar a, .kt-bar button { font-family: inherit; }
.kt-bar .kt-back {
    width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #4b4663; text-decoration: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b4663' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.kt-bar .kt-back:hover { background-color: #f1ebfe; }
.kt-bar .kt-ico {
    width: 34px; height: 34px; border-radius: 10px; background: #f1ebfe url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d28d9' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M8 20h8M12 16v4'/%3E%3C/svg%3E") center / 19px no-repeat;
}
.kt-bar .kt-tt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.kt-bar .kt-name { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kt-bar .kt-st { font-size: 12px; font-weight: 600; color: #15803d; padding-left: 13px; margin-top: 3px;
    background: radial-gradient(circle at 4px 50%, #22c55e 3.5px, transparent 4px) no-repeat; }
.kt-bar .kt-st.off { color: #9a5b00; background: radial-gradient(circle at 4px 50%, #f59e0b 3.5px, transparent 4px) no-repeat; }
.kt-bar .kt-sp { flex: 1; }
.kt-bar .kt-btn {
    height: 36px; min-width: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid #e3e2ee; background: #fff;
    color: #4b4663; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
    box-shadow: none; text-shadow: none;
}
html body .kt-bar .kt-btn { background-color: #fff; }
html body .kt-bar .kt-btn:hover { background-color: #f1ebfe; border-color: #cdb8fb; color: #6d28d9; }
.kt-bar .kt-btn svg { width: 17px; height: 17px; }
html body .kt-bar .kt-btn.kt-sair { color: #dc2626; border-color: #f6c9c9; background-color: #fff5f5; }
html body .kt-bar .kt-btn.kt-sair:hover { background-color: #fde8e8; color: #b91c1c; border-color: #f0a8a8; }
@media (max-width: 640px) { .kt-bar .kt-btn .kt-lbl { display: none; } }