/* Layout Geral (Mantido) */
body.dark-mode .rh-entry {
    background: #16171b;
    border: 1px solid #344455;
	color: #ddd;
}

/* Cabeçalho */
body.dark-mode .rh-header {
    background: #131317;
    color: #4799FF;
    border-bottom: 1px solid #344455;
}
body.dark-mode .rh-header-left {
	background: rgba(0,0,0,0.1);
}

body.dark-mode .rh-cover-image {
	border: 1px solid #344455;
	background: #ddd;
}
body.dark-mode .rh-no-img {
	background: #131317;
	color: #ddd;
}

body.dark-mode .rh-data-table {
	border: 1px solid #344455;
}
body.dark-mode .rh-row {
	border-bottom: 1px solid #344455;
    background: #16171b;
    color: #ddd;
}
body.dark-mode .rh-label {
    background: #1d1e24;
    color: #ddd;
    border-right: 1px solid #344455;
}

body.dark-mode .rh-section h3 {
	border-bottom: 2px solid #ddd;
	color: #ddd;
}
body.dark-mode .rh-rom-info {
    background: #202226;
    color: #efefef;
	border: 1px solid #B4C0CE;
}
body.dark-mode .rh-credits-table {
	background: #f7fafc;
    font-size: 13px;
    color: #176093;
    border: 1px solid #344455;
}
body.dark-mode .rh-credits-table th {
    background: #131317;
    color: #ddd;
    border: 1px solid #344455;
}
body.dark-mode .rh-credits-table td {
	border: 1px solid #344455;
    background: #16171b;
    color: #ddd;
}
body.dark-mode .rh-credit-name {
    color: #ddd;
}

body.dark-mode .rh-thumb {
    border: 3px solid #fff;
}
body.dark-mode .rh-thumb:hover {
    border-color: #88aaff;
}
body.dark-mode .rh-btn.readme {
	border: 1px solid #33f;
}

/* Layout Geral (Mantido) */
.rh-entry {
    background-color: #f7fafc;
    border: 1px solid #B4C0CE;
    border-radius: 5px;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
	font-family: sans-serif;
	color: #333;
	position: relative;
}

/* Cabeçalho */
.rh-header {
	display: flex;
	background: #002f54;
	color: lightblue;
    box-shadow: 0 16px 20px rgba(255,255,255,.15) inset;
	border-radius: 4px 4px 0 0;
    border-bottom: 1px solid #002f54;
}
.rh-header-left {
	padding: 10px 15px;
	/*! font-weight: bold; */
	background: rgba(0,0,0,0.1);
	border-right: 1px solid rgba(255,255,255,0.1);
}
.rh-header-right {
	padding: 10px 15px;
	/*! font-weight: bold; */
	flex-grow: 1;
}

/* Container Flex */
.rh-container {
	display: flex;
	flex-wrap: wrap;
	padding: 20px;
	gap: 20px;
}

/* Sidebar (Esquerda) */
.rh-sidebar {
	flex: 0 0 250px;
	width: 250px;
}

.rh-content { flex: 1;
	min-width: 300px;
}

/* Capa e Tabela Lateral */
.rh-cover-image {
	margin-bottom: 15px;
	border: 1px solid #B4C0CE;
	background: #fff;
	padding: 4px;
}
.rh-cover-image img {
	width: 100%;
	height: auto;
	display: block;
}
.rh-no-img {
	padding: 40px 10px;
	text-align: center;
	background: #eee;
	color: #999;
}

/* Tabela de Dados Lateral */
.rh-data-table {
	font-size: 13px;
	border: 1px solid #B4C0CE;
	margin-bottom: 15px;
}
.rh-row {
	display: flex;
	border-bottom: 1px solid #B4C0CE;
	background: #fff;
}
.rh-row:last-child { border-bottom: none; }
.rh-label {
	width: 102px;
	padding: 6px 8px;
	background: #e9f1f9;
    border-right: 1px solid #B4C0CE;
	font-weight: bold;
	color: #333;
	flex-shrink: 0;
}
.rh-val {
	padding: 6px 8px;
	word-break: break-word;
}

