/* Estilos específicos para o novo Dashboard */
:root {
    --primary-color: #2ecc71;
    --secondary-color: #f1c40f;
    --purple-color: #8e44ad;
    --dark-bg: #1a1620;
    --light-bg: #2c2538;
    --text-color: #ecf0f1;
    --font-title: 'Press Start 2P', cursive;
    --font-body: 'VT323', monospace;
    --pixel-size: 4px;
    --hp-color: #e74c3c;
    --xp-color: #3498db;

    /* Mapeamento para variáveis do Bootstrap para garantir consistência */
    --bs-primary: var(--primary-color);
    --bs-secondary: var(--secondary-color);
    --bs-info: #0dcaf0; /* Um tom de azul padrão para 'info' */
    --bs-warning: var(--secondary-color); /* Usando sua cor secundária para 'warning' */
    --bs-danger: var(--hp-color); /* Usando sua cor de HP para 'danger' */
    --bs-success: var(--primary-color); /* Usando sua cor primária para 'success' */
    --bs-light: var(--light-bg);
    --bs-dark: var(--dark-bg);
    --bs-body-color: var(--text-color);
    --bs-border-color: #4a425a; /* Uma cor de borda geral que combina com seus bg */
}

/* --- SOLUÇÃO PARA O SCROLL HORIZONTAL NO MOBILE --- */
html, body {
    overflow-x: hidden; /* Oculta qualquer overflow horizontal */
    width: 100%; /* Garante que ocupem 100% da largura da viewport */
    margin: 0;
    padding: 0;
}

/* Garante que imagens e elementos de mídia não ultrapassem seus contêineres */
img, video, iframe {
    max-width: 100%;
    height: auto;
    display: block; /* Remove espaços extras abaixo de imagens */
}

/* Ajustes gerais para elementos de bloco que podem causar overflow */
div, section, header, footer, main, nav, aside, article {
    box-sizing: border-box; /* Garante que padding e border sejam incluídos na largura/altura total */
}
/* --- FIM DA SOLUÇÃO PARA O SCROLL HORIZONTAL --- */


body {
    background-color: var(--dark-bg);
    color: var(--text-color);
    font-family: var(--font-body);
    font-size: 22px;
}

/* Centralização do container principal na página */
.container {
    max-width: 960px; /* Ou um valor que se ajuste ao seu layout desejado, ex: 1140px, ou remover para Bootstrap padrão */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important; /* Padrão Bootstrap para padding lateral */
    padding-right: 15px !important; /* Padrão Bootstrap para padding lateral */
    width: 100% !important; /* Garante que o container use a largura disponível */
}


/* Estilos do cabeçalho principal */
.main-header, .main-footer {
    padding: 20px 0;
    border-bottom: var(--pixel-size) solid var(--light-bg);
    text-align: center;
}
.main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    margin: 0 auto; /* Centraliza o container do cabeçalho */
    position: relative;
    z-index: 10;
}
.logo {
    font-family: var(--font-title);
    font-size: 20px;
    color: var(--secondary-color);
    text-decoration: none;
}

/* Estilos para os botões de navegação no HEADER (VISÍVEL NO DESKTOP) */
.nav-buttons {
    display: flex;
    align-items: center;
    gap: 15px; /* AUMENTADO O ESPAÇAMENTO ENTRE OS BOTÕES NO DESKTOP */
}
.nav-buttons .btn {
    margin-left: 0;
}

