/* ============================================
   GLOBAL HARMONY FIX - PRISTINE WORLD
   Padronização completa de todas as páginas
   ============================================ */

/* === CORES MEDIEVAIS HARMONIOSAS === */
:root {
    --medieval-brown: #8b6914;
    --medieval-gold: #c9b037;
    --medieval-dark: #1a1612;
    --medieval-light: #f4f0e8;
    --medieval-bg: #1a1a1a;
    --medieval-content: #2a2a2a;
    --medieval-border: #8b6914;
    --medieval-text: #e6d3a3;
    --medieval-white: #f5f5f5;
    --medieval-accent: #8b6914;
}

/* === RESET E BASE === */
* {
    box-sizing: border-box !important;
}

/* === BACKGROUNDS GLOBAIS === */
body {
    background: var(--medieval-bg) !important;
    color: var(--medieval-text) !important;
    font-family: 'Cinzel', 'Medieval Sharp', serif !important;
}

/* Forçar todos os containers principais */
.content,
.wiki-container,
.admin-container,
.dashboard-container,
.form-container,
.bazaar-container,
div[style*="background"],
.table-container {
    background: var(--medieval-content) !important;
    color: var(--medieval-text) !important;
    border: 2px solid var(--medieval-border) !important;
    border-radius: 8px !important;
    padding: 15px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
}

/* === TABELAS UNIVERSAIS === */
table,
.table,
.wiki-table,
.admin-table,
.bazaar-table,
.history-table,
table[border],
table[cellpadding],
table[cellspacing] {
    width: 100% !important;
    border-collapse: collapse !important;
    background: var(--medieval-content) !important;
    border: 2px solid var(--medieval-border) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    margin: 10px 0 !important;
    font-size: 13px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}

/* Headers de tabela */
table th,
.table th,
.wiki-table th,
.admin-table th,
.bazaar-table th,
.history-table th,
table thead tr td {
    background: linear-gradient(135deg, #5a5a5a, #4a4a4a) !important;
    color: var(--medieval-gold) !important;
    padding: 12px 8px !important;
    text-align: center !important;
    font-weight: bold !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-bottom: 1px solid var(--medieval-border) !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3) !important;
}

/* Células de tabela */
table td,
.table td,
.wiki-table td,
.admin-table td,
.bazaar-table td,
.history-table td {
    padding: 10px 8px !important;
    border-bottom: 1px solid rgba(139, 105, 20, 0.2) !important;
    background: rgba(42, 42, 42, 0.95) !important;
    color: var(--medieval-text) !important;
    text-align: center !important;
    font-size: 12px !important;
    vertical-align: middle !important;
}

/* Alternating rows */
table tr:nth-child(even) td,
.table tr:nth-child(even) td {
    background: rgba(60, 60, 60, 0.8) !important;
}

table tr:hover td,
.table tr:hover td {
    background: rgba(201, 176, 55, 0.15) !important;
    transform: scale(1.005) !important;
    transition: all 0.2s ease !important;
}

/* === FORMS E INPUTS === */
input,
select,
textarea,
button {
    background: var(--medieval-content) !important;
    color: var(--medieval-text) !important;
    border: 1px solid var(--medieval-border) !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    font-family: inherit !important;
}

