/* ============================================= */
/* FICHEIRO PRINCIPAL DE COMPONENTES    */
/* ============================================= */

/* 1. Importa os ficheiros de estilos específicos */
@import url('rankings.css');
@import url('news.css');
@import url('comments.css');
@import url('tags.css'); 
@import url('related-news.css');
@import url('archive.css');
@import url('photo-gallery.css');
@import url('post.css');
@import url('modal.css');
@import url('poll.css');
@import url('summary.css');

/* ============================================= */
/* ESTILOS DE COMPONENTES GERAIS        */
/* ============================================= */

/* --- TÍTULOS GERAIS --- */
h1 {
    text-align: center;
    color: var(--text-primary);
    margin-bottom: 20px;
    font-weight: 700;
}
h2 {
    color: var(--text-primary);
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 20px;
    margin-top: 0;
    font-size: 1.25em;
}

/* --- CLASSES DE TEXTO UTILITÁRIAS --- */
.danger-text { color: var(--danger-color); }
.success-text { color: var(--success-color); }

/* --- COMPONENTES DE FORMULÁRIO (GERAL) --- */
#search-form { display: flex; gap: 10px; }
.autocomplete-wrapper { position: relative; flex-grow: 1; }

#character-name {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-color: var(--card-bg-color);
    color: var(--text-primary);
    font-size: 0.9em; /* Ajuste de tamanho geral */
    padding-right: 35px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
#character-name:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
}

#search-form button {
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    background-color: #7c1c1c;
    color: white;
    font-weight: 900;
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    flex-shrink: 0;
    position: relative;
    min-width: 95px;
    transition: all 0.2s ease-out; /* Transição mais suave */
}

#search-form button:hover:not(:disabled) { 
    background: linear-gradient(180deg, #b33a3a, #a12b2b);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Sombra para profundidade */
    color: white !important;
}

#search-form button:disabled { opacity: 0.7; cursor: not-allowed; }

.clear-input {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--text-secondary);
    display: none;
    font-size: 1.4rem;
    line-height: 1;
    transition: color 0.2s ease;
}
.clear-input:hover { color: var(--text-primary); }


