/*!
 * WebEngine CMS - Tema Abismo Noturno
 * Uma estética sombria e misteriosa para seu mundo de trevas
 * Absolutamente nenhum elemento branco permitido
 */

/* Reset global - banindo completamente o branco */
*, *::before, *::after {
    color: #777777 !important;
    border-color: #333333 !important;
    text-shadow: 0 0 3px #000000 !important;
}

/* Fundos e containers */
html, body {
    background: #050505 url('../img/background.jpg') no-repeat top center !important;
    color: #777777 !important;
}

body {
    background-color: #050505 !important;
    background-image: linear-gradient(to bottom, #0a0a0a, #050505) !important;
}

#container, .container, #wrapper, .wrapper, #content, .content {
    background-color: rgba(10, 10, 10, 0.95) !important;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.9) !important;
    border: 1px solid rgba(0, 102, 68, 0.3) !important;
    backdrop-filter: blur(10px) !important;
}

/* Elementos de texto - tons de cinza esfumaçado */
p, span, div, li, td, th, label {
    color: #666666 !important;
}

/* Títulos com aura mística */
h1, h2, h3, h4, h5, h6, .page-title, .panel-title {
    color: #00a86b !important;
    text-shadow: 0 0 8px rgba(0, 102, 68, 0.7) !important;
    letter-spacing: 1px !important;
}

/* Links como portais para outros reinos */
a, a:link, a:visited {
    color: #00a86b !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

a:hover, a:active, a:focus {
    color: #00cc84 !important;
    text-shadow: 0 0 10px rgba(0, 168, 107, 0.7) !important;
}

/* Painéis e cards como janelas para o abismo */
.panel, .card, .box, .well, .jumbotron, .thumbnail, .alert, 
.panel-general, .panel-news, .panel-downloads, .panel-sidebar {
    background-color: rgba(15, 15, 15, 0.95) !important;
    border: 1px solid rgba(0, 102, 68, 0.3) !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(5px) !important;
}

/* Cabeçalhos de painéis como portais místicos */
.panel-heading, .card-header, .panel-title {
    background-color: rgba(20, 20, 20, 0.95) !important;
    border-bottom: 1px solid rgba(0, 102, 68, 0.3) !important;
    background-image: linear-gradient(to right, rgba(0, 102, 68, 0.1), transparent) !important;
}

/* Formulários como rituais arcanos */
input, textarea, select, .form-control {
    background-color: #111111 !important;
    border: 1px solid #333333 !important;
    color: #666666 !important;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.8) !important;
}

input:focus, textarea:focus, select:focus, .form-control:focus {
    background-color: #181818 !important;
    border: 1px solid #006644 !important;
    box-shadow: 0 0 10px rgba(0, 102, 68, 0.7) !important;
    color: #777777 !important;
}

/* Botões como cristais mágicos */
.btn, button, input[type="button"], input[type="submit"] {
    background-color: #222222 !important;
    background-image: linear-gradient(to bottom, #222222, #181818) !important;
    border: 1px solid #333333 !important;
    color: #666666 !important;
    text-shadow: 0 1px 2px #000000 !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5) !important;
    transition: all 0.3s ease !important;
}

.btn:hover, button:hover, input[type="button"]:hover, input[type="submit"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7) !important;
}

/* Botões primários com energia mística */
.btn-primary, button.primary, input[type="submit"] {
    background-color: #006644 !important;
    background-image: linear-gradient(to bottom, #006644, #004d33) !important;
    border-color: #004d33 !important;
    color: #888888 !important;
    box-shadow: 0 0 10px rgba(0, 102, 68, 0.5) !important;
}

.btn-primary:hover, button.primary:hover, input[type="submit"]:hover {
    background-image: linear-gradient(to bottom, #00805a, #006644) !important;
    box-shadow: 0 0 15px rgba(0, 102, 68, 0.7) !important;
}

/* Tabelas como pergaminhos antigos */
table, .table {
    background-color: rgba(15, 15, 15, 0.95) !important;
    border: 1px solid #333333 !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) !important;
}

th, thead tr {
    background-color: rgba(20, 20, 20, 0.95) !important;
    color: #00a86b !important;
    border-bottom: 2px solid #006644 !important;
    background-image: linear-gradient(to bottom, rgba(0, 102, 68, 0.2), transparent) !important;
}

tr:nth-child(odd) {
    background-color: rgba(18, 18, 18, 0.95) !important;
}

tr:nth-child(even) {
    background-color: rgba(15, 15, 15, 0.95) !important;
}

tr:hover {
    background-color: rgba(30, 30, 30, 0.95) !important;
}

/* Navegação como caminhos no abismo */
#navbar {
    background-color: rgba(5, 5, 5, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border-bottom: 1px solid rgba(0, 102, 68, 0.3) !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8) !important;
}

#navbar ul li a {
    color: #666666 !important;
    text-shadow: 0 0 3px #000000 !important;
    transition: all 0.3s ease !important;
}

#navbar ul li a:hover {
    color: #888888 !important;
    background-color: rgba(0, 102, 68, 0.3) !important;
    text-shadow: 0 0 8px rgba(0, 102, 68, 0.7) !important;
}

