/**
 * Panel Component CSS
 * Sistema de painéis reutilizáveis
 */

/* ===========================================
   BASE PANEL STYLES
   =========================================== */
.bt-panel {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 20px auto;
    box-sizing: border-box;
}

.bt-panel__inner {
    position: relative;
    width: 100%;
    min-height: 100px;
}

.bt-panel__content {
    position: relative;
    z-index: 1;
}

.bt-panel__title {
    margin: 0 0 20px 0;
    padding-bottom: 15px;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

/* ===========================================
   PARCHMENT VARIANT (DEFAULT)
   Imagem completa de fundo, conteúdo scrollável
   =========================================== */
.bt-panel--default {
    position: relative;
    max-width: 1000px;
    margin: 20px auto;
    /* Imagem completa do pergaminho como fundo */
    background: url('../img/panel-sheet.png') no-repeat center center;
    background-size: 100% 100%;
    /* Altura fixa para o pergaminho */
    min-height: 900px;
}

/* INNER - Área de conteúdo scrollável */
.bt-panel--default .bt-panel__inner {
    position: absolute;
    max-width: 900px;
    /* Posição dentro do pergaminho */
    top: 60px;       /* Distância do topo do pergaminho */
    left: 55px;      /* Distância da esquerda */
    right: 50px;     /* Distância da direita */
    bottom: 70px;    /* Distância do fundo */
    /* Padding interno para o texto */
    padding: 20px 10px;
    /* Scroll */
    overflow-y: auto;
    /* TESTE: Borda vermelha para visualizar a área de conteúdo */
    /* border: 3px solid red;
}

/* Estiliza a scrollbar - VERMELHO para teste de posição */
.bt-panel--default .bt-panel__inner::-webkit-scrollbar {
    width: 18px;
}

.bt-panel--default .bt-panel__inner::-webkit-scrollbar-track {
    background: #8B0000;
    border-radius: 10px;
    /* Margem maior no topo para alinhar com área visível do pergaminho */
    margin: 120px 0 80px 0;
    border: 2px solid #FF0000;
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
}

.bt-panel--default .bt-panel__inner::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #FF4444 0%, #CC0000 30%, #990000 70%, #660000 100%);
    border-radius: 10px;
    border: 3px solid #8B0000;
    box-shadow:
        inset 0 2px 4px rgba(255, 100, 100, 0.4),
        inset 0 -2px 4px rgba(0, 0, 0, 0.4),
        0 0 6px rgba(0, 0, 0, 0.5);
    min-height: 60px;
}

.bt-panel--default .bt-panel__inner::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #FF6666 0%, #EE0000 30%, #BB0000 70%, #880000 100%);
    box-shadow:
        inset 0 2px 6px rgba(255, 150, 150, 0.6),
        inset 0 -2px 4px rgba(0, 0, 0, 0.4),
        0 0 10px rgba(255, 0, 0, 0.5);
}

/* Firefox scrollbar */
.bt-panel--default .bt-panel__inner {
    scrollbar-width: thick;
    scrollbar-color: #CC0000 #8B0000;
}

/* TOP e BOTTOM não são mais necessários - esconde */
.bt-panel--default .bt-panel__top,
.bt-panel--default .bt-panel__bottom {
    display: none;
}

/* Cores do texto no pergaminho */
.bt-panel--default,
.bt-panel--default p,
.bt-panel--default span,
.bt-panel--default div,
.bt-panel--default li {
    color: #3d2b1f;
    font-family: 'Georgia', 'Times New Roman', serif;
}

.bt-panel--default .bt-panel__title {
    color: #4a3728;
    border-bottom: 1px solid rgba(74, 55, 40, 0.3);
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
}

/* Links no pergaminho */
.bt-panel--default a {
    color: #6b4423;
    text-decoration: underline;
}

.bt-panel--default a:hover {
    color: #8b5a2b;
}