/* --- AUTOCOMPLETE E BUSCAS RECENTES --- */
.autocomplete-items {
    position: absolute;
    border: none;
    border-top: none;
    z-index: 99;
    top: 100%; left: 0; right: 0;
    max-height: 200px;
    overflow-y: auto;
    background-color: var(--card-bg-color);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.autocomplete-items div { padding: 10px; cursor: pointer; border-bottom: 1px solid var(--border-color); transition: background-color 0.2s ease; }
.autocomplete-items div:last-child { border-bottom: none; }
.autocomplete-items div:hover { background-color: var(--accent-color); color: white; }
.autocomplete-active { background-color: var(--accent-color) !important; color: #ffffff; }

.recent-searches { margin-bottom: 20px; text-align: center; }
.recent-searches span { color: var(--text-secondary); font-size: 0.7em; margin-right: 10px; }
.recent-search-link { display: inline-block; background-color: var(--card-bg-color); color: var(--text-secondary); padding: 4px 10px; border-radius: 12px; font-size: 0.6em; margin: 2px; border: 1px solid var(--border-color); text-decoration: none; transition: all 0.2s ease; }
.recent-search-link:hover { background-color: var(--accent-color); color: var(--card-bg-color); border-color: var(--accent-hover-color); }


/* --- ABAS DE NAVEGAÇÃO --- */
#tabs-nav { display: flex; border-bottom: 1px solid var(--border-color); margin-bottom: 20px; flex-wrap: wrap; }
.tab-button { padding: 12px 20px; cursor: pointer; background: none; border: none; color: var(--text-secondary); font-size: 0.80em; font-weight: 500; border-bottom: 3px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; margin-bottom: -1px; }
.tab-button:hover { color: var(--text-primary); }
.tab-button.active { color: var(--accent-color); border-bottom-color: var(--accent-color); }
.tab-content { display: none; animation: fadeInUp 0.5s ease-out forwards; }
.tab-content.active { display: block; }

/* --- CARD GENÉRICO E SEÇÃO DE CONTEÚDO --- */
.content-section {
    background-color: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
}
.content-section:last-child { margin-bottom: 0; }
.info-card {
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* --- TABELAS --- */
table { width: 100%; border-collapse: collapse; margin-top: 15px; }
th, td { border: none; border-bottom: 1px solid var(--border-color); padding: 12px; text-align: left; font-size: 0.9em; }
th { background-color: #ffffff; color: var(--text-primary); font-weight: 500; border-bottom: 2px solid var(--border-color); }
tr:last-child td { border-bottom: none; }
tbody tr:nth-child(even):not(.owned-achievement) { background-color: #f8f9fa; }
tbody tr { transition: background-color 0.2s ease; }
tr:hover:not(.owned-achievement) { background-color: #f1f3f5 !important; }


/* --- BARRAS DE PROGRESSO --- */
.progress-bar-container { background-color: #e9ecef; border-radius: 8px; height: 24px; width: 100%; margin-top: 5px; position: relative; overflow: hidden; border: 1px solid var(--border-color); }
.progress-bar-fill { background-color: var(--success-color); height: 100%; width: 0%; border-radius: 8px; transition: width 0.5s ease-in-out; }
.progress-bar-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--text-primary); font-size: 0.8em; font-weight: bold; }

/* --- ANIMAÇÕES E LOADERS --- */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }

.spinner {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #ffffff;
    animation: spin 1s linear infinite;
}

#search-form button.loading .spinner,
#compare-button.loading .spinner,
#login-form button.loading .spinner,
#comment-form button.loading .spinner,
#photo-comment-form button.loading .spinner,
#save-bio-btn.loading .spinner,
#save-photo-btn.loading .spinner {
    display: block;
}

#search-form button.loading .button-text,
#compare-button.loading .button-text,
#login-form button.loading .button-text,
#comment-form button.loading .button-text,
#photo-comment-form button.loading .button-text,
#save-bio-btn.loading .button-text,
#save-photo-btn.loading .button-text {
    visibility: hidden;
}


/* --- ESTILOS PARA O WIDGET DE BUSCA NA SIDEBAR --- */
#search-widget #search-form { gap: 5px; }
#search-widget #search-button { min-width: 42px; width: 42px; padding: 10px; font-size: 1em; }
#search-widget #character-name { padding: 10px; font-size: 0.7em; }
#search-widget #recent-searches-container { margin-top: 15px; }
#search-widget .recent-searches { text-align: left; }
#search-widget .recent-searches span { display: block; margin-bottom: 8px; font-weight: 500; font-size: 0.8em; }
#search-widget .recent-search-link { font-size: 0.6em; padding: 3px 8px; }


/* --- SELECT BOX PERSONALIZADO --- */
.custom-select-wrapper { position: relative; display: inline-block; width: auto; }
.custom-select-wrapper select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #f4f7f9; border: 1px solid var(--border-color); border-radius: 8px; padding: 10px 35px 10px 15px; font-size: 0.9em; color: var(--text-primary); cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.custom-select-wrapper select:focus { outline: none; border-color: var(--accent-color); box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2); }
.custom-select-wrapper::after { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; top: 50%; right: 15px; transform: translateY(-50%); color: var(--text-secondary); pointer-events: none; }

/* --- TABELAS ORDENÁVEIS --- */
table th.sortable { cursor: pointer; position: relative; user-select: none; transition: color 0.2s ease; }
table th.sortable:hover { color: var(--accent-color); }
table th.sortable::after { content: '\f0dc'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); opacity: 0.3; font-size: 0.9em; }
table th.sortable.sorted-asc::after { content: '\f0de'; opacity: 1; color: var(--accent-color); }
table th.sortable.sorted-desc::after { content: '\f0dd'; opacity: 1; color: var(--accent-color); }

/* --- LINKS EM TABELAS E WIDGETS --- */
table td[data-label="Nome"] a, table td[data-label="Boss Boostado"] a, table td[data-label="Criatura Boostada"] a, #summary-widget a {
    font-weight: 500;
    color: var(--accent-color);
    text-decoration: none;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}
table td[data-label="Nome"] a:hover, table td[data-label="Boss Boostado"] a:hover, table td[data-label="Criatura Boostada"] a:hover, #summary-widget a:hover {
    color: var(--accent-hover-color);
    text-decoration: underline;
}

/* --- WIDGET DE BOOSTS --- */
#boost-widget #boost-content { display: flex; flex-direction: column; gap: 10px; padding-bottom: 10px; }
.boost-item { display: flex; align-items: center; gap: 12px; background-color: #f8f9fa; border-radius: 8px; padding: 10px; border: 1px solid var(--border-color); }
.boost-sprite { width: 64px; height: 64px; flex-shrink: 0; }
.boost-info { display: flex; flex-direction: column; align-items: flex-end; width: 100%; }
.boost-info span { font-size: 0.7em; color: var(--text-secondary); }
.boost-info a { font-weight: 500; color: var(--accent-color); text-decoration: none; transition: color 0.2s ease; font-size: 0.75em; }
.boost-info a:hover { color: var(--accent-hover-color); text-decoration: underline; }
.boost-item-skeleton { display: flex; align-items: center; gap: 12px; }
.skeleton-sprite { width: 64px; height: 64px; border-radius: 4px; }
.skeleton-text { width: 100px; height: 2em; border-radius: 4px; }

/* --- TÍTULOS DE CARDS E SEÇÕES --- */
.content-section > h2,
.info-card > h3 {
    background-color: transparent;
    margin: 0 0 20px 0;
    padding: 0;
    color: var(--text-primary);
    font-size: 1.1em;
    font-weight: 600;
    border-left: 5px solid var(--title-accent-border);
    padding-left: 15px;
    border-bottom: none;
    border-radius: 0;
}


/* --- ESTILOS PARA EDIÇÃO DE COMENTÁRIOS --- */
.edit-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.8em;
    cursor: pointer;
    transition: color 0.2s ease;
    margin-left: 10px;
}
.edit-btn:hover {
    color: var(--accent-color);
}

