/* ============================================================
   Orizon Cloud - Tema Visual Global
   ============================================================
   Carregado DEPOIS do CSS oficial do Guacamole (cascata vence).
   Variáveis CSS centralizadas + base dark + tipografia Inter.

   Este arquivo é a FONTE ÚNICA DE VERDADE do visual Orizon.
   Outras customizações (templates HTML, etc.) referenciam estas variáveis.
   ============================================================ */


/* ===========================================================
   1. FONTE INTER (Google Fonts inicial, depois self-host)
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');


/* ===========================================================
   2. VARIÁVEIS CSS GLOBAIS
   =========================================================== */

:root {
    /* Backgrounds (do mais profundo ao mais elevado) */
    --o-bg-0:           #000000;
    --o-bg-1:           #050810;
    --o-bg-2:           #0a0e1a;
    --o-surface-1:      #12182a;
    --o-surface-2:      #1a2030;
    --o-surface-3:      #232a3d;

    /* Bordas */
    --o-border-subtle:  rgba(255, 255, 255, 0.06);
    --o-border-soft:    rgba(255, 255, 255, 0.10);
    --o-border-default: rgba(255, 255, 255, 0.14);
    --o-border-strong:  rgba(255, 255, 255, 0.22);

    /* Acentos Orizon */
    --o-primary:        #1e90ff;
    --o-primary-hover:  #4dabff;
    --o-primary-active: #0d7ce8;
    --o-primary-soft:   rgba(30, 144, 255, 0.12);
    --o-primary-glow:   rgba(30, 144, 255, 0.25);
    --o-accent:         #38bdf8;

    /* Cores semânticas */
    --o-success:        #10b981;
    --o-warning:        #f59e0b;
    --o-danger:         #ef4444;
    --o-danger-soft:    rgba(239, 68, 68, 0.10);

    /* Texto (hierarquia) */
    --o-text-strong:    #ffffff;
    --o-text-default:   #e5e7eb;
    --o-text-soft:      #9ca3af;
    --o-text-mute:      #6b7280;

    /* Tipografia */
    --o-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                   "Roboto", system-ui, sans-serif;
    --o-font-mono: "JetBrains Mono", "Fira Code", "Consolas", monospace;

    /* Escalas tipográficas */
    --o-text-xs:    12px;
    --o-text-sm:    13px;
    --o-text-base:  15px;
    --o-text-md:    16px;
    --o-text-lg:    18px;
    --o-text-xl:    22px;
    --o-text-2xl:   28px;
    --o-text-3xl:   34px;

    /* Espaçamento (multipler de 4px) */
    --o-space-1:    4px;
    --o-space-2:    8px;
    --o-space-3:    12px;
    --o-space-4:    16px;
    --o-space-5:    20px;
    --o-space-6:    24px;
    --o-space-8:    32px;
    --o-space-10:   40px;
    --o-space-12:   48px;
    --o-space-16:   64px;

    /* Border radius */
    --o-radius-sm:  6px;
    --o-radius-md:  10px;
    --o-radius-lg:  14px;
    --o-radius-xl:  20px;

    /* Sombras */
    --o-shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.3);
    --o-shadow-md:   0 8px 24px rgba(0, 0, 0, 0.4);
    --o-shadow-lg:   0 24px 60px rgba(0, 0, 0, 0.5);
    --o-shadow-glow: 0 0 40px rgba(30, 144, 255, 0.15);

    /* Transições */
    --o-transition:      all 0.18s ease;
    --o-transition-slow: all 0.3s ease;
}


/* ===========================================================
   3. RESET / NORMALIZE — Sobrescrever bases do Guacamole
   =========================================================== */

html {
    background-color: var(--o-bg-0);
}

