/* =============================================================================
   assets/css/icones.css — Ícones coloridos por significado, em pastilhas
   =============================================================================
   Pedido do produto (07/10/2026): ícones no estilo "app de banco" — cada um com
   a sua cor e um quadradinho de fundo tingido (depósito verde, saque vermelho,
   conta azul, histórico âmbar…), em todo o sistema.

   Como funciona, sem trocar de biblioteca:
   - o Lucide substitui <i data-lucide="x"> por <svg class="lucide lucide-x">,
     então a cor pode ser decidida pelo NOME do ícone, via CSS;
   - a parte 1 só atribui variáveis (--ic-fg / --ic-bg) por nome: sozinha não
     muda nada na tela;
   - a parte 2 lista os CONTEXTOS que consomem essas variáveis: menus e
     navegações ganham a pastilha; rótulos ganham só a cor. Ícones que carregam
     ESTADO (alertas, setas de preço, seletores com classe de cor própria) não
     entram em contexto nenhum e continuam como estavam.

   O mesmo nome tem sempre a mesma cor em qualquer tela — é isso que faz o
   sistema parecer um só.
   ========================================================================== */

:root {
    --ic-green:  #2ecc71;  --ic-green-bg:  rgba(46, 204, 113, .16);
    --ic-red:    #f23645;  --ic-red-bg:    rgba(242, 54, 69, .16);
    --ic-blue:   #4f8df7;  --ic-blue-bg:   rgba(79, 141, 247, .16);
    --ic-indigo: #818cf8;  --ic-indigo-bg: rgba(129, 140, 248, .16);
    --ic-amber:  #f5b301;  --ic-amber-bg:  rgba(245, 179, 1, .16);
    --ic-yellow: #facc15;  --ic-yellow-bg: rgba(250, 204, 21, .16);
    --ic-purple: #a78bfa;  --ic-purple-bg: rgba(167, 139, 250, .16);
    --ic-teal:   #2dd4bf;  --ic-teal-bg:   rgba(45, 212, 191, .16);
    --ic-orange: #fb923c;  --ic-orange-bg: rgba(251, 146, 60, .16);
    --ic-grey:   #94a3b8;  --ic-grey-bg:   rgba(148, 163, 184, .14);
}

/* Tema claro: tons um pouco mais fechados para manter contraste sobre branco */
[data-theme="light"] {
    --ic-green:  #16a34a;  --ic-green-bg:  rgba(22, 163, 74, .13);
    --ic-red:    #dc2626;  --ic-red-bg:    rgba(220, 38, 38, .12);
    --ic-blue:   #2563eb;  --ic-blue-bg:   rgba(37, 99, 235, .12);
    --ic-indigo: #4f46e5;  --ic-indigo-bg: rgba(79, 70, 229, .12);
    --ic-amber:  #d97706;  --ic-amber-bg:  rgba(217, 119, 6, .13);
    --ic-yellow: #ca8a04;  --ic-yellow-bg: rgba(202, 138, 4, .13);
    --ic-purple: #7c3aed;  --ic-purple-bg: rgba(124, 58, 237, .12);
    --ic-teal:   #0d9488;  --ic-teal-bg:   rgba(13, 148, 136, .13);
    --ic-orange: #ea580c;  --ic-orange-bg: rgba(234, 88, 12, .13);
    --ic-grey:   #64748b;  --ic-grey-bg:   rgba(100, 116, 139, .12);
}

/* -----------------------------------------------------------------------------
   1) SIGNIFICADO → COR (por nome do ícone). Só variáveis.
   -------------------------------------------------------------------------- */