.edit-area {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.edit-area textarea {
    width: 100%;
    min-height: 80px;
    resize: vertical;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-family: 'Inter', sans-serif;
}

.edit-actions {
    display: flex;
    gap: 5px;
    justify-content: flex-end;
}

.edit-actions button {
    padding: 6px 12px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 500;
}

.save-edit-btn {
    background-color: var(--success-color);
    color: white;
}
.cancel-edit-btn {
    background-color: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

/* --- ESTILOS PARA O SELETOR DE DATA --- */
.custom-date-input {
    background-color: #f4f7f9;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 15px;
    font-size: 0.9em;
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: 'Inter', sans-serif;
}

.custom-date-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
}

.custom-date-input::-webkit-calendar-picker-indicator {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 24 24"><path fill="%235a6a7a" d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/></svg>');
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.custom-date-input::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* --- RESPONSIVIDADE PARA TABELAS --- */
@media (max-width: 768px) {
    table thead { display: none; }
    table tr { display: block; border: 1px solid var(--border-color); border-radius: 8px; margin-bottom: 1rem; padding: 10px; background-color: var(--card-bg-color) !important; }
    table tr:hover { background-color: var(--card-bg-color) !important; }
    table td { display: block; text-align: right; font-size: 0.9em; padding-left: 50%; position: relative; border-bottom: 1px solid var(--border-color); }
    table td:last-child { border-bottom: none; }
    table td::before { content: attr(data-label); position: absolute; left: 10px; width: 45%; padding-right: 10px; white-space: nowrap; text-align: left; font-weight: 500; color: var(--text-primary); }
}

/* --- Estilos para o Pódio nas Abas de Ranking --- */

.tab-content .podium-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 20px;
    margin-bottom: 30px;
}

/* Responsividade para o Pódio em telas menores */
@media (max-width: 768px) {
    .tab-content .podium-container {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
}

.comparison-outfits {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.outfit-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.outfit-display img {
    width: 96px;
    height: 96px;
    transform: scale(1.5);
}

.outfit-display .character-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1.1em;
    margin-top: 15px;
}

.versus-image {
    width: 80px;
    height: auto;
}

/* --- SERVER SELECTION --- */
.server-selection {
    display: flex;
    gap: 15px;
    margin-top: 10px;
    justify-content: center;
}

.server-selection label {
    font-size: 0.8em;
    font-weight: 500;
    cursor: pointer;
}

/* --- NOVA ANIMAÇÃO DE CARREGAMENTO MÁGICO --- */
@keyframes shimmer {
    0% {
        background-position: -800px 0;
    }
    100% {
        background-position: 800px 0;
    }
}

.skeleton-cell, .skeleton-sprite, .skeleton-text, .skeleton-item {
    animation: shimmer 1.8s infinite linear;
    background: linear-gradient(to right, 
        var(--card-bg-color) 8%, 
        #a12b2b28 28%,
        var(--card-bg-color) 43%);
    background-size: 800px 104px;
}

/* --- TOOLTIPS TEMÁTICOS --- */
.tooltip-trigger {
    position: relative;
    display: inline-block;
}

.tooltip-text {
    visibility: hidden;
    width: 200px;
    background-color: var(--menu-bg);
    color: var(--menu-text);
    text-align: center;
    border-radius: 6px;
    padding: 8px;
    position: absolute;
    z-index: 10;
    bottom: 125%;
    left: 50%;
    margin-left: -100px;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    transform: translateY(10px);
    font-size: 0.8em;
    border: 1px solid var(--menu-border);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.tooltip-trigger:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

/* Seta do tooltip */
.tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--menu-bg) transparent transparent transparent;
}

/* --- ESTILO PARA ESTADOS VAZIOS (SEM NOTÍCIAS, SEM FOTOS) --- */
.empty-state-card {
    background-color: var(--card-bg-color);
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    padding: 40px 20px;
    margin-top: 20px;
    text-align: center;
    box-shadow: none;
    animation: fadeInUp 0.5s ease-out;
}

.empty-state-card .empty-state-icon {
    font-size: 3.5em;
    color: var(--text-secondary);
    margin-bottom: 20px;
    opacity: 0.5;
}

.empty-state-card .empty-state-title {
    font-family: 'Alegreya SC', serif;
    font-size: 1.8em;
    color: var(--text-primary);
    margin: 0 0 10px 0;
}

.empty-state-card .empty-state-message {
    font-size: 1.1em;
    color: var(--text-secondary);
    margin: 0;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

#photo-gallery-widget .content-section,
#boost-widget .info-card {
    min-height: 250px; 
}

#photo-gallery-widget, #boost-widget {
    min-height: 250px; 
}

button .fas,
a .fas {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

button .fab,
a .fab {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
}

button .far,
a .far {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 400 !important;
}

.dark-theme tr:hover:not(.owned-achievement) {
    background-color: #21262d !important;
}