body {
    background-color: var(--o-bg-1);
    color: var(--o-text-default);
    font-family: var(--o-font-sans);
    font-size: var(--o-text-base);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Seleção de texto */
::selection {
    background-color: var(--o-primary);
    color: #ffffff;
}

/* Scrollbar customizada (Chrome/Edge/Safari) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: var(--o-bg-1);
}
::-webkit-scrollbar-thumb {
    background: var(--o-surface-2);
    border-radius: 5px;
    border: 2px solid var(--o-bg-1);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--o-surface-3);
}

/* Scrollbar (Firefox) */
* {
    scrollbar-color: var(--o-surface-2) var(--o-bg-1);
    scrollbar-width: thin;
}


/* ===========================================================
   4. TIPOGRAFIA GLOBAL
   =========================================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--o-font-sans);
    color: var(--o-text-strong);
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
}

h1 { font-size: var(--o-text-3xl); font-weight: 700; }
h2 { font-size: var(--o-text-2xl); font-weight: 600; }
h3 { font-size: var(--o-text-xl);  font-weight: 600; }
h4 { font-size: var(--o-text-lg);  font-weight: 600; }
h5, h6 { font-size: var(--o-text-md); font-weight: 600; }

p {
    margin: 0 0 var(--o-space-3) 0;
    color: var(--o-text-default);
}

a {
    color: var(--o-primary);
    text-decoration: none;
    transition: var(--o-transition);
}
a:hover {
    color: var(--o-primary-hover);
}


/* ===========================================================
   5. TELA DE LOGIN
   ============================================================
   Reaproveita o trabalho do Sprint 1 (que funcionou bem).
   Foco: caixa centralizada, glassmorphism, logo Orizon.
   =========================================================== */

/* div.login-ui (0,1,1) derrota login.css:27 div.login-ui { background: white } —
   mesma especificidade, orizon.css vem depois na cascata */
div.login-ui {
    background-color: var(--o-bg-0);
    background-image:
        radial-gradient(circle at 25% 20%, var(--o-primary-soft) 0%, transparent 45%),
        radial-gradient(circle at 75% 80%, rgba(56, 189, 248, 0.08) 0%, transparent 50%),
        linear-gradient(180deg, var(--o-bg-1) 0%, var(--o-bg-0) 100%);
    font-family: var(--o-font-sans);
    color: var(--o-text-default);
}

/* Grid sutil de pontos no fundo */
div.login-ui::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(30, 144, 255, 0.06) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
    opacity: 0.5;
}

/* Container do dialog */
.login-ui .login-dialog {
    width: auto !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    font-size: var(--o-text-base);
    font-family: var(--o-font-sans);
    color: var(--o-text-default);
    text-align: left;
    display: block !important;
    float: none;
}

.login-ui .login-dialog-middle {
    background: transparent !important;
    border: none !important;
    text-align: center !important;
    width: 100% !important;
}

/* Caixa principal do login (glassmorphism) */
.login-ui .login-dialog.notification,
.login-ui .login-dialog-middle .login-dialog {
    background-color: rgba(18, 24, 42, 0.85);
    color: var(--o-text-default);
    border: 1px solid var(--o-border-soft);
    border-radius: var(--o-radius-lg);
    box-shadow: var(--o-shadow-lg), var(--o-shadow-glow);
    backdrop-filter: blur(20px) saturate(120%);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
    padding: var(--o-space-10) var(--o-space-8);
}

/* Form */
.login-ui form.login-form {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--o-space-4);
}

/* Logo Orizon (substitui a bolinha verde) */
.login-ui form.login-form .logo {
    background-image: url('images/logo-orizon.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-color: transparent !important;
    width: 100% !important;
    height: 110px !important;
    margin: var(--o-space-2) 0 var(--o-space-4) 0 !important;
    filter: drop-shadow(0 4px 24px rgba(30, 144, 255, 0.25));
}

/* Esconder texto "Apache Guacamole X.Y.Z" */
.login-ui form.login-form .version,
.login-ui form.login-form h1,
.login-ui form.login-form h2 {
    display: none !important;
}

/* Mensagem de ajuda / erro */
.login-ui form.login-form .helpText,
.login-ui form.login-form p[translate] {
    color: var(--o-text-soft);
    font-size: 0.9em;
    line-height: 1.5;
    margin: 0 0 var(--o-space-2) 0;
    padding: 0;
    text-align: center;
}

/* Erro de login (caixa vermelha) */
.login-ui .login-error {
    color: #fca5a5;
    background-color: var(--o-danger-soft);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: var(--o-radius-sm);
    padding: var(--o-space-3) var(--o-space-4);
    font-size: 0.875em;
    margin: 0 0 var(--o-space-2) 0;
}

/* Containers de campos */
.login-ui .login-fields {
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    gap: var(--o-space-3);
    margin: 0;
    padding: 0;
}

/* Labels dos campos */
.login-ui .login-field-header,
.login-ui .login-fields label,
.login-ui .field-header {
    color: var(--o-text-soft);
    font-size: var(--o-text-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--o-space-1);
    display: block;
}

/* Inputs — .labeled-field é a classe real do DOM (Angular guacLoginField).
   Especificidade (0,3,1) derrota input.css:34 input[type=password] (0,1,0) */
.login-ui .login-fields .labeled-field input,
.login-ui .login-field input,
.login-ui input[type="text"],
.login-ui input[type="password"],
.login-ui input[type="email"] {
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--o-text-strong);
    border: 1px solid var(--o-border-default);
    border-radius: var(--o-radius-md);
    padding: var(--o-space-3) var(--o-space-4);
    font-size: var(--o-text-base);
    font-family: var(--o-font-sans);
    width: 100%;
    box-sizing: border-box;
    transition: var(--o-transition);
    box-shadow: var(--o-shadow-sm);
}