/* Rodapé como o fim do abismo */
.footer {
    background-color: rgba(5, 5, 5, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border-top: 1px solid rgba(0, 102, 68, 0.2) !important;
    color: #555555 !important;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.8) !important;
}

/* Painéis de notícias como proclamações do além */
.panel-news {
    background-color: rgba(15, 15, 15, 0.95) !important;
    border: 1px solid rgba(0, 102, 68, 0.3) !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.7) !important;
}

.panel-news .panel-heading {
    background-color: rgba(20, 20, 20, 0.95) !important;
    border-bottom: 1px solid rgba(0, 102, 68, 0.3) !important;
    background-image: linear-gradient(to right, rgba(0, 102, 68, 0.2), transparent) !important;
}

.panel-news .panel-title {
    color: #00a86b !important;
}

.panel-news .panel-footer {
    background-color: rgba(10, 10, 10, 0.95) !important;
    border-top: 1px solid rgba(0, 102, 68, 0.2) !important;
    color: #555555 !important;
}

/* Rankings como tábuas de poder */
.rankings-table {
    background-color: rgba(15, 15, 15, 0.95) !important;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.7) !important;
}

.rankings-table tr td {
    color: #666666 !important;
    border-bottom: 1px solid rgba(0, 102, 68, 0.1) !important;
}

.rankings-table tr:first-child td {
    color: #00a86b !important;
    border-bottom: 3px solid #006644 !important;
    background-color: rgba(0, 102, 68, 0.2) !important;
    background-image: linear-gradient(to bottom, rgba(0, 102, 68, 0.2), transparent) !important;
}

.rankings-class-image {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8) !important;
    border: 1px solid rgba(0, 102, 68, 0.3) !important;
}

/* Efeitos de hover e interação */
.panel:hover, .card:hover, .btn:hover, a:hover, .rankings-class-image:hover {
    transform: translateY(-2px) !important;
    transition: all 0.3s ease !important;
}

/* Barra de informações do cabeçalho */
.header-info-container .header-info {
    background: rgba(5, 5, 5, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8) !important;
    border: 1px solid rgba(0, 102, 68, 0.3) !important;
    color: #666666 !important;
}

.header-info-container .header-info .header-info-block #tServerTime, 
.header-info-container .header-info .header-info-block #tLocalTime {
    color: #888888 !important;
}

.header-info-container .header-info .header-info-block #tServerDate, 
.header-info-container .header-info .header-info-block #tLocalDate {
    color: #666666 !important;
}

/* Barra de jogadores online */
.webengine-online-bar {
    background: rgba(5, 5, 5, 0.95) !important;
    border: 1px solid rgba(0, 102, 68, 0.3) !important;
}

.webengine-online-bar .webengine-online-bar-progress {
    background: #006644 url('../img/online_progress_bar.jpg') no-repeat left center !important;
    box-shadow: 0 0 10px rgba(0, 102, 68, 0.7) !important;
}