/* Estilos de botão base - REVERTIDOS AO SEU CÓDIGO ORIGINAL */
.btn {
    display: inline-block;
    font-family: var(--font-title);
    font-size: 12px; /* REDUZIDO O TAMANHO DA FONTE NO DESKTOP */
    text-decoration: none;
    padding: 8px 12px; /* REDUZIDO O PADDING PARA DIMINUIR O BOTÃO */
    border: none;
    cursor: pointer;
    image-rendering: pixelated;
    box-shadow: inset calc(-1*var(--pixel-size)) calc(-1*var(--pixel-size)) 0px 0px #0006, inset var(--pixel-size) var(--pixel-size) 0px 0px #fff6;
    text-align: center;
    white-space: nowrap;
    color: #000; /* Cor original do seu código que você me enviou no início da conversa */
}
.btn-green { background-color: var(--primary-color); }
.btn-gold { background-color: var(--secondary-color); }
.btn-purple { background-color: var(--purple-color); color: var(--text-color); } /* Cor original do seu código */
.btn-red { background-color: var(--hp-color); color: var(--text-color); } /* Cor original do seu código */
.btn-blue-light { background-color: #6a9cff; border: 2px solid #558bff; transition: background-color 0.2s ease, border-color 0.2s ease; }
.btn-blue-light:hover { background-color: #4a7fd6; border-color: #3f6eb5; }

/* Menu toggle button - visível apenas no mobile e funcional (globalmente) */
/* Por padrão, escondemos ele para desktop */
.menu-toggle-btn {
    display: none; /* OCULTO por padrão no DESKTOP */
    font-size: 32px;
    background: none;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    z-index: 10000;
    padding: 15px;
    box-sizing: content-box;
    pointer-events: auto;
}

.panel {
    background-color: var(--light-bg);
    padding: 20px;
    border-top: var(--pixel-size) solid #fff2;
    border-left: var(--pixel-size) solid #fff2;
    border-right: var(--pixel-size) solid #0004;
    border-bottom: var(--pixel-size) solid #0004;
}
.dashboard-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
    margin-top: 30px;
}
.sidebar .panel { margin-bottom: 20px; }
.section-title {
    font-family: var(--font-title);
    font-size: 18px;
    color: var(--secondary-color);
    margin-bottom: 15px;
    border-bottom: 2px solid #fff2;
    padding-bottom: 10px;
}
.stat-bar-container { margin-bottom: 15px; }
.stat-bar-label {
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    margin-bottom: 5px;
}
.stat-bar {
    width: 100%;
    height: 20px;
    background-color: #000;
    border: 2px solid var(--text-color);
    padding: 2px;
}
.stat-bar-inner {
    height: 100%;
    transition: width 0.5s ease;
}
.hp-bar .stat-bar-inner { background-color: var(--hp-color); }
.xp-bar .stat-bar-inner { background-color: var(--xp-color); }
.category-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    list-style: none;
    padding-left: 0;
}
.category-list .btn-red {
    font-size: 10px;
    padding: 4px 6px;
}
.form-group { margin-bottom: 15px; }

/* CORREÇÃO DA BORDA DO INPUT/SELECT (MANTIDA) */
.form-control {
    width: 100%;
    background: var(--dark-bg);
    border: 2px solid var(--text-color);
    color: var(--text-color);
    font-family: var(--font-body);
    font-size: 18px;
    padding: 6px 8px; /* Mantido o padding ajustado para corrigir a borda */
    box-sizing: border-box; /* Mantido para garantir que padding e border sejam incluídos na largura */
}

