/**
 * Cloud Gaming Map - Variáveis CSS
 * Version: 2.5.7 - TEMA DARK
 * Arquivo: Configurações globais e variáveis
 */

/* ===============================================
   VARIÁVEIS E CONFIGURAÇÕES GLOBAIS - TEMA DARK
   =============================================== */

:root {
    /* === CORES PRINCIPAIS - TEMA DARK === */
    --cgm-primary: #76ff03;           /* Verde neon principal */
    --cgm-primary-dark: #5dc501;      /* Verde neon escuro (hover) */
    --cgm-secondary: #699824;         /* Verde escuro (mantido) */
    --cgm-dark: #252824;              /* Fundo escuro principal */
    --cgm-white: #ffffff;             /* Branco puro */
    
    /* === CORES COMPLEMENTARES - TEMA DARK === */
    --cgm-bg-light: #1a1c19;          /* Fundo escuro secundário */
    --cgm-bg-card: #252824;           /* Fundo de cards */
    --cgm-border: #3d4139;            /* Bordas visíveis */
    --cgm-text: #ffffff;              /* Texto principal branco */
    --cgm-text-secondary: #d1d5db;    /* Texto secundário claro */
    --cgm-text-muted: #9ca3af;        /* Texto esmaecido */
    
    /* === SOMBRAS - TEMA DARK === */
    --cgm-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --cgm-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    --cgm-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.5);
    --cgm-shadow-neon: 0 4px 15px rgba(118, 255, 3, 0.4);
    --cgm-shadow-neon-hover: 0 6px 20px rgba(118, 255, 3, 0.5);
    
    /* === CONFIGURAÇÕES === */
    --cgm-radius: 16px;
    --cgm-radius-sm: 8px;
    --cgm-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===============================================
   RESET E BASE
   =============================================== */

/* Reset e base */
* {
    box-sizing: border-box;
}

/* ===============================================
   CONTAINER PRINCIPAL - TEMA DARK
   =============================================== */

.cgm-container {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--cgm-text) !important;
    background: var(--cgm-dark) !important;
    position: relative;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* Reset geral para evitar overflow */
.cgm-container,
.cgm-container * {
    box-sizing: border-box;
}

/* Título da página - BRANCO */
.cgm-page-title {
    font-size: 36px;
    font-weight: 700;
    margin: 0 0 24px 0;
    padding: 0 5px;
    color: var(--cgm-text) !important;
    letter-spacing: -0.5px;
    text-align: center;
}

/* ===============================================
   ESTADOS DE LOADING E MENSAGENS - TEMA DARK
   =============================================== */

.cgm-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    color: var(--cgm-text-muted) !important;
}

.cgm-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--cgm-border);
    border-top: 3px solid var(--cgm-primary);
    border-radius: 50%;
    animation: cgm-spin 1s linear infinite;
    margin-right: 12px;
}

@keyframes cgm-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Mensagens e alertas - TEMA DARK */
.cgm-error {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #ef4444 !important;
    padding: 14px 18px;
    border-radius: var(--cgm-radius-sm);
    margin: 12px 0;
    border: 2px solid #ef4444 !important;
}

.cgm-success {
    background: rgba(118, 255, 3, 0.2) !important;
    color: var(--cgm-primary) !important;
    padding: 14px 18px;
    border-radius: var(--cgm-radius-sm);
    margin: 12px 0;
    border: 2px solid var(--cgm-primary) !important;
}

/* Nota de estimativa - TEMA DARK */
.cgm-estimation-note {
    background: rgba(118, 255, 3, 0.1) !important;
    border: 2px solid var(--cgm-primary) !important;
    border-left: 4px solid var(--cgm-primary) !important;
    border-radius: var(--cgm-radius-sm);
    padding: 16px 20px;
    margin: 20px;
    font-size: 14px;
    line-height: 1.6;
}

.cgm-estimation-note p {
    margin: 0;
    color: var(--cgm-text) !important;
}

.cgm-estimation-note strong {
    color: var(--cgm-primary) !important;
    font-weight: 700;
}

/* Informações de localização - TEMA DARK */
.cgm-location-info {
    background: rgba(118, 255, 3, 0.15) !important;
    border: 2px solid var(--cgm-primary) !important;
    border-radius: var(--cgm-radius-sm);
    padding: 16px 20px;
    margin: 20px 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--cgm-text) !important;
}

.cgm-location-info strong {
    color: var(--cgm-primary) !important;
    font-weight: 700;
}

/* Estados vazios - TEMA DARK */
.cgm-loading {
    text-align: center;
    padding: 48px 24px;
    color: var(--cgm-text-muted) !important;
    font-style: italic;
}

.cgm-empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--cgm-text-muted) !important;
}

.cgm-empty-state p {
    margin: 0;
    font-style: italic;
    color: var(--cgm-text-muted) !important;
}