/* dinheiro entrando, confirmação, liberado */
svg.lucide-arrow-down-circle, svg.lucide-wallet, svg.lucide-trending-up, svg.lucide-check-circle,
svg.lucide-check-circle-2, svg.lucide-circle-check, svg.lucide-check, svg.lucide-unlock, svg.lucide-circle-dollar-sign,
svg.lucide-save, svg.lucide-download, svg.lucide-file-check, svg.lucide-shield-check, svg.lucide-bar-chart-3,
svg.lucide-chart-column, svg.lucide-banknote, svg.lucide-piggy-bank {
    --ic-fg: var(--ic-green); --ic-bg: var(--ic-green-bg);
}
/* dinheiro saindo, sair, erro, agenda */
svg.lucide-arrow-up-circle, svg.lucide-log-out, svg.lucide-x-circle, svg.lucide-circle-x, svg.lucide-triangle-alert,
svg.lucide-alert-triangle, svg.lucide-trending-down, svg.lucide-zap, svg.lucide-calendar-days, svg.lucide-calendar, svg.lucide-trash-2 {
    --ic-fg: var(--ic-red); --ic-bg: var(--ic-red-bg);
}
/* pessoa, conta, informação, documentos, gráfico */
svg.lucide-user, svg.lucide-user-circle, svg.lucide-circle-user, svg.lucide-users, svg.lucide-id-card, svg.lucide-info,
svg.lucide-shield, svg.lucide-mail, svg.lucide-send, svg.lucide-phone, svg.lucide-building-2, svg.lucide-line-chart,
svg.lucide-chart-line, svg.lucide-candlestick-chart, svg.lucide-chart-candlestick, svg.lucide-file-text, svg.lucide-columns,
svg.lucide-columns-3, svg.lucide-layout-list, svg.lucide-inbox, svg.lucide-pencil, svg.lucide-languages, svg.lucide-settings {
    --ic-fg: var(--ic-blue); --ic-bg: var(--ic-blue-bg);
}
/* painel, camadas */
svg.lucide-layout-dashboard, svg.lucide-layers {
    --ic-fg: var(--ic-indigo); --ic-bg: var(--ic-indigo-bg);
}
/* tempo, histórico, atenção, commodities */
svg.lucide-history, svg.lucide-clock, svg.lucide-gauge, svg.lucide-alert-circle, svg.lucide-circle-alert,
svg.lucide-shield-alert, svg.lucide-package {
    --ic-fg: var(--ic-amber); --ic-bg: var(--ic-amber-bg);
}
/* favoritos, avisos */
svg.lucide-star, svg.lucide-bell {
    --ic-fg: var(--ic-yellow); --ic-bg: var(--ic-yellow-bg);
}
/* atividade, visão geral, IA */
svg.lucide-activity, svg.lucide-layout-grid, svg.lucide-brain, svg.lucide-bot, svg.lucide-sparkles {
    --ic-fg: var(--ic-purple); --ic-bg: var(--ic-purple-bg);
}
/* transferência, câmbio, filtros */
svg.lucide-arrow-left-right, svg.lucide-refresh-ccw, svg.lucide-refresh-cw, svg.lucide-repeat, svg.lucide-list-filter {
    --ic-fg: var(--ic-teal); --ic-bg: var(--ic-teal-bg);
}
/* cripto, notícias, destaque */
svg.lucide-bitcoin, svg.lucide-newspaper, svg.lucide-gift, svg.lucide-flame, svg.lucide-plus-square, svg.lucide-square-plus {
    --ic-fg: var(--ic-orange); --ic-bg: var(--ic-orange-bg);
}

/* -----------------------------------------------------------------------------
   2) CONTEXTOS COM PASTILHA — menus e navegações
   Tamanho base: glifo 16px + 6px de respiro = pastilha de 28px.
   -------------------------------------------------------------------------- */
.user-menu-list li a svg.lucide,
.room-tabs-container .tab-nav-btn svg.lucide,
.side-item svg.lucide,
.section-title svg.lucide,
.menu-detail__title svg.lucide,
.mrow svg.lucide {
    box-sizing: content-box;
    width: 16px;
    height: 16px;
    padding: 6px;
    border-radius: 8px;
    flex: 0 0 auto;
    color: var(--ic-fg, var(--ic-grey));
    background: var(--ic-bg, var(--ic-grey-bg));
    stroke-width: 2;
    transition: box-shadow .15s ease, filter .15s ease;
}

/* Abas do Painel: pastilha um pouco menor para não engordar a barra */
.room-tabs-container .tab-nav-btn svg.lucide {
    width: 15px;
    height: 15px;
    padding: 5px;
    border-radius: 7px;
}

/* Os dois trilhos do terminal — categorias (.tool-btn-nav, à direita) e
   ferramentas do gráfico (.sidebar-tools .tool-btn, à esquerda) — NÃO entram
   aqui: têm estilo próprio ("BC.GAME", quadrados cinza, ícone monocromático,
   balão com o nome) no theme.css. */

/* Menu lateral do perfil e títulos de seção: pastilha padrão, só o respiro */
.section-title svg.lucide,
.menu-detail__title svg.lucide {
    width: 16px;
    height: 16px;
}

/* Item ativo / selecionado: anel fino da própria cor */
.room-tabs-container .tab-nav-btn.active svg.lucide,
.side-item.active svg.lucide {
    box-shadow: 0 0 0 1.5px var(--ic-fg, var(--ic-grey));
}

/* Passar o mouse: pastilha um pouco mais viva */
.user-menu-list li a:hover svg.lucide,
.room-tabs-container .tab-nav-btn:hover svg.lucide,
.side-item:hover svg.lucide,
.mrow:hover svg.lucide {
    filter: brightness(1.15);
}

/* Indicador de link externo no menu do usuário: ícone miúdo, sem pastilha */
.user-menu-list li a svg.user-menu-ext.lucide {
    width: 14px;
    height: 14px;
    padding: 0;
    background: transparent;
    color: var(--text-muted);
    margin-left: auto;
}

/* "Sair" continua vermelho inteiro (texto + pastilha), como antes */
.user-menu-list .logout-item a svg.lucide,
.mrow--danger svg.lucide {
    --ic-fg: var(--ic-red); --ic-bg: var(--ic-red-bg);
}

/* Ícone-botão do tema no menu mobile não é item de lista: fica como está */
.mrow svg#theme-icon.lucide {
    padding: 0;
    background: transparent;
    width: 20px;
    height: 20px;
}

/* -----------------------------------------------------------------------------
   3) CONTEXTOS SÓ COM COR — rótulos pequenos, sem pastilha
   -------------------------------------------------------------------------- */
.stat-card span svg.lucide,
.profile-sub-section .form-group svg.lucide,
.user-info-header .status-badge svg.lucide,
.kyc-slot__hint svg.lucide,
.wallet-chip svg.lucide {
    color: var(--ic-fg, currentColor);
}