.task-category-title {
    font-family: var(--font-title);
    font-size: 20px;
    color: var(--primary-color);
    margin: 40px 0 20px 0;
}
.task-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: var(--light-bg);
    margin-bottom: 10px;
}
.task-item.completed {
    opacity: 0.5;
    text-decoration: line-through;
}
.task-title { flex-grow: 1; }
.task-actions .btn { font-size: 12px; }
.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.week-days {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.week-days input[type="checkbox"] { display: none; }
.week-days label {
    padding: 8px 12px;
    border: 2px solid var(--text-color);
    cursor: pointer;
    background-color: var(--light-bg);
    transition: background-color 0.2s;
}
.week-days input[type="checkbox"]:checked + label {
    background-color: var(--primary-color);
    color: #000;
    border-color: var(--primary-color);
}
.close-menu-btn { display: none; }

/* ESTILOS GERAIS DO SIDEBAR (PADRÃO PARA DESKTOP) */
.sidebar {
    display: block;
    position: sticky;
    top: 20px;
    left: auto;
    width: auto;
    height: auto;
    z-index: 1;
    transform: translateX(0);
    transition: none;
    overflow-y: visible;
    background-color: transparent;
    box-shadow: none;
    padding-top: 0;
    border: none;
}

/* Container para os botões de navegação DENTRO DO SIDEBAR (OCULTO NO DESKTOP) */
.sidebar .sidebar-nav-buttons {
    display: none;
    flex-direction: column;
    gap: 15px;
    padding: 20px;
    border-bottom: 2px solid #fff2;
    margin-bottom: 20px;
}
.sidebar .sidebar-nav-buttons .btn {
    width: 100%;
    padding: 12px 0;
    font-size: 16px;
    color: #000;
}
.sidebar .sidebar-nav-buttons .btn-purple {
    color: var(--text-color);
}
.sidebar .sidebar-nav-nav-buttons .btn-red {
    color: var(--text-color);
}

/* Estilos para o avatar no sidebar */
.user-avatar {
    width: 96px;
    height: 96px;
    border: 2px solid var(--primary-color);
    border-radius: 4px;
    image-rendering: pixelated;
    display: block;
    margin: 0 auto 15px auto;
    background-color: #333;
    object-fit: contain;
}
/* Centraliza o conteúdo do primeiro painel no sidebar (avatar, nome, etc.) */
.sidebar .panel:first-child {
    text-align: center;
}
.sidebar .panel:first-child h3 {
    margin-top: 10px;
}

/* --- desktop responsiveness adjusted --- */
/* Base desktop styles for larger screens */
@media(min-width: 1101px) {
    .container {
        max-width: 1200px !important; /* Increase max-width for larger desktops */
    }
    .dashboard-grid {
        grid-template-columns: 300px 1fr; /* Adjust sidebar width for larger screens */
        gap: 40px; /* Increase gap between columns */
        margin-top: 40px;
    }
}

/* Tablet and smaller desktop adjustments */
@media(min-width: 901px) and (max-width: 1100px) {
    .container {
        max-width: 960px !important; /* Keep original max-width for this range */
    }
    .dashboard-grid {
        grid-template-columns: 240px 1fr; /* Slightly reduce sidebar width */
        gap: 30px; /* Maintain original gap */
        margin-top: 30px;
    }
}


/* MEDIA QUERY PARA DISPOSITIVOS MÓVEIS (ATÉ 900px) */
@media(max-width: 900px) {
    /* Layout geral para mobile */
    .dashboard-grid {
        grid-template-columns: 1fr;
        padding-top: 10px;
    }

    /* Estilo do cabeçalho em mobile */
    .main-header .container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 15px;
        width: 100%;
        box-sizing: border-box;
        position: relative;
        z-index: 100;
        background-color: var(--dark-bg);
    }
    .logo {
        margin-bottom: 0;
        margin-left: 0;
    }

    /* Oculta os botões de navegação do HEADER PRINCIPAL no mobile (movidos para sidebar) */
    .nav-buttons {
        display: none;
    }

    /* O botão hambúrguer APARARECE no mobile (como no seu código original) */
    .menu-toggle-btn {
        display: block !important; /* AQUI: Adicionado !important para FORÇAR a exibição no mobile */
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10000 !important;
        pointer-events: auto !important;
    }

    /* ESTILOS DO SIDEBAR APENAS NO MOBILE */
    .sidebar {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 300px;
        height: 100%;
        z-index: 1001;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        overflow-y: auto;
        background-color: var(--dark-bg);
        box-shadow: 2px 0 5px rgba(0,0,0,0.5);
        padding-top: 20px;
        border: none;
    }
    /* Oculta o botão de fechar sidebar (o 'X') completamente no mobile */
    .close-menu-btn {
        display: none !important;
    }

    /* EXIBIR OS BOTÕES DE NAVEGAÇÃO DENTRO DO SIDEBAR APENAS NO MOBILE */
    .sidebar .sidebar-nav-buttons {
        display: flex;
    }

    /* A classe .open é adicionada/removida pelo JS para controlar a visibilidade do sidebar */
    .sidebar.open {
        transform: translateX(0) !important;
    }

    .form-grid { grid-template-columns: 1fr; }
}