/* Elementos específicos do painel de usuário */
.panel-usercp {
    background: linear-gradient(to bottom, #181818, #111111) !important;
    border: 1px solid rgba(0, 102, 68, 0.2) !important;
}

.panel-usercp ul li {
    background-color: rgba(20, 20, 20, 0.9) !important;
    border-left: 3px solid transparent !important;
    transition: all 0.3s ease !important;
}

.panel-usercp ul li:hover {
    background-color: rgba(30, 30, 30, 0.9) !important;
    border-left: 3px solid #006644 !important;
    transform: translateX(3px) !important;
}

.panel-usercp ul li a {
    color: #666666 !important;
}

.panel-usercp ul li a:hover {
    color: #00a86b !important;
}

/* Minha conta e tabelas de personagens */
.myaccount-table tr td {
    color: #666666 !important;
    border-bottom: 1px solid rgba(0, 102, 68, 0.1) !important;
}

.myaccount-table tr td:first-child {
    color: #555555 !important;
}

.myaccount-character-block {
    background: rgba(15, 15, 15, 0.9) !important;
    border: 1px solid rgba(0, 102, 68, 0.2) !important;
}

.myaccount-character-block-level {
    background: rgba(0, 0, 0, 0.7) !important;
    color: #888888 !important;
}

.myaccount-character-name a {
    color: #777777 !important;
}

.myaccount-character-name a:hover {
    color: #00a86b !important;
}

/* Castle Siege específicos */
.castle-siege-block .castle-owner-panel {
    color: #777777 !important;
    border: 1px solid rgba(0, 102, 68, 0.3) !important;
    text-shadow: 1px 1px 1px #000 !important;
}

.castle-siege-block .castle-owner-panel:hover {
    box-shadow: 0 0 20px rgba(0, 102, 68, 0.3) !important;
    border: 1px solid rgba(0, 102, 68, 0.5) !important;
}

.castle-siege-block .castle-owner-panel a {
    color: #666666 !important;
}

.castle-siege-block .castle-owner-panel a:hover, 
.castle-siege-block .castle-owner-panel a:active {
    color: #00a86b !important;
    text-shadow: 0 0 5px rgba(0, 102, 68, 0.5) !important;
}

.castle-siege-block .castle-owner-panel .panel-body .castle-owner-name, 
.castle-siege-block .castle-owner-panel .panel-body .castle-owner-name a {
    color: #888888 !important;
    text-shadow: 0 0 10px rgba(0, 102, 68, 0.5) !important;
}

.castle-siege-block .castle-owner-panel .panel-body .castle-owner-ally-title {
    color: #555555 !important;
}

.castle-siege-block .castle-owner-panel .panel-body h4 {
    color: #00a86b !important;
    text-shadow: 0 0 5px rgba(0, 102, 68, 0.5) !important;
}

.castle-siege-block #siegeTimer {
    color: #888888 !important;
    text-shadow: 0 0 10px rgba(0, 102, 68, 0.5) !important;
}

.castle-siege-block #siegeTimer span {
    color: #666666 !important;
}

.castle-owner-widget {
    color: #666666 !important;
    border: 1px solid rgba(0, 102, 68, 0.3) !important;
    text-shadow: 1px 1px 1px #000 !important;
}

.castle-owner-widget:hover {
    box-shadow: 0 0 20px rgba(0, 102, 68, 0.3) !important;
    border: 1px solid rgba(0, 102, 68, 0.5) !important;
}

.castle-owner-widget .panel-heading .panel-title {
    color: #00a86b !important;
    text-shadow: 0 0 5px rgba(0, 102, 68, 0.5) !important;
}

.castle-owner-widget .panel-body span.alt {
    color: #00a86b !important;
}

.castle-owner-widget .panel-body a {
    color: #777777 !important;
}

.castle-owner-widget .panel-body a:hover {
    color: #00a86b !important;
    text-shadow: 0 0 5px rgba(0, 102, 68, 0.5) !important;
}

.btn-castlewidget {
    color: #777777 !important;
    background-color: rgba(20, 20, 20, 0.5) !important;
    border-color: #333333 !important;
}

.btn-castlewidget:active, .btn-castlewidget:focus, .btn-castlewidget:hover {
    color: #888888 !important;
    background-color: #006644 !important;
    border-color: #006644 !important;
}

/* Status de eventos e indicadores */
.event-schedule-open {
    color: #00a86b !important;
    text-shadow: 0 0 5px rgba(0, 102, 68, 0.5) !important;
}

.event-schedule-inprogress {
    color: #006699 !important;
    text-shadow: 0 0 5px rgba(0, 102, 153, 0.5) !important;
}

.castle-siege-status-active {
    color: #00a86b !important;
    text-shadow: 0 0 5px rgba(0, 102, 68, 0.5) !important;
}

.castle-siege-status-upcoming {
    color: #006699 !important;
    text-shadow: 0 0 5px rgba(0, 102, 153, 0.5) !important;
}

.castle-siege-status-ended {
    color: #993333 !important;
    text-shadow: 0 0 5px rgba(153, 51, 51, 0.5) !important;
}