.login-ui input::placeholder {
    color: var(--o-text-mute);
}

.login-ui input:hover {
    border-color: var(--o-border-strong);
    background-color: rgba(255, 255, 255, 0.05);
}

/* Idle com campo vazio — login.css:80 .login-ui .login-fields .labeled-field.empty input { background: transparent }
   é (0,4,1). Mesmo seletor aqui vem depois na cascata — cascade wins, sem !important.
   Sem isto, Chrome renderiza o input[type=password] como branco quando background é transparent. */
.login-ui .login-fields .labeled-field.empty input {
    background-color: rgba(255, 255, 255, 0.03);
}

/* Foco — derrota login.css:84 .login-ui .login-fields .labeled-field input:focus { background: white }
   Especificidade (0,4,1): mesmo seletor, orizon.css vem depois na cascata. Sem !important. */
.login-ui .login-fields .labeled-field input:focus,
.login-ui input:focus {
    background-color: rgba(30, 144, 255, 0.05);
    border-color: var(--o-primary);
    box-shadow: 0 0 0 4px var(--o-primary-soft), var(--o-shadow-sm);
    outline: none;
}

/* Autofill (Chrome) — !important obrigatório: o Chrome aplica :-webkit-autofill como
   user-agent style privilegiado (recomendação oficial do MDN usar !important).
   Especificidade subida pra (0,5,1)/(0,2,1) cobrindo todos os casos: a regra base do
   input seta box-shadow em (0,3,1), que sem !important venceria a cobertura inset e
   deixaria vazar o fundo amarelo/cinza do autofill. */
.login-ui .login-fields .labeled-field.empty input:-webkit-autofill,
.login-ui .login-fields .labeled-field input:-webkit-autofill,
.login-ui input:-webkit-autofill,
.login-ui input:-webkit-autofill:hover,
.login-ui input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--o-text-strong) !important;
    -webkit-box-shadow: 0 0 0 30px var(--o-surface-2) inset !important;
    caret-color: var(--o-text-strong) !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Botões */
.login-ui .buttons {
    background: transparent;
    border: none;
    margin-top: var(--o-space-2);
    padding: 0;
}