/* ============================================== */
/* ESTILOS PARA FLASH MESSAGES                    */
/* ============================================== */
.flash-messages .alert {
    padding: 15px;
    margin-bottom: 20px;
    border: var(--pixel-size) solid #000;
    text-align: center;
    font-family: var(--font-title);
    font-size: 14px;
    color: #000;
}
.flash-messages .alert-success {
    background-color: var(--primary-color);
}
.flash-messages .alert-error {
    background-color: var(--hp-color);
    color: var(--text-color);
    text-shadow: 1px 1px 0px #0004;
}
.flash-messages .alert-levelup {
    background-color: var(--secondary-color);
    animation: flash-animation 1.5s infinite;
}
@keyframes flash-animation {
  0% { transform: scale(1); box-shadow: 0 0 10px #0000; }
  50% { transform: scale(1.05); box-shadow: 0 0 20px var(--secondary-color); }
  100% { transform: scale(1); box-shadow: 0 0 10px #0000; }
}

/* ============================================== */
/* ESTILOS PARA O CHAT GLOBAL                     */
/* ============================================== */

/* Área onde as mensagens aparecem */
#chat-box {
    background-color: var(--light-bg);
    border: 2px solid var(--text-color);
    border-radius: 4px;
    padding: 10px;
}
#chat-box div {
    margin-bottom: 8px;
    word-wrap: break-word;
}

/* Input e botão de envio dentro do chat */
#chat-form .input-group .form-control {
    background-color: var(--dark-bg);
    color: var(--text-color);
    border: 2px solid var(--text-color);
}
#chat-form .input-group .btn {
    padding: 10px 20px;
    font-size: 16px;
}

/* Responsividade para o chat */
@media(max-width: 600px) {
    #chat-box {
        height: 300px;
    }
    #chat-form .input-group .form-control {
        font-size: 16px;
    }
    #chat-form .input-group .btn {
        font-size: 16px;
    }
}

/* ================================= */
/* Painel Admin — Métricas           */
/* ================================= */
.metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}
.metric {
    background: var(--light-bg);
    border: 1px solid var(--text-color);
    padding: 20px;
    text-align: center;
}
.metric h3 {
    font-family: var(--font-title);
    margin-bottom: 10px;
}
.metric p {
    font-size: 2em;
    font-weight: bold;
}

/* --- Ranking Page Styles (ATUALIZADO E OTIMIZADO) --- */

.podium-section {
    position: relative;
    padding-top: 20px;
    /* Forçando as propriedades flexbox para centralização */
    display: flex !important;
    justify-content: center !important;
    align-items: flex-end;
    width: 100%; /* Garante que ocupe a largura total para centralização */
}

.podium-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    background: var(--light-bg);
    border: 2px solid var(--bs-border-color);
    min-height: 100px;
    transition: all 0.3s ease-in-out;
    flex-grow: 1;
    max-width: 140px;
    position: relative;
    box-sizing: border-box; /* Garante que padding e border sejam incluídos na largura/altura total */
}

.podium-first {
    height: 200px;
    order: 2; /* Garante que o 1º lugar fique no meio */
    transform: translateY(-10px);
    z-index: 10;
    border-color: var(--bs-warning); /* Borda amarela para o 1º lugar */
}

.podium-second {
    height: 160px;
    order: 1; /* 2º lugar à esquerda do 1º */
    border-color: var(--bs-info); /* Borda azul clara para o 2º lugar */
}

