/* HABB-DESIGN-003 (etapa CMS hbok) - refinamentos da proposta 002C.
   Camada puramente visual: sem rotas, controllers ou JS novos.
   Tokens com contraste WCAG AA sobre fundo claro. */
:root {
    --habb-cyan: #0e7490;
    --habb-cyan-dark: #155e75;
    --habb-purple: #6d569e;
    --habb-purple-light: #957cc3;
}

/* Foco visível em toda a CMS */
.habb-focus:focus-visible,
a:focus-visible,
button:focus-visible,
select:focus-visible,
textarea:focus-visible,
input:focus-visible {
    outline: 2px solid var(--habb-purple-light);
    outline-offset: 2px;
}

/* Cabeçalho: wordmark e balão de online */
.habb-wordmark {
    display: inline-block;
    padding: 4px 12px;
    font-family: 'Nunito', sans-serif;
    font-size: 38px;
    font-weight: 800;
    letter-spacing: .08em;
    color: #fff;
    text-shadow: 0 3px 0 #1f2937, 0 6px 14px rgba(15, 23, 42, .35);
    text-decoration: none;
}
.habb-wordmark-img { width: 299px; height: auto; max-width: 100%; image-rendering: pixelated; }
@media (max-width: 639px) { .habb-wordmark-img { width: 150px; } }
.habb-online-bubble {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 2px solid #06b6d4;
    border-radius: 6px;
    box-shadow: 0 4px 6px -1px rgba(6, 182, 212, .5);
    padding: 8px 14px;
    color: #1f2937;
    font-size: .8125rem;
    line-height: 1.2;
}
.habb-online-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #15803d;
    margin-right: 4px;
}
.habb-online-sub { font-size: 10px; color: #4b5563; }
@media (max-width: 479px) {
    .habb-wordmark { font-size: 28px; padding: 2px 6px; }
    .habb-online-bubble { padding: 6px 8px; }
}

/* Barra de navegação (pública e autenticada) */
.habb-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: .875rem;
    line-height: 1.25rem;
    color: #4b5563;
    text-decoration: none;
    transition: color .15s, background-color .15s;
}
.habb-nav-link img { image-rendering: pixelated; }
.habb-nav-link:hover { color: var(--habb-cyan); background: rgba(14, 116, 144, .1); font-weight: 700; }
.habb-nav-link.is-active { color: var(--habb-cyan); background: rgba(14, 116, 144, .1); font-weight: 700; }
.habb-nav-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px;
    border-bottom: 2px solid transparent;
    font-size: .8125rem;
    color: #4b5563;
    text-decoration: none;
}
.habb-nav-action:hover,
.habb-nav-action.is-active { color: var(--habb-cyan); border-color: var(--habb-cyan); }
.habb-nav-action .habb-nav-label { display: none; }
@media (min-width: 768px) {
    .habb-nav-action .habb-nav-label { display: inline; }
}