.login-ui .buttons input[type="submit"],
.login-ui .buttons button[type="submit"],
.login-ui form.login-form input[type="submit"],
.login-ui form.login-form button[type="submit"] {
    background-color: var(--o-primary);
    background-image: linear-gradient(180deg,
        var(--o-primary-hover) 0%, var(--o-primary) 100%);
    color: #ffffff;
    border: 1px solid var(--o-primary);
    border-radius: var(--o-radius-md);
    padding: var(--o-space-3) var(--o-space-5);
    font-family: var(--o-font-sans);
    font-size: var(--o-text-base);
    font-weight: 600;
    letter-spacing: 0.02em;
    width: 100%;
    cursor: pointer;
    transition: var(--o-transition);
    box-shadow:
        0 4px 12px rgba(30, 144, 255, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.login-ui .buttons input[type="submit"]:hover,
.login-ui .buttons button[type="submit"]:hover {
    background-image: linear-gradient(180deg, #5fb4ff 0%, #2a96ff 100%);
    box-shadow:
        0 6px 20px rgba(30, 144, 255, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.login-ui .buttons input[type="submit"]:active,
.login-ui .buttons button[type="submit"]:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(30, 144, 255, 0.3);
}

/* Badge "1.6.0" no canto inferior direito — discreto */
body > .version,
.login-ui > .version,
.version-indicator {
    background-color: rgba(255, 255, 255, 0.04) !important;
    background-image: none !important;
    color: var(--o-text-mute) !important;
    border: 1px solid var(--o-border-subtle) !important;
    border-radius: var(--o-radius-sm) !important;
    padding: 0.25em 0.5em !important;
    font-size: 0.7em !important;
    font-family: var(--o-font-sans) !important;
    font-weight: 500 !important;
    opacity: 0.4 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transition: var(--o-transition);
}

body > .version:hover,
.login-ui > .version:hover {
    opacity: 0.8 !important;
}


/* ===========================================================
   6. BASE PARA HOME / SETTINGS / CLIENT (tema dark)
   ============================================================
   Foundation só. Refinos virão nos templates próprios.
   =========================================================== */

body.home,
body.settings,
body.client,
body.manage {
    background-color: var(--o-bg-1);
    background-image:
        radial-gradient(circle at 0% 0%, var(--o-primary-soft) 0%, transparent 35%),
        linear-gradient(180deg, var(--o-bg-1) 0%, var(--o-bg-0) 100%);
    background-attachment: fixed;
    color: var(--o-text-default);
    font-family: var(--o-font-sans);
    font-size: var(--o-text-base);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    min-height: 100vh;
}


/* ===========================================================
   7. INCREMENTO B — EXTERMÍNIO DO VERDE LIMA (#CDA / #DEB)
   ============================================================
   O Guacamole usa #CDA (rgb 204,221,170) e #DEB (rgb 221,238,187)
   como hover/selected em 9 pontos do CSS. Todos sobrescritos aqui.
   =========================================================== */

/* B1 — ui.css:111 — .list-item.selected */
.list-item.selected {
    background: var(--o-primary-soft);
}

/* B2 — ui.css:124 — hover em itens da lista de conexões */
.list-item:not(.selected) .caption:hover {
    background: var(--o-surface-1);
}

/* B3 — lists.css:52 — hover nos cards de conexões recentes */
.recent-connections .connection:hover {
    background: var(--o-surface-1);
}

/* B4 — menu.css:143 — hover nos links do dropdown do user */
.menu-dropdown .menu-contents li a:hover {
    background-color: var(--o-surface-3);
    color: var(--o-text-strong);
}

/* B5 — tabs.css:53 — hover nas tabs de navegação (settings, etc.) */
.page-tabs .page-list li a[href]:hover,
.section-tabs li a:hover {
    background-color: var(--o-primary-soft);
    color: var(--o-primary);
}

/* B6 — sessions.css:25 — hover nas rows da tabela de sessões */
.settings table.session-list tr.session:hover {
    background: var(--o-surface-1);
}

/* B7 — zoom.css:46 — hover nos botões de zoom do client */
.client-zoom .client-zoom-out:hover,
.client-zoom .client-zoom-in:hover {
    background: var(--o-surface-2);
    border-color: var(--o-border-default);
}

/* B8 — filesystem-menu.css:56 — hover nos breadcrumbs do file browser */
#filesystem-menu .header.breadcrumbs .breadcrumb:hover {
    background-color: var(--o-surface-1);
}

/* B9 — input.css:21 — tap highlight verde para azul Orizon */
input[type=checkbox], input[type=number], input[type=text],
input[type=email], input[type=radio], label, textarea {
    -webkit-tap-highlight-color: rgba(30, 144, 255, 0.3);
}


/* ===========================================================
   8. INCREMENTO C — USER MENU DROPDOWN
   ============================================================
   Estrutura: .user-menu > .menu-dropdown > .menu-title + .menu-contents
   Original tem fundo #EEE, links pretos, hover verde. Refeito aqui.
   =========================================================== */

/* Trigger (botão com o username) — caixa com borda em 4 lados, sem tocar no .header pai */
.menu-dropdown {
    background: var(--o-surface-1);
    border: 1px solid var(--o-border-default);
    border-radius: var(--o-radius-md);
    padding: 0;
    transition: var(--o-transition);
}

.menu-dropdown:hover {
    background: var(--o-surface-2);
    border-color: var(--o-border-strong);
}

.menu-dropdown.open,
.menu-dropdown.open:hover {
    background: var(--o-surface-2);
    border-color: var(--o-border-strong);
    border-bottom-color: transparent;
    border-radius: var(--o-radius-md) var(--o-radius-md) 0 0;
}

/* Texto do username no trigger */
.menu-dropdown .menu-title {
    color: var(--o-text-default);
    font-family: var(--o-font-sans);
    font-size: var(--o-text-sm);
    font-weight: 500;
}

/* Painel do dropdown */
.menu-dropdown .menu-contents {
    background: var(--o-surface-2);
    border: 1px solid var(--o-border-soft);
    border-top: none;
    border-radius: 0 0 var(--o-radius-md) var(--o-radius-md);
    box-shadow: var(--o-shadow-md);
    min-width: 220px;
}

/* Seção de perfil */
.user-menu .menu-dropdown .menu-contents .profile {
    padding: var(--o-space-4);
    margin: 0;
    border-bottom: 1px solid var(--o-border-subtle);
    width: auto;
}

.user-menu .menu-dropdown .menu-contents .profile .full-name {
    color: var(--o-text-strong);
    font-size: var(--o-text-base);
    font-weight: 600;
}

.user-menu .menu-dropdown .menu-contents .profile .organization,
.user-menu .menu-dropdown .menu-contents .profile .organizational-role {
    color: var(--o-text-soft);
    font-size: var(--o-text-sm);
}

/* Links do dropdown — base */
.menu-dropdown .menu-contents li a {
    color: var(--o-text-default);
    padding: var(--o-space-3) var(--o-space-4) var(--o-space-3) var(--o-space-10);
    font-family: var(--o-font-sans);
    font-size: var(--o-text-sm);
    border-left: 3px solid transparent;
    transition: var(--o-transition);
}

/* Hover nos links */
.menu-dropdown .menu-contents li a:hover {
    background-color: var(--o-surface-3);
    color: var(--o-text-strong);
    border-left-color: var(--o-border-soft);
}

/* Página atual — border-left azul, sem background sólido (instrução #7) */
.menu-dropdown .menu-contents li a.current,
.menu-dropdown .menu-contents li a.current:hover {
    background-color: transparent;
    border-left: 3px solid var(--o-primary);
    color: var(--o-primary);
    font-weight: 600;
    opacity: 1;
    cursor: default;
}

/* Logout (danger) — sem o fundo vermelho berrante do original */
.menu-dropdown .menu-contents li a.danger,
.menu-dropdown .menu-contents li a.logout {
    color: var(--o-danger);
    background: transparent;
    font-weight: 500;
}

.menu-dropdown .menu-contents li a.danger:hover,
.menu-dropdown .menu-contents li a.logout:hover {
    background-color: var(--o-danger-soft);
    color: var(--o-danger);
    border-left-color: var(--o-danger);
}

/* Tab atual em settings (border-bottom azul, sem bg sólido) */
.page-tabs .page-list li a[href].current,
.page-tabs .page-list li a[href].current:hover,
.section-tabs li a.current,
.section-tabs li a.current:hover {
    background: transparent;
    border-bottom: 2px solid var(--o-primary);
    color: var(--o-primary);
    font-weight: 600;
    cursor: default;
    opacity: 1;
}

/* Barra de tabs — border-bottom sutil para separar do conteúdo */
.page-tabs .page-list ul,
.section-tabs ul {
    background: var(--o-surface-1);
    border-bottom: 1px solid var(--o-border-subtle);
}


/* ===========================================================
   9. INCREMENTO D — CORES DE TEXTO E ÍCONES
   ============================================================
   Sobrescreve color: black hardcoded em listas, tabs e menus.
   Inverte ícones de protocolo (fill:#000) para visibilidade no dark.
   Esconde ícones do dropdown do user (Opção A — Fase 2 tratará).
   =========================================================== */

/* ── Nomes em itens de lista — ui.css:86 .list-item .name { color: black }
   Especificidade (0,2,0) — cascade wins */
.list-item .name {
    color: var(--o-text-default);
}

.list-item .usage {
    color: var(--o-text-mute);
    font-style: normal;
}

/* ── Links de conexões — lists.css:32/40/48 — especificidade (0,2,1)/(0,3,1) */
.connection a,
.user a,
.user-group a,
.connection-group a {
    color: var(--o-text-default);
}

.connection a:hover,
.user a:hover,
.user-group a:hover,
.connection-group a:hover {
    color: var(--o-text-strong);
}

.connection a:visited,
.user a:visited,
.user-group a:visited,
.connection-group a:visited {
    color: var(--o-text-soft);
}

/* ── Tabs de navegação — tabs.css:42 (0,3,1) e :visited (0,4,1) */
.page-tabs .page-list li a[href],
.section-tabs li a {
    color: var(--o-text-soft);
}

.page-tabs .page-list li a[href]:visited {
    color: var(--o-text-soft);
}

/* ── Links na lista de conexões do settings — connection-list.css:37 (0,5,1) */
.settings.connections .connection-list .new-sharing-profile a,
.settings.connections .connection-list .new-sharing-profile a:hover,
.settings.connections .connection-list .new-sharing-profile a:visited {
    color: var(--o-primary);
    text-decoration: none;
}

/* ── Ícones de protocolo nos itens de lista ──
   .icon é elemento SEPARADO do .name → filter não afeta o texto.
   brightness(0): garante preto → invert(1): preto vira branco → opacity: suaviza */
.connection .icon,
.connection-group .icon,
.sharing-profile .icon,
.user .icon,
.user-group .icon {
    filter: brightness(0) invert(1) opacity(0.65);
}

/* Ícone expand/collapse dos grupos — um pouco mais discreto */
.expandable > .caption .icon.expand {
    filter: brightness(0) invert(1) opacity(0.45);
}

/* ── Ícones do dropdown do user — Opção A: esconder
   !important em background-image necessário: user-menu.css tem seletores
   com atributo [href="..."] em especificidade (0,5,1), impossível de
   bater sem listar cada href individualmente — aprovado nas regras do projeto */
.user-menu .menu-dropdown .menu-contents li a {
    background-image: none !important;
    padding-left: var(--o-space-4) !important;
}

/* Ícone do user no trigger (menu-title) — user-menu.css (0,3,0), cascade wins */
.user-menu .menu-dropdown .menu-title {
    background-image: none;
    padding-left: var(--o-space-4);
}


/* ===========================================================
   10. BLOCO 2 — FORMS & INPUTS (editor de conexão + settings)
   ============================================================
   Editor de conexão era "todo branco": inputs/selects com fundo
   branco (input.css), headers com caixa cinza feia, sem container.
   Layout horizontal (table-row) é PRESERVADO — só restilizamos.

   Escopo dos seletores de input é global, mas seguro:
   - Login (.login-ui ... em 0,3,1+) tem especificidade maior → intacto
   - Filtro do header (.header .filter input em 0,2,1) → intacto
   Layout específico do editor é escopado em body.manage.
   =========================================================== */

/* ── Inputs / textareas / selects / location — fundo escuro ──
   Vence input.css (0,1,1) { background: white } por cascata (mesma
   especificidade, orizon.css carrega depois). NÃO toca em width/max-width
   pra não mexer no comportamento dos filtros de busca. */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select,
div.location {
    background-color: var(--o-surface-1);
    color: var(--o-text-default);
    border: 1px solid var(--o-border-default);
    border-radius: var(--o-radius-sm);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
    border-color: var(--o-primary);
    box-shadow: 0 0 0 3px var(--o-primary-soft);
    outline: none;
}

/* ── Select: chevron SVG custom (data-URI, currentColor não funciona em
   background-image, então cor é fixa: --o-text-soft #9ca3af / focus --o-primary #1e90ff) ── */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    cursor: pointer;
}

select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e90ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ── Checkbox / radio — accent azul + tamanho legível ──
   color-scheme: dark faz o box DESMARCADO renderizar escuro nativamente
   (background-color/border não funcionam em controle nativo sem appearance:none,
   mesma lição do autofill). accent-color mantém o check azul quando marcado. */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--o-primary);
    color-scheme: dark;
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin-right: var(--o-space-2);
}