.podium-third {
    height: 140px;
    order: 3; /* 3º lugar à direita do 1º */
    border-color: var(--bs-danger); /* Borda vermelha para o 3º lugar */
}

.podium-item .avatar-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    top: -40px;
    background: #fff; /* Fundo branco para o círculo do avatar */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    border: 2px solid var(--bs-primary);
    box-sizing: border-box;
}

.podium-item.podium-first .avatar-circle {
    width: 100px;
    height: 100px;
    top: -50px;
}

.podium-item .avatar-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.podium-item .podium-label {
    font-size: 1.5rem;
    color: var(--bs-primary);
    margin-top: -30px;
}

.podium-item .podium-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-color);
    max-width: 90%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.podium-item .podium-score {
    font-size: 0.8rem;
    margin-top: 5px;
    padding: .3em .6em;
}

/* Responsividade para o pódio */
@media (max-width: 767.98px) {
    .podium-item {
        max-width: 100px;
        min-height: 80px;
        padding: 5px;
    }

    .podium-first {
        height: 150px;
        transform: translateY(-5px);
    }
    .podium-second {
        height: 120px;
    }
    .podium-third {
        height: 100px;
    }

    .podium-item .avatar-circle {
        width: 60px;
        height: 60px;
        top: -30px;
        padding: 3px;
    }
    .podium-item.podium-first .avatar-circle {
        width: 80px;
        height: 80px;
        top: -40px;
    }

    .podium-item .podium-label {
        font-size: 1.2rem;
        margin-top: -20px;
    }
    .podium-item .podium-name {
        font-size: 0.8rem;
    }
    .podium-item .podium-score {
        font-size: 0.7rem;
    }
}

/* Estilo para a lista de ranking */
.list-group-item {
    background: var(--light-bg);
    border-color: var(--bs-border-color);
    color: var(--text-color);
}

.list-group-item .avatar-thumbnail {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    box-shadow: 0 0 5px rgba(0,0,0,0.05);
}

.list-group-item .avatar-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
/* --- Admin Panel General Styles --- */
.admin-container {
    display: flex;
    min-height: calc(100vh - 80px); /* Altura da viewport menos a altura do footer e talvez header */
    padding-top: 20px; /* Espaçamento do topo */
    max-width: 1400px; /* Ajuste a largura máxima do container admin */
    margin: 0 auto;
    gap: 30px; /* Espaçamento entre sidebar e conteúdo principal */
}

.admin-sidebar {
    flex-shrink: 0;
    width: 280px; /* Largura padrão da sidebar do admin */
    background-color: var(--light-bg);
    padding: 20px;
    border-top: var(--pixel-size) solid #fff2;
    border-left: var(--pixel-size) solid #fff2;
    border-right: var(--pixel-size) solid #0004;
    border-bottom: var(--pixel-size) solid #0004;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.admin-nav-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espaçamento entre os botões de navegação */
    margin-bottom: 30px; /* Espaçamento abaixo dos botões */
}

.admin-nav-btn {
    width: 100%; /* Botões ocupam a largura total da sidebar */
    padding: 15px 10px;
    font-size: 16px;
    text-align: center;
    box-shadow: inset -3px -3px #0006, inset 3px 3px #fff6; /* Estilo pixelado do botão */
}