/* Cabeçalhos de módulo no padrão hbok */
.habb-card-header { color: #fff; font-weight: 700; }
.habb-card-header.is-cyan { background: var(--habb-cyan); }
.habb-card-header.is-purple { background: var(--habb-purple); }

/* Botões */
.habb-btn-cyan { background: var(--habb-cyan); border-color: var(--habb-cyan-dark); color: #fff; }
.habb-btn-cyan:hover { background: var(--habb-cyan-dark); }
.habb-btn-green-3d {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #15803d;
    border-bottom: 4px solid #14532d;
    color: #fff;
    font-weight: 800;
    text-transform: uppercase;
    padding: 8px 16px;
    border-radius: 2px;
    text-decoration: none;
    transition: background-color .3s;
}
.habb-btn-green-3d:hover { background: #166534; }

/* Login: ícone do avatar contido dentro do campo */
.habb-input-avatar {
    position: absolute;
    left: 8px;
    top: 28px;
    max-height: 30px;
    width: auto;
    pointer-events: none;
    image-rendering: pixelated;
}

/* Faixa de moedas em /me com contraste AA */
.habb-coin-strip {
    background: #fff;
    border: 1px solid #cbd5e1;
    border-top: 0;
    border-radius: 0 0 2px 2px;
    padding: 10px 16px;
    color: #111827;
}
.habb-coin { display: inline-flex; align-items: center; gap: 4px; font-size: .875rem; font-weight: 800; }
.habb-coin small { font-weight: 700; color: #475569; font-size: .75rem; }
.habb-coin--credits { color: #92400e; }
.habb-coin--duckets { color: var(--habb-purple); }
.habb-coin--diamonds { color: var(--habb-cyan); }
.habb-help-link { color: #1d4ed8; font-size: .75rem; font-weight: 800; }
.habb-help-link:hover { color: #1e40af; text-decoration: underline; }

/* Aviso quando não há notícias */
.habb-empty-news { grid-column: 1 / -1; }

/* ---- Tema verde (pedido do proprietario, 19/10/2026): troca azul/ciano por verde, tons da logo HABB ---- */
:root { --habb-cyan: #15803d; --habb-cyan-dark: #166534; --habb-green: #15803d; --habb-green-dark: #166534; --habb-green-light: #5ee21b; }
.habb-btn-cyan { background: #15803d; border-color: #166534; }
.habb-btn-cyan:hover { background: #166534; }
.habb-online-bubble { border-color: #22c55e; box-shadow: 0 4px 6px -1px rgba(34, 197, 94, .5); }
.habb-coin--diamonds { color: #15803d; }
.habb-help-link { color: #166534; }
.habb-help-link:hover { color: #14532d; }
.habb-nav-link:hover, .habb-nav-link.is-active { color: #15803d; background: rgba(21, 128, 61, .1); }
.habb-nav-action:hover, .habb-nav-action.is-active { color: #15803d; border-color: #15803d; }
.habb-card-header.is-cyan { background: #15803d; }
a:focus-visible, button:focus-visible, select:focus-visible, textarea:focus-visible, input:focus-visible { outline-color: #5ee21b; }
/* Utilitarios Tailwind (azul/ciano -> verde), gerados a partir das classes usadas nas views do tema hbok */
.bg-blue-50{background-color:#f0fdf4!important}
.bg-blue-600{background-color:#15803d!important}
.bg-cyan-200\/20{background-color:rgba(187,247,208,0.20)!important}
.bg-cyan-50\/60{background-color:rgba(240,253,244,0.60)!important}
.bg-cyan-500{background-color:#15803d!important}
.bg-cyan-600{background-color:#15803d!important}
.bg-cyan-700{background-color:#166534!important}
.bg-cyan-800{background-color:#14532d!important}
.bg-cyan-800\/10{background-color:rgba(20,83,45,0.10)!important}
.bg-cyan-900{background-color:#052e16!important}
.border-blue-200{border-color:#bbf7d0!important}
.border-blue-500{border-color:#15803d!important}
.border-cyan-600{border-color:#15803d!important}
.border-cyan-700{border-color:#166534!important}
.border-cyan-700\/50{border-color:rgba(22,101,52,0.50)!important}
.border-cyan-800{border-color:#14532d!important}
.border-cyan-900{border-color:#052e16!important}
.focus-visible\:ring-cyan-600:focus-visible{--tw-ring-color:#15803d!important}
.focus\:border-cyan-500:focus{border-color:#15803d!important}
.focus\:border-cyan-600:focus{border-color:#15803d!important}
.focus\:ring-cyan-600:focus{--tw-ring-color:#15803d!important}
.focus\:shadow-cyan-600:focus{--tw-shadow-color:#15803d;--tw-shadow:var(--tw-shadow-colored)!important}
.from-cyan-700{--tw-gradient-from:#166534;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,rgba(21,128,61,0))!important}
.group:hover .group-hover\:text-blue-500{color:#15803d!important}
.hover\:bg-blue-50:hover{background-color:#f0fdf4!important}
.hover\:bg-blue-700:hover{background-color:#166534!important}
.hover\:bg-cyan-50:hover{background-color:#f0fdf4!important}
.hover\:bg-cyan-700:hover{background-color:#166534!important}
.hover\:bg-cyan-800\/10:hover{background-color:rgba(20,83,45,0.10)!important}
.hover\:border-cyan-800:hover{border-color:#14532d!important}
.hover\:text-blue-400:hover{color:#15803d!important}
.hover\:text-blue-500:hover{color:#15803d!important}
.hover\:text-blue-600:hover{color:#15803d!important}
.hover\:text-blue-700:hover{color:#166534!important}
.hover\:text-cyan-600:hover{color:#15803d!important}
.hover\:text-cyan-800:hover{color:#14532d!important}
.hover\:text-cyan-900:hover{color:#052e16!important}
.ring-cyan-700{--tw-ring-color:#166534!important}
.shadow-cyan-500{--tw-shadow-color:#15803d;--tw-shadow:var(--tw-shadow-colored)!important}
.text-blue-400{color:#15803d!important}
.text-blue-500{color:#15803d!important}
.text-blue-600{color:#15803d!important}
.text-blue-900{color:#052e16!important}
.text-cyan-50{color:#f0fdf4!important}
.text-cyan-700{color:#166534!important}
.text-cyan-800{color:#14532d!important}
.to-cyan-500{--tw-gradient-to:#15803d!important}
/* Elementos do habb-polish.css da release (CODEX-002) que usavam azul-petroleo */
:root { --habb-teal: #166534; }
.habb-tabs a { color: #166534; }
.habb-tabs a[aria-current], .habb-tabs a:hover { background: #dcfce7; color: #14532d; }
.habb-text-link { color: #15803d; }
.habb-role-heading { background: #f0fdf4; }
.habb-member-card:hover { background: #f0fdf4; border-color: #86efac; }

/* ---- Equipe e Colaboradores (partial team-directory da release): cabecalho com emblema oficial e acento por cargo ---- */
.habb-role.habb-panel { border-radius: 2px; border-color: #cbd5e1; }
.habb-role .habb-role-heading { justify-content: flex-start; align-items: center; gap: 14px; flex-wrap: wrap; padding: 10px 14px; min-height: 64px; background: linear-gradient(90deg, #052e16 0%, #14532d 100%); border-bottom: 4px solid var(--rank, #6d569e); color: #fff; }
.habb-role .habb-role-heading > div { flex: 1 1 160px; min-width: 0; }
.habb-role .habb-role-heading h2 { color: #fff; font-size: 1rem; }
.habb-role .habb-role-heading p { color: #bbf7d0; }
.habb-role-badge { display: inline-flex; align-items: center; justify-content: center; width: 100px; height: 100px; flex: 0 0 100px; margin: -26px -14px -26px -20px; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .45)); }
.habb-role-badge img { max-width: 100%; max-height: 100%; width: auto; height: auto; image-rendering: pixelated; }
.habb-role .habb-count { background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .3); color: #fff; border-radius: 2px; }
.habb-role .habb-member-grid { background: #f8fafc; }
.habb-role .habb-member-card { background: #fff; border-left: 4px solid var(--rank, #6d569e); border-radius: 2px; transition: box-shadow .15s, transform .15s; }
.habb-role .habb-member-card:hover { background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .12); transform: translateY(-1px); border-color: #e4ecf1; border-left-color: var(--rank, #6d569e); }
.habb-member-card strong { color: #14532d; }
.habb-presence { font-weight: 700; }