/* Headings */
.bt-panel--default h1,
.bt-panel--default h2,
.bt-panel--default h3,
.bt-panel--default h4,
.bt-panel--default h5,
.bt-panel--default h6 {
    color: #4a3728;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
}

/* Tabelas dentro do pergaminho */
.bt-panel--default table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
}

.bt-panel--default table td,
.bt-panel--default table th {
    background: transparent;
    border: none;
    padding: 10px 5px;
    color: #3d2b1f;
    border-bottom: 1px solid rgba(74, 55, 40, 0.15);
}

.bt-panel--default table th {
    font-weight: bold;
    color: #4a3728;
    border-bottom: 2px solid rgba(74, 55, 40, 0.3);
}

.bt-panel--default table tr:last-child td {
    border-bottom: none;
}

/* Imagens dentro do conteúdo (não as estruturais top/bottom) */
.bt-panel--default .bt-panel__content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2);
}

/* ===========================================
   DARK VARIANT
   Estilo escuro semi-transparente
   =========================================== */
.bt-panel--dark {
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.bt-panel--dark .bt-panel__inner {
    padding: 30px 40px;
}

.bt-panel--dark,
.bt-panel--dark p,
.bt-panel--dark span,
.bt-panel--dark div,
.bt-panel--dark li {
    color: #e0e0e0;
    font-family: 'Segoe UI', Arial, sans-serif;
}

.bt-panel--dark .bt-panel__title {
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    text-shadow: none;
}

.bt-panel--dark a {
    color: #ffd700;
    text-decoration: none;
}

.bt-panel--dark a:hover {
    color: #fff;
    text-decoration: underline;
}

.bt-panel--dark h1,
.bt-panel--dark h2,
.bt-panel--dark h3,
.bt-panel--dark h4,
.bt-panel--dark h5,
.bt-panel--dark h6 {
    color: #ffffff;
}

/* Tabelas no tema escuro */
.bt-panel--dark table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
}

.bt-panel--dark table td,
.bt-panel--dark table th {
    background: transparent;
    border: none;
    padding: 10px 5px;
    color: #e0e0e0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.bt-panel--dark table th {
    font-weight: bold;
    color: #ffffff;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

/* ===========================================
   TABLE VARIANT
   Otimizado para tabelas (menos padding)
   =========================================== */
.bt-panel--table .bt-panel__inner {
    padding: 40px 30px 60px 30px;
}

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width: 768px) {
    .bt-panel {
        margin: 10px auto;
    }

    .bt-panel--default .bt-panel__inner {
        left: 30px;
        right: 25px;
        padding: 15px 5px 30px 5px;
    }

    .bt-panel--dark .bt-panel__inner {
        padding: 15px 10px;
    }

    .bt-panel__title {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .bt-panel--default .bt-panel__inner {
        left: 20px;
        right: 15px;
        padding: 10px 5px 25px 5px;
    }
}

/* ===========================================
   NEWS SPECIFIC STYLES
   =========================================== */
.news-header {
    font-size: 13px;
    color: #6b5a4a;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(74, 55, 40, 0.2);
}

.news-title {
    margin: 0 0 15px 0;
    font-size: 18px;
    font-weight: bold;
    color: #4a3728;
}

.news-content {
    line-height: 1.7;
}

.news-content p {
    margin: 0 0 15px 0;
}

.news-pagination {
    text-align: center;
    margin: 20px 0;
}

.news-pagination select {
    padding: 8px 15px;
    font-size: 14px;
    border: 1px solid rgba(74, 55, 40, 0.3);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.8);
    color: #4a3728;
    cursor: pointer;
}

/* ===========================================
   CHANGELOG TABLE
   =========================================== */
.bt-changelog-table {
    width: 100%;
    border-collapse: collapse;
}

.bt-changelog-table td {
    padding: 8px 5px;
    border-bottom: 1px solid rgba(74, 55, 40, 0.15);
    vertical-align: top;
}