/* Cores específicas para os botões do admin nav, se necessário */
.admin-nav-btn.btn-purple { background-color: var(--purple-color); color: var(--text-color); }
.admin-nav-btn.btn-purple:hover { background-color: #9b59b6; }
.admin-nav-btn.btn-red { background-color: var(--red-color); color: var(--text-color); }
.admin-nav-btn.btn-red:hover { background-color: #c0392b; }


.admin-main-content {
    flex-grow: 1; /* Conteúdo principal ocupa o espaço restante */
    background-color: var(--light-bg);
    padding: 30px;
    border-top: var(--pixel-size) solid #fff2;
    border-left: var(--pixel-size) solid #fff2;
    border-right: var(--pixel-size) solid #0004;
    border-bottom: var(--pixel-size) solid #0004;
    box-shadow: 0 8px 16px rgba(0,0,0,0.4);
}

.admin-main-content h2 {
    font-family: var(--font-title);
    font-size: 28px;
    color: var(--secondary-color);
    margin-bottom: 30px;
    text-align: center;
    text-shadow: 3px 3px 0px #000;
}

.admin-main-content h3 {
    font-family: var(--font-title);
    font-size: 20px;
    color: var(--primary-color);
    margin-bottom: 20px;
    border-bottom: 2px solid #fff2;
    padding-bottom: 10px;
}

/* Métricas do Dashboard */
.metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Ajuste o minmax conforme preferir */
    gap: 20px;
    margin-bottom: 40px;
}
.metric {
    background-color: var(--dark-bg);
    padding: 20px;
    border: 2px solid var(--blue-light-color); /* Borda como nos stat-boxes do afiliado */
    text-align: center;
    box-shadow: inset -2px -2px #0004, inset 2px 2px #fff4;
}
.metric h3 {
    font-family: var(--font-title);
    font-size: 16px;
    color: var(--blue-light-color);
    margin-bottom: 10px;
    border-bottom: none; /* Remove a borda inferior aqui */
    padding-bottom: 0;
}
.metric p {
    font-family: var(--font-body);
    font-size: 2.2em; /* Tamanho maior para os valores */
    font-weight: bold;
    color: var(--text-color);
    margin: 0;
}

/* Títulos de seção para gráficos */
.charts-section-title {
    font-family: var(--font-title);
    font-size: 24px; /* Um pouco menor que o título principal */
    color: var(--secondary-color);
    margin-top: 40px;
    margin-bottom: 30px;
    text-align: center;
    border-bottom: 3px solid var(--secondary-color); /* Linha de destaque */
    padding-bottom: 10px;
}

/* Grid para os gráficos */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}
.chart-panel {
    background-color: var(--dark-bg);
    padding: 20px;
    border: 2px solid var(--primary-color);
    box-shadow: inset -2px -2px #0004, inset 2px 2px #fff4;
}
.chart-panel h3 {
    font-family: var(--font-title);
    font-size: 18px;
    color: var(--primary-color);
    margin-bottom: 20px;
    text-align: center; /* Centraliza o título do gráfico */
    border-bottom: 2px solid #fff2;
    padding-bottom: 10px;
}
.chart-container {
    position: relative;
    height: 300px; /* Altura fixa para os gráficos */
    width: 100%;
}

/* Media Queries para o Admin Panel */
@media (max-width: 992px) {
    .admin-container {
        flex-direction: column; /* Sidebar e conteúdo empilham */
        padding-left: 10px;
        padding-right: 10px;
        gap: 20px;
    }
    .admin-sidebar {
        width: 100%; /* Sidebar ocupa toda a largura */
        margin-bottom: 0; /* Remove margem inferior */
    }
    .admin-main-content {
        padding: 20px;
    }
    .admin-main-content h2 {
        font-size: 24px;
        margin-bottom: 20px;
    }
    .charts-section-title {
        font-size: 20px;
        margin-top: 30px;
        margin-bottom: 20px;
    }
    .charts-grid, .metrics {
        grid-template-columns: 1fr; /* Gráficos e métricas empilham */
        gap: 20px;
    }
    .chart-container {
        height: 250px; /* Reduz altura do gráfico no mobile */
    }
}