button,
input[type="submit"],
.btn,
.button-link {
    background: linear-gradient(135deg, #5a5a5a, #4a4a4a) !important;
    color: var(--medieval-gold) !important;
    border: 1px solid var(--medieval-border) !important;
    padding: 8px 16px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
}

button:hover,
input[type="submit"]:hover,
.btn:hover,
.button-link:hover {
    background: linear-gradient(135deg, #6a6a6a, #5a5a5a) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}

/* === LINKS === */
a {
    color: var(--medieval-gold) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

a:hover {
    color: #ffd700 !important;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5) !important;
}

/* === OTIMIZAÇÃO DOS MENUS - ESPAÇAMENTOS REDUZIDOS === */
.sidebar-menu,
#menu,
.menu,
nav {
    padding: 5px 3px !important;
    margin: 2px 0 !important;
}

.sidebar-menu li,
#menu li,
.menu li,
nav li {
    margin: 1px 0 !important;
    padding: 3px 5px !important;
    line-height: 1.1 !important;
}

.sidebar-menu a,
#menu a,
.menu a,
nav a {
    padding: 4px 6px !important;
    display: block !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

/* Reduzir espaçamento específico dos títulos dos menus */
.sidebar-menu h3,
#menu h3,
.menu h3,
.left_box h3,
.right_box h3 {
    margin: 5px 0 3px 0 !important;
    padding: 3px 5px !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
}

/* Reduzir altura dos boxes laterais */
.left_box,
.right_box {
    margin-bottom: 8px !important;
}

.left_box .boxcontent,
.right_box .boxcontent {
    padding: 5px 8px !important;
}

/* === CORREÇÕES ESPECÍFICAS POR PÁGINA === */

/* Highscores */
.highscores-container table,
div[style*="highscores"] table {
    font-size: 11px !important;
}

.highscores-container td,
div[style*="highscores"] td {
    padding: 6px 4px !important;
}

/* Characters */
.character-info table,
.player-details table {
    max-width: 800px !important;
    margin: 0 auto !important;
}

/* Bosses, Elites, etc */
.wiki-container table,
.boss-table,
.elite-table {
    font-size: 11px !important;
}

.wiki-container td,
.boss-table td,
.elite-table td {
    padding: 8px 4px !important;
    word-wrap: break-word !important;
}

/* Streamers Dashboard */
.dashboard-container table {
    margin: 10px 0 !important;
}

.dashboard-container th,
.dashboard-container td {
    padding: 8px 6px !important;
    font-size: 11px !important;
}

/* === MOBILE RESPONSIVO - CORREÇÕES AGRESSIVAS === */
@media screen and (max-width: 768px) {
    
    /* Reset completo para mobile */
    * {
        box-sizing: border-box !important;
    }
    
    /* Containers principais */
    .content,
    .wiki-container,
    .admin-container,
    .dashboard-container,
    .form-container,
    .bazaar-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 5px auto !important;
        padding: 8px !important;
        border-radius: 4px !important;
        overflow-x: hidden !important;
    }
    
    /* Força layout mobile para containers problemáticos */
    div[style*="display: flex"],
    div[style*="gap:"] {
        display: block !important;
        gap: 0 !important;
    }
    
    /* Força width 100% em elementos com width fixo */
    div[style*="width:"],
    table[style*="width:"] {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Tabelas mobile - scrollable e compactas */
    table,
    .table,
    .wiki-table,
    .admin-table,
    .bazaar-table {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        border: 1px solid var(--medieval-border) !important;
        border-radius: 4px !important;
        margin: 8px 0 !important;
        font-size: 9px !important;
        -webkit-overflow-scrolling: touch !important;
        box-shadow: none !important;
    }
    
    /* Força todas as tabelas a serem responsivas */
    table[cellpadding],
    table[cellspacing],
    table[border] {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        font-size: 8px !important;
    }
    
    /* Headers mobile */
    table thead,
    .table thead {
        display: block !important;
        width: 100% !important;
    }
    
    table thead tr,
    .table thead tr {
        display: block !important;
        width: 100% !important;
    }
    
    table th,
    .table th {
        display: inline-block !important;
        padding: 5px 3px !important;
        font-size: 8px !important;
        min-width: 60px !important;
        max-width: 100px !important;
        vertical-align: top !important;
        text-overflow: ellipsis !important;
        overflow: hidden !important;
        white-space: normal !important;
        word-wrap: break-word !important;
    }
    
    /* Body mobile */
    table tbody,
    .table tbody {
        display: block !important;
        width: 100% !important;
        max-height: 400px !important;
        overflow-y: auto !important;
    }
    
    table tbody tr,
    .table tbody tr {
        display: block !important;
        width: 100% !important;
        border-bottom: 1px solid rgba(139, 69, 19, 0.3) !important;
    }
    
    table td,
    .table td {
        display: inline-block !important;
        padding: 4px 3px !important;
        font-size: 8px !important;
        min-width: 60px !important;
        max-width: 100px !important;
        vertical-align: top !important;
        text-overflow: ellipsis !important;
        overflow: hidden !important;
        word-wrap: break-word !important;
        line-height: 1.1 !important;
        white-space: normal !important;
    }
    
    /* Imagens mobile */
    table img,
    .table img {
        max-width: 24px !important;
        max-height: 24px !important;
        object-fit: contain !important;
    }
    
    /* Forms mobile */
    input,
    select,
    textarea {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 12px !important;
        padding: 8px !important;
        margin: 5px 0 !important;
    }
    
    /* Buttons mobile */
    button,
    .btn,
    .button-link {
        width: 100% !important;
        max-width: 200px !important;
        margin: 5px auto !important;
        display: block !important;
        font-size: 11px !important;
        padding: 10px !important;
    }
    
    /* Menu mobile */
    .sidebar-menu,
    #menu,
    .menu {
        width: 100% !important;
        padding: 5px !important;
    }
    
    .sidebar-menu li,
    #menu li,
    .menu li {
        margin: 2px 0 !important;
        padding: 4px 6px !important;
    }
    
    .sidebar-menu a,
    #menu a,
    .menu a {
        font-size: 11px !important;
        padding: 6px 8px !important;
    }
    
    /* Específico para diferentes tipos de tabela */
    
    /* Highscores mobile */
    .highscores-container table th,
    .highscores-container table td {
        min-width: 60px !important;
        font-size: 8px !important;
        padding: 4px 2px !important;
    }
    
    /* Character info mobile */
    .character-info table,
    .player-details table {
        display: table !important;
        width: 100% !important;
    }
    
    .character-info table th,
    .character-info table td,
    .player-details table th,
    .player-details table td {
        display: table-cell !important;
        width: 50% !important;
        padding: 8px 4px !important;
        font-size: 10px !important;
    }
    
    /* Wiki containers mobile */
    .wiki-container {
        padding: 8px !important;
    }
    
    .wiki-container table th,
    .wiki-container table td {
        min-width: 70px !important;
        font-size: 8px !important;
        padding: 4px 2px !important;
    }
    
    /* Dashboard mobile */
    .dashboard-container {
        padding: 8px !important;
    }
    
    .dashboard-container table th,
    .dashboard-container table td {
        min-width: 60px !important;
        font-size: 8px !important;
        padding: 4px 2px !important;
    }
    
    /* Hide overflow text mobile */
    .mobile-hidden {
        display: none !important;
    }
    
    /* Scroll indicators */
    table::-webkit-scrollbar,
    .table::-webkit-scrollbar {
        height: 6px !important;
    }
    
    table::-webkit-scrollbar-track,
    .table::-webkit-scrollbar-track {
        background: var(--medieval-dark) !important;
    }
    
    table::-webkit-scrollbar-thumb,
    .table::-webkit-scrollbar-thumb {
        background: var(--medieval-gold) !important;
        border-radius: 3px !important;
    }
}

/* === MOBILE EXTREMO (< 480px) === */
@media screen and (max-width: 480px) {
    
    /* Tabelas ainda menores */
    table,
    .table,
    .wiki-table {
        font-size: 8px !important;
    }
    
    table th,
    table td,
    .table th,
    .table td {
        min-width: 50px !important;
        max-width: 80px !important;
        padding: 3px 2px !important;
        font-size: 7px !important;
    }
    
    /* Containers ainda menores */
    .content,
    .wiki-container,
    .admin-container {
        padding: 5px !important;
        margin: 2px auto !important;
    }
    
    /* Forms ainda menores */
    input,
    select,
    button {
        font-size: 10px !important;
        padding: 6px !important;
    }
}

/* === FORÇA ESPECÍFICA === */
/* Para sobrescrever estilos inline problemáticos */
*[style*="background: #f"] {
    background: var(--medieval-content) !important;
}

*[style*="background-color: #f"] {
    background-color: var(--medieval-content) !important;
}

*[style*="background: white"],
*[style*="background: #fff"],
*[style*="background-color: white"],
*[style*="background-color: #fff"] {
    background: var(--medieval-content) !important;
    background-color: var(--medieval-content) !important;
}

*[style*="color: #000"],
*[style*="color: black"] {
    color: var(--medieval-text) !important;
}

/* Força tabelas com estilos inline */
table[style*="background"],
.table[style*="background"] {
    background: var(--medieval-content) !important;
}

/* === ANIMAÇÕES SUTIS === */
table tr,
.table tr {
    transition: all 0.2s ease !important;
}

button,
.btn,
input[type="submit"] {
    transition: all 0.3s ease !important;
}

/* === FIX PARA ELEMENTOS ESPECÍFICOS === */
.offer-card,
.boss-look,
.elite-config,
.item-loot {
    background: var(--medieval-content) !important;
    border: 1px solid var(--medieval-border) !important;
    color: var(--medieval-text) !important;
}

/* Status indicators */
.status-active,
.status-available,
.city-tag {
    border: 1px solid var(--medieval-gold) !important;
    color: var(--medieval-gold) !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5) !important;
}

/* Tooltips e popups */
.tooltip,
.popup,
.modal {
    background: var(--medieval-content) !important;
    border: 2px solid var(--medieval-border) !important;
    color: var(--medieval-text) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}

/* === CORREÇÕES ESPECÍFICAS PARA PÁGINAS PROBLEMÁTICAS === */

/* Força divs com estilos inline problemáticos */
div[style*="background: #f"],
div[style*="background-color: #f"],
div[style*="padding: 15px"],
div[style*="border-radius: 8px"] {
    background: var(--medieval-content) !important;
    color: var(--medieval-text) !important;
    border: 1px solid var(--medieval-brown) !important;
}

/* Força tabelas com atributos HTML antigos */
table[bgcolor],
table[background],
table[style*="background"] {
    background: var(--medieval-content) !important;
}

/* Força células com backgrounds inline */
td[style*="background"],
th[style*="background"],
td[bgcolor],
th[bgcolor] {
    background: rgba(45, 45, 45, 0.8) !important;
    color: var(--medieval-white) !important;
}

/* Força textos com cores inline problemáticas */
span[style*="color: #"],
p[style*="color: #"],
div[style*="color: #"] {
    color: var(--medieval-text) !important;
}

/* Específico para estilos de administração */
.admin-section,
.form-section {
    background: var(--medieval-content) !important;
    border: 1px solid var(--medieval-brown) !important;
    color: var(--medieval-text) !important;
}

/* Força harmonização em listas */
ul, ol, li {
    color: var(--medieval-text) !important;
}

/* Força harmonização em parágrafos */
p {
    color: var(--medieval-text) !important;
}

/* Força harmonização em headers */
h1, h2, h3, h4, h5, h6 {
    color: var(--medieval-gold) !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3) !important;
}

/* === CORREÇÕES FINAIS MOBILE === */
@media screen and (max-width: 768px) {
    
    /* Força layout single column em mobile */
    .left_box,
    .right_box,
    .center_box {
        width: 100% !important;
        margin: 5px 0 !important;
        float: none !important;
        display: block !important;
    }
    
    /* Força imagens responsivas */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Força overflow scroll em elementos com conteúdo largo */
    .wiki-container,
    .admin-container,
    .dashboard-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}