/* ── h3.form-header — unifica grupos de atributos E parâmetros ──
   .attributes .form h3 (0,2,1) aplica caixa cinza feia só nos atributos.
   body.manage h3.form-header (0,2,2) vence e cobre os dois. Escopado
   em body.manage pra não vazar pra h3 de login/home/settings. */
body.manage .form-header,
body.manage h3.form-header {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--o-border-subtle);
    box-shadow: none;
    color: var(--o-text-soft);
    font-size: var(--o-text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0 0 var(--o-space-2) 0;
    margin: var(--o-space-6) 0 var(--o-space-4) 0;
    width: auto;
}

/* ── .header (título "EDITAR CONEXÃO" + dividers PARÂMETROS/HISTÓRICO) ──
   Neutraliza o background cinza de headers.css. Escopo cirúrgico em
   body.manage — NÃO cria 'barra cinza' nas outras telas.
   O user-menu (guacadmin) continua visível: tem fundo/borda próprios (Bloco 1). */
body.manage .header {
    background: transparent;
    box-shadow: none;
    border-top: none;
    border-bottom: 1px solid var(--o-border-soft);
}

body.manage .header h2,
body.manage h2.header {
    color: var(--o-text-strong);
    font-size: var(--o-text-lg);
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* ── Labels (field-header dos campos + th da tabela properties) ── */
body.manage .labeled-field .field-header label,
body.manage table.properties th {
    color: var(--o-text-soft);
    font-size: var(--o-text-sm);
}

/* ── Barra lateral dos parâmetros — era rgba(0,0,0,0.125) invisível no dark ── */
body.manage .connection-parameters .form .fields {
    border-left-color: var(--o-border-subtle);
}

/* ── Ícone toggle-password (mostrar/ocultar senha) — SVG escuro invisível no dark ── */
body.manage .form-field .password-field .icon.toggle-password {
    filter: brightness(0) invert(1) opacity(0.6);
}

/* ── Container centralizado — editor estende até a borda por padrão.
   Começa em 960px (ajustável); ultra-wide nunca estica até a borda. ── */
.manage-connection.view {
    max-width: 960px;
    margin: 0 auto;
}


/* ===========================================================
   11. PAINEL DE CONEXÕES ATIVAS (#other-connections)
   ============================================================
   "Mini-player" das sessões em background. display:none até a classe
   .has-clients (conexão ativa). Estado correto do Guacamole — só
   refinado pra coerência com o tema (era border branca + fundo preto).
   =========================================================== */

#other-connections .client-panel.has-clients {
    background: var(--o-surface-2);
    border: 1px solid var(--o-border-soft);
    border-top-left-radius: var(--o-radius-md);
    box-shadow: var(--o-shadow-md);
}