/* ===============================================
   FORÇAR TODOS OS TEXTOS BRANCOS - !IMPORTANT
   =============================================== */

/* Container e todos os elementos filhos */
.cgm-container,
.cgm-container *:not(button):not(input):not(select):not(textarea) {
    color: var(--cgm-text) !important;
}

/* Títulos */
.cgm-container h1,
.cgm-container h2,
.cgm-container h3,
.cgm-container h4,
.cgm-container h5,
.cgm-container h6 {
    color: var(--cgm-text) !important;
}

/* Parágrafos e textos */
.cgm-container p,
.cgm-container span,
.cgm-container div,
.cgm-container label,
.cgm-container a,
.cgm-container li,
.cgm-container td,
.cgm-container th {
    color: var(--cgm-text) !important;
}

/* Textos específicos */
.cgm-simulator-header h3,
.cgm-simulator-header p,
.cgm-location-info,
.cgm-location-info *,
.cgm-estimation-note,
.cgm-estimation-note *,
.cgm-estimation-note p,
.cgm-estimation-note strong {
    color: var(--cgm-text) !important;
}

/* Labels e formulários */
.cgm-form-group label,
.cgm-filters label,
.cgm-address-input label {
    color: var(--cgm-text) !important;
}

/* Badges e tags que devem manter cores específicas */
.cgm-provider-badge {
    /* Mantém suas cores específicas */
}

/* Elementos que devem ser brancos mesmo em badges */
.cgm-result-item,
.cgm-result-item *:not(.cgm-provider-badge) {
    color: var(--cgm-text) !important;
}

/* Drawer e leaderboard */
.cgm-drawer,
.cgm-drawer *:not(button),
.cgm-leaderboard-icon,
.cgm-leaderboard-label {
    color: var(--cgm-text) !important;
}

/* Tabelas */
.cgm-table,
.cgm-table thead th,
.cgm-table tbody td {
    color: var(--cgm-text) !important;
}

/* Popups */
.cgm-popup,
.cgm-popup *:not(button) {
    color: var(--cgm-text) !important;
}

.cgm-popup-header h3 {
    color: var(--cgm-text) !important;
}

/* Tooltips e hints */
.cgm-tooltip,
.cgm-hint,
.cgm-help-text {
    color: var(--cgm-text-muted) !important;
}

/* Garantir texto em cards */
.cgm-card,
.cgm-card *:not(button) {
    color: var(--cgm-text) !important;
}

/* Garantir texto em controles */
.cgm-controls,
.cgm-controls * {
    color: var(--cgm-text) !important;
}

/* Leaflet map controls */
.leaflet-container {
    background: var(--cgm-bg-light) !important;
}

.leaflet-control,
.leaflet-control * {
    color: var(--cgm-text) !important;
}

/* Select e dropdowns */
select,
.cgm-select,
option {
    color: var(--cgm-text) !important;
    background: var(--cgm-bg-card) !important;
}

/* ===============================================
   FORÇAR ABSOLUTAMENTE TUDO BRANCO - AGRESSIVO
   =============================================== */

/* Força TUDO no container */
#cgm-map-container,
#cgm-map-container *,
.cgm-container,
.cgm-container *,
.cgm-simulator,
.cgm-simulator *,
.cgm-controls,
.cgm-controls *,
.cgm-filters,
.cgm-filters * {
    color: #ffffff !important;
}

/* Força todos os tipos de elementos */
div, span, p, a, label, h1, h2, h3, h4, h5, h6,
strong, em, i, b, small, code, pre {
    color: #ffffff !important;
}

/* Específicos do simulador */
.cgm-simulator-header,
.cgm-simulator-header *,
.cgm-simulator-controls,
.cgm-simulator-controls * {
    color: #ffffff !important;
}

/* Badges com texto branco */
.cgm-badge,
.cgm-badge * {
    color: #ffffff !important;
}

/* Informações de localização */
.cgm-location-info,
.cgm-location-info *,
.cgm-location-info p,
.cgm-location-info strong,
.cgm-estimation-note,
.cgm-estimation-note *,
.cgm-estimation-note p,
.cgm-estimation-note strong {
    color: #ffffff !important;
}

/* Inputs e placeholders */
input::placeholder,
textarea::placeholder,
select::placeholder {
    color: #9ca3af !important;
}

/* Filtros e radio buttons */
.cgm-filters label,
.cgm-filters label *,
.cgm-filters span {
    color: #ffffff !important;
}

/* Checkboxes e radios labels */
input[type="checkbox"] + label,
input[type="radio"] + label {
    color: #ffffff !important;
}

/* Leaflet popup */
.leaflet-popup,
.leaflet-popup *,
.leaflet-popup-content,
.leaflet-popup-content * {
    color: #ffffff !important;
}