/* Botões */
.rh-buttons {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.rh-btn {
	display: block;
	text-align: center;
	padding: 10px;
	text-decoration: none;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 12px;
	border-radius: 3px;
}
.rh-btn.download {
	background-color: #2ecc71;
	color: #fff;
	border: 1px solid #27ae60;
}
.rh-btn.download:hover { background-color: #27ae60; }

.rh-btn.readme {
	background-color: #44f;
	color: #fff;
	border: 1px solid #00f;
}
.rh-btn.readme:hover { background-color: #00f; }

/* Seções de Texto */
.rh-section {
	margin-bottom: 25px;
}
.rh-section h3 {
	font-size: 16px;
	border-bottom: 2px solid #344455;
	padding-bottom: 5px;
	margin-bottom: 10px;
	color: #344455;
}
.rh-text {
	font-size: 14px;
	line-height: 1.6;
}
.rh-rom-info {
	font-family: monospace;
	background: #eaeaea;
	padding: 15px;
	border: 1px solid #B4C0CE;
	font-size: 12px;
	color: #444;
}

/* --- Tabela de Créditos --- */
.rh-credits-section {
	margin-top: 30px;
}
.rh-credits-table {
	width: 100%;
	border-collapse: collapse;
	background: #f7fafc;
    color: #176093;
	font-size: 13px;
    border: 1px solid #B4C0CE;
}
.rh-credits-table th {
	background: #002f54;
	color: lightblue;
    box-shadow: 0 16px 20px rgba(255,255,255,.15) inset;
	text-align: left;
    border: 1px solid #B4C0CE;
}
.rh-credits-table td {
	border: 1px solid #B4C0CE;
}
.rh-credits-table tr:last-child td {
	border-bottom: none;
}
.rh-credit-name {
	color: #176093;
	font-weight: bold;
} /* Link style color */

/* --- Screenshots com Wrap e Tamanho --- */
.rh-screenshots {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.rh-thumb-wrapper {
    /* Garante 2 imagens por linha se o espaço permitir, mas respeitando o width fixo */
    width: 200px; 
}
.rh-thumb {
    width: 200px;
    height: auto;
    border: 3px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: transform 0.2s;
    display: block;
}
.rh-thumb:hover {
    transform: scale(1.02);
    border-color: #88aaff;
}

/* --- NOVO: Modal Lightbox --- */
.rh-modal {
    display: none; 
    position: fixed; 
    z-index: 9999; 
    left: 0; top: 0; width: 100%; height: 100%; 
    background-color: rgba(0,0,0,0.85); 
    align-items: center; justify-content: center;
}
.rh-modal-content {
    /* Tamanho solicitado ao abrir */
    width: 640px;
    height: 480px;
    object-fit: contain; /* Garante que a imagem não distorça */
    background: #000;
    border: 2px solid #fff;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}
.rh-modal-close {
    position: absolute; top: 20px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; cursor: pointer;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .rh-container { flex-direction: column; }
    .rh-sidebar { width: 100%; }
    .rh-credits-table { font-size: 11px; }
    .rh-thumb-wrapper { width: 48%; } /* No mobile, tenta dividir tela */
    .rh-thumb { width: 100%; }
    .rh-modal-content { width: 90%; height: auto; } /* Mobile modal fluido */
}
/* Estilos para as Setas de Navegação do Modal */
.rh-prev,
.rh-next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 30px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    -webkit-user-select: none;
    z-index: 1001; /* Garante que fique acima da imagem */
    background-color: rgba(0, 0, 0, 0.3); /* Fundo leve para contraste */
}

/* Posicionamento */
.rh-next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.rh-prev {
    left: 0;
    border-radius: 3px 0 0 3px;
}

/* Hover effect */
.rh-prev:hover,
.rh-next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}
/* ==========================================================================
   ESTILOS DO FILTRO E TABELA (REPOSITÓRIO)
   ========================================================================== */

.rh-repo-wrapper {
    font-family: Arial, sans-serif;
    margin-bottom: 40px;
    max-width: 100%;
}

/* --- CAIXA DO FILTRO --- */
.rh-filter-box {
    background: #111;
    border: 1px solid #444;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 20px;
    color: #fff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

.rh-filter-header {
    text-align: center;
    color: #4facfe; /* Azul neon suave */
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 15px;
    text-transform: uppercase;
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
}

.rh-filter-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: space-between;
}

.rh-filter-group {
    flex: 1 1 200px; /* Responsivo: mínimo 200px */
    display: flex;
    flex-direction: column;
}

.rh-filter-group label {
    font-size: 12px;
    font-weight: bold;
    color: #ccc;
    margin-bottom: 5px;
    text-align: center;
}

.rh-filter-group select,
.rh-filter-group input {
    background: #222;
    color: #fff;
    border: 1px solid #555;
    padding: 5px;
    border-radius: 3px;
    width: 100%;
}

.rh-filter-search-row {
    margin-top: 15px;
    border-top: 1px solid #333;
    padding-top: 15px;
}

.rh-filter-actions {
    margin-top: 15px;
    text-align: center;
}

.rh-go-btn {
    background: linear-gradient(to bottom, #444, #222);
    border: 1px solid #fff;
    color: #fff;
    padding: 8px 40px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 15px;
    text-transform: uppercase;
    transition: all 0.2s;
}
.rh-go-btn:hover {
    background: linear-gradient(to bottom, #555, #333);
    box-shadow: 0 0 10px rgba(255,255,255,0.2);
}

/* --- RESULTADOS HEADER --- */
.rh-results-header {
    background: #344455;
    color: #fff;
    padding: 10px;
    text-align: center;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
    margin-top: 20px;
    border: 1px solid #2a3644;
}

/* --- TABELA --- */
.rh-results-table {
    width: 100%;
    border-collapse: collapse;
    background: #1a1a1a;
    color: #ddd;
    font-size: 13px;
    border: 1px solid #333;
}

.rh-results-table thead th {
    background: #222;
    color: #fff;
    text-align: left;
    padding: 10px;
    border-bottom: 2px solid #555;
    border-right: 1px solid #333;
}

.rh-results-table tbody td {
    padding: 8px 10px;
    border-bottom: 1px solid #333;
    border-right: 1px solid #333;
}

.rh-results-table tr:nth-child(even) {
    background-color: #252525;
}
.rh-results-table tr:hover {
    background-color: #333;
}

.rh-col-title a {
    color: #88aaff;
    font-weight: bold;
    text-decoration: none;
}
.rh-col-title a:hover {
    text-decoration: underline;
    color: #fff;
}

/* --- PAGINAÇÃO --- */
.rh-pagination {
    margin-top: 20px;
    text-align: center;
}
.rh-pagination a, 
.rh-pagination span {
    display: inline-block;
    padding: 5px 10px;
    margin: 2px;
    background: #333;
    color: #fff;
    border: 1px solid #555;
    text-decoration: none;
    font-size: 12px;
}
.rh-pagination .current {
    background: #fff;
    color: #000;
    border-color: #fff;
    font-weight: bold;
}
.rh-pagination a:hover {
    background: #555;
}