/* Animações sutis para elementos interativos */
@keyframes pulse {
    0% { box-shadow: 0 0 5px rgba(0, 102, 68, 0.5); }
    50% { box-shadow: 0 0 15px rgba(0, 102, 68, 0.7); }
    100% { box-shadow: 0 0 5px rgba(0, 102, 68, 0.5); }
}

.btn-primary:hover, .panel-title, .page-title {
    animation: pulse 2s infinite !important;
}

/* Scrollbar personalizada */
::-webkit-scrollbar {
    width: 10px !important;
    background-color: #111111 !important;
}

::-webkit-scrollbar-thumb {
    background-color: #333333 !important;
    border-radius: 5px !important;
    border: 1px solid #006644 !important;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #444444 !important;
}

/* Efeito de névoa para o fundo */
body::before {
    content: "" !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: radial-gradient(circle at center, transparent, rgba(0, 0, 0, 0.7)) !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

/* Efeito de brilho para elementos importantes */
.btn-primary, .panel-title, .page-title, a:hover {
    position: relative !important;
}

.btn-primary::after, .panel-title::after, .page-title::after, a:hover::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(to right, transparent, rgba(0, 102, 68, 0.2), transparent) !important;
    transform: translateX(-100%) !important;
    animation: shine 3s infinite !important;
    pointer-events: none !important;
}

@keyframes shine {
    0% { transform: translateX(-100%); }
    20% { transform: translateX(100%); }
    100% { transform: translateX(100%); }
}

/* Efeito de partículas flutuantes para o fundo */
body::after {
    content: "" !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(0, 102, 68, 0.05) 0%, transparent 8%),
        radial-gradient(circle at 75% 65%, rgba(0, 102, 68, 0.05) 0%, transparent 8%),
        radial-gradient(circle at 40% 80%, rgba(0, 102, 68, 0.05) 0%, transparent 8%),
        radial-gradient(circle at 80% 15%, rgba(0, 102, 68, 0.05) 0%, transparent 8%) !important;
    background-size: 200% 200% !important;
    animation: floatingParticles 20s ease infinite !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

@keyframes floatingParticles {
    0% { background-position: 0% 0%; }
    25% { background-position: 100% 25%; }
    50% { background-position: 50% 100%; }
    75% { background-position: 0% 75%; }
    100% { background-position: 0% 0%; }
}

/* Ajustes para elementos específicos do WebEngine */
.online-status-indicator {
    filter: hue-rotate(120deg) brightness(0.8) !important;
}

.webengine-powered {
    color: #555555 !important;
}

.webengine-powered:active, .webengine-powered:hover {
    color: #00a86b !important;
}

/* Ajustes para tabelas de rankings e filtros */
.rankings_menu a {
    background: rgba(20, 20, 20, 0.7) !important;
    color: #555555 !important;
}

.rankings_menu a.active {
    color: #777777 !important;
    border-color: #006644 !important;
    background-color: rgba(0, 102, 68, 0.3) !important;
}

.rankings_menu a:hover {
    background-color: rgba(0, 102, 68, 0.2) !important;
    color: #888888 !important;
}

.rankings-class-filter {
    background: rgba(15, 15, 15, 0.7) !important;
    border: 1px solid rgba(0, 102, 68, 0.2) !important;
}

.rankings-class-filter-selection {
    color: #666666 !important;
}

.rankings-class-filter-selection:hover {
    color: #888888 !important;
}

/* Ajustes para formulários e elementos interativos */
.form-control::placeholder {
    color: #444444 !important;
}

select option {
    background-color: #111111 !important;
    color: #666666 !important;
}

/* Ajustes para alertas e mensagens */
.alert-success {
    background-color: rgba(0, 102, 68, 0.2) !important;
    border-color: rgba(0, 102, 68, 0.3) !important;
    color: #00a86b !important;
}

.alert-danger {
    background-color: rgba(153, 51, 51, 0.2) !important;
    border-color: rgba(153, 51, 51, 0.3) !important;
    color: #993333 !important;
}

.alert-info {
    background-color: rgba(0, 102, 153, 0.2) !important;
    border-color: rgba(0, 102, 153, 0.3) !important;
    color: #006699 !important;
}

/* Ajustes finais para garantir que nenhum elemento branco apareça */
.text-white, .text-light {
    color: #888888 !important;
}

img {
    filter: brightness(0.9) !important;
}

/* Efeito de vinheta para aumentar a atmosfera sombria */
body::before {
    content: "" !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    box-shadow: inset 0 0 200px rgba(0, 0, 0, 0.9) !important;
    pointer-events: none !important;
    z-index: 9999 !important;
}