#other-connections .client-panel-connection {
    border-color: var(--o-border-soft);
    border-radius: var(--o-radius-sm);
}

#other-connections .client-panel-handle {
    background-color: var(--o-surface-3);
}


/* ============================================================
   FASE 1 — HOME SOFISTICADA + HEADER GLOBAL
   ============================================================
   Refatoração estrutural (templates + CSS), não só override.
   Naming: prefixo orizon- + BEM (__element, --modifier).
   ============================================================ */

/* ---- 1.2 — HEADER GLOBAL PERSISTENTE ----
   Renderizado em index.html DENTRO de ng-switch-when="ready" → só
   aparece logado. Login/loggedOut/fatalError são outros estados do
   switch, então o header NÃO vaza pra essas telas. */
.orizon-header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: var(--o-space-8);
    height: 64px;
    padding: 0 var(--o-space-6);
    background: rgba(18, 24, 42, 0.80);
    backdrop-filter: blur(20px) saturate(120%);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
    border-bottom: 1px solid var(--o-border-subtle);
}

/* Brand: nuvem (logo-144) + nome */
.orizon-header__brand {
    display: flex;
    align-items: center;
    gap: var(--o-space-3);
    flex: 0 0 auto;
}
.orizon-header__logo {
    height: 32px;
    width: auto;
    display: block;
}
.orizon-header__brand-name {
    font-size: var(--o-text-md);
    font-weight: 600;
    color: var(--o-text-strong);
    letter-spacing: 0.01em;
    white-space: nowrap;
}

