/* Tema "NOC Manager" para o Console de Administração do Keycloak
   (keycloak.v2 admin / PatternFly React). O console já é escuro por
   padrão — aqui troca o acento azul genérico pelo roxo da marca, os
   ícones/logo padrão do Keycloak pelos da Ollá, e o menu lateral segue
   o MESMO padrão já usado no PowerDNS-Admin: texto neutro em repouso,
   só um detalhe sutil no hover, e roxo reservado pro item ativo. */
:root {
    --noc-text:       #F2F2F7;
    --noc-text-dim:   #A9AAB6;
    --noc-panel-alt:  rgba(255, 255, 255, 0.08);
    --noc-accent:     #A855F7;
    --noc-accent-dim: #8B3DEA;
    --noc-accent-fg:  #FFFFFF;
}

/* Logo no topo (retangular, 162x35) e ícone da tela de boas-vindas
   (quadrado, 114x114) — troca o conteúdo da própria <img> em vez de só
   estilizar por cima, já que são elementos <img src> reais, não
   background-image. */
img.keycloak__pageheader_brand {
    content: url('../img/noc-icon.png');
    width: 32px;
    height: 32px;
    object-fit: contain;
}
img.keycloak__dashboard_icon {
    content: url('../img/noc-icon.png');
}

/* O link do brand no topo esquerdo só tinha o ícone sozinho, sem
   nenhum texto ao lado — lia como "só um ícone", não como uma logo de
   verdade. Acrescenta "NOC MANAGER" ao lado via ::after (o <a> aceita
   pseudo-elemento normalmente, diferente do <img> dentro dele), mesmo
   padrão de texto já usado no cabeçalho da tela de login. */
a.pf-v5-c-masthead__brand {
    display: flex !important;
    align-items: center;
    gap: 10px;
}
a.pf-v5-c-masthead__brand::after {
    content: "NOC MANAGER";
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 0.03em;
    color: var(--noc-text);
    white-space: nowrap;
}

/* Botões primários — troca do azul padrão do PatternFly pelo roxo. */
.pf-v5-c-button.pf-m-primary {
    background-color: var(--noc-accent) !important;
}
.pf-v5-c-button.pf-m-primary:hover {
    background-color: var(--noc-accent-dim) !important;
}

/* Menu lateral — mesmo padrão do PowerDNS-Admin:
   repouso = texto neutro (nem azul nem roxo, só a cor de texto normal)
   hover   = só um detalhe (fundo sutil + texto um pouco mais claro)
   ativo   = roxo, com uma borda lateral indicando qual item é */
.pf-v5-c-nav__link {
    color: var(--noc-text-dim) !important;
}
.pf-v5-c-nav__link:hover {
    background-color: var(--noc-panel-alt) !important;
    color: var(--noc-text) !important;
}
.pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link {
    color: var(--noc-accent) !important;
    background-color: var(--noc-panel-alt) !important;
    box-shadow: inset 3px 0 0 var(--noc-accent);
}

/* Links de conteúdo (fora do menu lateral) continuam roxos, como
   links normalmente são — só o menu lateral fica neutro. */
.pf-v5-c-page__main a:not(.pf-v5-c-button):not(.pf-v5-c-nav__link) {
    color: var(--noc-accent);
}
.pf-v5-c-page__main a:not(.pf-v5-c-button):not(.pf-v5-c-nav__link):hover {
    color: var(--noc-accent-dim);
}

.pf-v5-c-tabs__link.pf-m-current {
    --pf-v5-c-tabs__link--m-current--before--BorderColor: var(--noc-accent);
    color: var(--noc-accent) !important;
}
.pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle {
    background-color: var(--noc-accent) !important;
}

/* Tela de boas-vindas do realm — melhoria visual (era só um ícone +
   texto solto no centro da tela, sem nenhum enquadramento). */
.pf-v5-c-empty-state {
    background: linear-gradient(180deg, oklch(0.58 0.14 303 / 8%), transparent 60%);
    border-radius: 16px;
    padding: 48px 32px !important;
}
.pf-v5-c-empty-state__icon.keycloak__dashboard_icon,
img.keycloak__dashboard_icon {
    filter: drop-shadow(0 8px 24px oklch(0.58 0.14 303 / 35%));
}