/* --- Estilos para o admin/payouts.php (integrados aqui para consistência) --- */
.admin-payouts-dashboard {
    max-width: 1000px;
    margin: 20px auto;
    padding: 20px;
    background-color: var(--light-bg);
    border: var(--pixel-size) solid var(--dark-bg);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.admin-payouts-dashboard h2 {
    color: var(--secondary-color);
    margin-bottom: 30px;
    font-family: var(--font-title);
    font-size: 28px;
    text-shadow: 3px 3px 0px #000;
}

.admin-section {
    background-color: var(--dark-bg);
    padding: 20px;
    margin-bottom: 25px;
    border: 2px solid var(--primary-color);
    box-shadow: inset -2px -2px #0004, inset 2px 2px #fff4;
    text-align: left;
}

.admin-section h3 {
    color: var(--primary-color);
    margin-top: 0;
    margin-bottom: 15px;
    font-family: var(--font-title);
    font-size: 20px;
    border-bottom: 2px solid #fff2;
    padding-bottom: 10px;
}

.payouts-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-family: var(--font-body);
    font-size: 16px;
}

.payouts-table th, .payouts-table td {
    border: 1px solid var(--light-bg);
    padding: 10px;
    text-align: left;
}

.payouts-table th {
    background-color: var(--blue-light-color);
    color: #000;
    font-family: var(--font-title);
    font-size: 14px;
    text-transform: uppercase;
}

.payouts-table tr:nth-child(even) {
    background-color: #1f1a26; /* Um tom ligeiramente diferente para linhas alternadas */
}

.payouts-table td {
    background-color: var(--dark-bg); /* Fundo para as células de dados */
    color: var(--text-color);
}

.payouts-table .amount {
    font-weight: bold;
    color: var(--secondary-color);
}

.payouts-table .status-requested { color: var(--blue-light-color); }
.payouts-table .status-processing { color: var(--orange-color); }
.payouts-table .status-completed { color: var(--primary-color); }
.payouts-table .status-rejected { color: var(--red-color); }

.payouts-table form {
    display: inline-block;
    margin: 0;
}

.payouts-table .btn {
    font-size: 12px;
    padding: 5px 10px;
}

/* Media Queries para responsividade da tabela */
@media (max-width: 768px) {
    .payouts-table, .payouts-table thead, .payouts-table tbody, .payouts-table th, .payouts-table td, .payouts-table tr { 
        display: block; 
    }
    
    .payouts-table thead tr { 
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    
    .payouts-table tr { 
        border: 1px solid var(--light-bg);
        margin-bottom: 15px;
        display: flex;
        flex-wrap: wrap;
        padding: 10px;
        background-color: var(--dark-bg);
        box-shadow: inset -1px -1px #0004, inset 1px 1px #fff4;
    }
    
    .payouts-table td { 
        border: none;
        position: relative;
        padding-left: 50%; 
        text-align: right;
        border-bottom: 1px dashed rgba(255,255,255,0.1);
        width: 100%;
        box-sizing: border-box;
    }
    
    .payouts-table td:last-child {
        border-bottom: 0;
    }

    .payouts-table td:before { 
        position: absolute;
        left: 6px;
        width: 45%; 
        padding-right: 10px; 
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
        color: var(--primary-color);
        font-family: var(--font-title);
        font-size: 14px;
    }
    
    /* Labels para células da tabela em mobile */
    .payouts-table td:nth-of-type(1):before { content: "ID:"; }
    .payouts-table td:nth-of-type(2):before { content: "Afiliado:"; }
    .payouts-table td:nth-of-type(3):before { content: "E-mail:"; }
    .payouts-table td:nth-of-type(4):before { content: "Chave Pix:"; }
    .payouts-table td:nth-of-type(5):before { content: "Valor:"; }
    .payouts-table td:nth-of-type(6):before { content: "Status:"; }
    .payouts-table td:nth-of-type(7):before { content: "Solicitado em:"; }
    .payouts-table td:nth-of-type(8):before { content: "Processado em:"; }
    .payouts-table td:nth-of-type(9):before { content: "Ações:"; } /* Cuidado com este, se não houver um 9º tipo */

    .admin-payouts-dashboard {
        margin: 10px;
        padding: 15px;
    }
}