/* Nav central */
.orizon-header__nav {
    display: flex;
    align-items: center;
    gap: var(--o-space-4);
    flex: 1 1 auto;
}
.orizon-header__nav-link {
    display: inline-flex;
    align-items: center;
    height: 64px;
    padding: 0 var(--o-space-2);
    color: var(--o-text-soft);
    font-size: var(--o-text-base);
    font-weight: 500;
    border-bottom: 2px solid transparent;
    transition: var(--o-transition);
}
.orizon-header__nav-link:hover {
    color: var(--o-text-default);
}

/* Active state via body class (zero JS — Angular já aplica body.home/settings/etc) */
body.home .orizon-header__nav-link[href="#/"],
body.settings .orizon-header__nav-link[href*="/settings"],
body.manage .orizon-header__nav-link[href*="/settings"] {
    color: var(--o-primary);
    border-bottom-color: var(--o-primary);
}

/* User-menu à direita */
.orizon-header__user {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

/* Esconde user-menu duplicado dos .header internos — o header global é o dono.
   O global está FORA de #content, então não é afetado por este seletor. */
#content .header .user-menu {
    display: none;
}

/* Header some durante conexão RDP/VNC — não pode cobrir o canvas */
body.client .orizon-header {
    display: none;
}


/* ---- 1.3-3B — ESQUELETO DA HOME ----
   Estrutura/hierarquia apenas. NÃO estiliza os cards internos de
   connection/connectionGroup (vem na 3C) — eles seguem com style original.
   Toggle de layout é placeholder visual; lógica vem na 3D. */