/* Marker popups */
.marker-popup,
.marker-popup *,
.marker-popup-content,
.marker-popup-content * {
    color: #ffffff !important;
}

/* Resultados e tabelas */
.cgm-result-item,
.cgm-result-item *:not(.cgm-provider-badge),
.cgm-results-table,
.cgm-results-table * {
    color: #ffffff !important;
}

/* Stats e números */
.cgm-stat,
.cgm-stat-value,
.cgm-stat-label {
    color: #ffffff !important;
}

/* Loading e estados */
.cgm-loading,
.cgm-loading *,
.cgm-empty-state,
.cgm-empty-state * {
    color: #9ca3af !important;
}

/* Drawer e leaderboard */
.cgm-drawer,
.cgm-drawer *:not(button),
.cgm-leaderboard-item,
.cgm-leaderboard-item * {
    color: #ffffff !important;
}

/* Tooltips */
.cgm-tooltip,
.cgm-tooltip *,
[data-tooltip],
[data-tooltip]::after {
    color: #ffffff !important;
}

/* Cards */
.cgm-card,
.cgm-card *:not(button) {
    color: #ffffff !important;
}

/* Qualquer texto que sobrar */
* {
    color: #ffffff !important;
}

/* Exceções - elementos que devem manter cores específicas */
button,
.cgm-button,
.cgm-btn,
input[type="button"],
input[type="submit"] {
    color: #000000 !important; /* Botões com texto preto */
}

/* Badges de provedor mantêm suas cores */
.cgm-provider-badge.cgm-provider-xcloud {
    color: #ffffff !important;
}

.cgm-provider-badge.cgm-provider-boosteroid {
    color: #ffffff !important;
}

.cgm-provider-badge.cgm-provider-gfn {
    color: #000000 !important;
}

/* ===============================================
   SOBRESCREVER LEAFLET.CSS - FORÇA TEMA DARK
   =============================================== */

/* Container do Leaflet */
.leaflet-container {
    background: var(--cgm-bg-light) !important;
    color: #ffffff !important;
}

/* Popups do Leaflet */
.leaflet-popup-content-wrapper,
.leaflet-popup-content-wrapper *,
.leaflet-popup-content {
    background: var(--cgm-bg-card) !important;
    color: #ffffff !important;
}

.leaflet-popup-tip {
    background: var(--cgm-bg-card) !important;
}

/* Controles do Leaflet */
.leaflet-control,
.leaflet-control *,
.leaflet-bar,
.leaflet-bar a,
.leaflet-control-zoom-in,
.leaflet-control-zoom-out {
    background: var(--cgm-bg-card) !important;
    color: #ffffff !important;
    border-color: var(--cgm-border) !important;
}

.leaflet-bar a:hover {
    background: var(--cgm-primary) !important;
    color: #000000 !important;
}

/* Atribuição do Leaflet */
.leaflet-control-attribution,
.leaflet-control-attribution a {
    background: rgba(37, 40, 36, 0.8) !important;
    color: var(--cgm-text-muted) !important;
}

/* Marcadores customizados */
.leaflet-marker-icon,
.marker-icon {
    color: #ffffff !important;
}

/* Tooltips do Leaflet */
.leaflet-tooltip {
    background: var(--cgm-bg-card) !important;
    color: #ffffff !important;
    border: 1px solid var(--cgm-border) !important;
}

/* Escala do mapa */
.leaflet-control-scale-line {
    background: var(--cgm-bg-card) !important;
    color: #ffffff !important;
    border-color: var(--cgm-border) !important;
}

/* Layers control */
.leaflet-control-layers,
.leaflet-control-layers-expanded {
    background: var(--cgm-bg-card) !important;
    color: #ffffff !important;
}

.leaflet-control-layers label {
    color: #ffffff !important;
}

/* ===============================================
   TÍTULOS PRINCIPAIS - FORÇA BRANCO MÁXIMO
   =============================================== */

/* Título principal "Mapa Cloud Gaming" */
h1.cgm-page-title,
h2.cgm-page-title,
.cgm-page-title,
.cgm-container > h1,
.cgm-container > h2 {
    color: #ffffff !important;
    text-shadow: none !important;
}

/* Título do simulador */
.cgm-simulator h3,
.cgm-simulator-header h3,
.cgm-mcg-simulator h3,
h3 {
    color: #ffffff !important;
}

/* Garantir TODOS os H1, H2, H3 */
.cgm-container h1,
.cgm-container h2,
.cgm-container h3 {
    color: #ffffff !important;
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #ffffff !important;
    background-clip: unset !important;
}

/* Remover gradientes de texto */
h1, h2, h3, h4, h5, h6 {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #ffffff !important;
    background-clip: unset !important;
    color: #ffffff !important;
}

/* Header do simulador MCG */
.cgm-simulator-header,
.cgm-simulator-header * {
    color: #ffffff !important;
}