.orizon-home {
    max-width: 1080px;
    margin: 0 auto;
    padding: var(--o-space-10) var(--o-space-6) var(--o-space-16);
}
.orizon-home.loading {
    opacity: 0.6;
}

/* Cabeçalho da página */
.orizon-home__header {
    margin-bottom: var(--o-space-8);
}
.orizon-home__title {
    margin: 0 0 var(--o-space-2);
    font-size: var(--o-text-3xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--o-text-strong);
}
.orizon-home__subtitle {
    margin: 0;
    font-size: var(--o-text-md);
    color: var(--o-text-soft);
}

/* Linha de controles: busca (cresce) | toggle | + Nova */
.orizon-home__controls {
    display: flex;
    align-items: center;
    gap: var(--o-space-4);
    flex-wrap: wrap;
    margin-bottom: var(--o-space-10);
}
.orizon-home__search {
    flex: 1 1 280px;
    min-width: 240px;
}
.orizon-home__layout-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    gap: var(--o-space-1);
    padding: var(--o-space-1);
    background: var(--o-surface-1);
    border: 1px solid var(--o-border-soft);
    border-radius: var(--o-radius-md);
}
.orizon-home__layout-btn {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--o-text-soft);
    font-family: var(--o-font-sans);
    font-size: var(--o-text-sm);
    font-weight: 500;
    padding: var(--o-space-2) var(--o-space-3);
    border-radius: var(--o-radius-sm);
    cursor: pointer;
    transition: var(--o-transition);
}
.orizon-home__layout-btn:hover {
    color: var(--o-text-default);
}
.orizon-home__layout-btn.is-active {
    background: var(--o-primary-soft);
    color: var(--o-primary-hover);
}
.orizon-home__new-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: var(--o-space-2);
    padding: var(--o-space-2) var(--o-space-5);
    background: var(--o-primary);
    color: var(--o-text-strong);
    font-size: var(--o-text-sm);
    font-weight: 600;
    border-radius: var(--o-radius-md);
    text-decoration: none;
    transition: var(--o-transition);
}
.orizon-home__new-btn:hover {
    background: var(--o-primary-hover);
    box-shadow: var(--o-shadow-glow);
}

/* Seções */
.orizon-home__section {
    margin-bottom: var(--o-space-12);
}
.orizon-home__section-title {
    margin: 0 0 var(--o-space-4);
    font-size: var(--o-text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--o-text-mute);
}


/* ===========================================================
   FIM — orizon.css
   ============================================================
   Próximas fases vão adicionar:
   - Templates de home, settings, client refeitos
   - Componentes (cards, listas, botões, dropdowns)
   ============================================================ */