/* =============================================================================
   Integração React ↔ design system Phoenix
   Fonte da verdade visual: /design-system/phoenix (theme.min.css).
   Este arquivo NÃO cria estilo novo: só estende o Phoenix a peças de terceiros
   (react-select, widget TradingView) e a estados da aplicação, usando
   exclusivamente os tokens --phoenix-*.
   ============================================================================= */

/* ── Ícones dentro de botões: o clique chega sempre ao botão ─────────────────
   (as ações das linhas leem o id do botão clicado) */
.btn svg,
.btn .svg-inline--fa,
.btn .uil,
.btn [class*="fa-"] { pointer-events: none; }

/* ── react-select (classNamePrefix="rs") com a anatomia do .form-select ───── */
.rs__control {
    min-height: calc(1.49em + 1rem + 2px) !important;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--phoenix-body-color);
    background-color: var(--phoenix-emphasis-bg) !important;
    border: var(--phoenix-border-width) solid var(--phoenix-border-color) !important;
    border-radius: var(--phoenix-border-radius) !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.rs__control--is-focused {
    border-color: var(--phoenix-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--phoenix-primary-rgb), 0.25) !important;
}
.rs__control--is-disabled { opacity: 0.5; }
.rs__value-container { padding: 0 0.5rem 0 1rem !important; }
.rs__single-value,
.rs__input-container { color: var(--phoenix-body-color) !important; }
.rs__placeholder { color: var(--phoenix-tertiary-color) !important; }
.rs__indicator-separator { background-color: var(--phoenix-border-color) !important; }
.rs__indicator { color: var(--phoenix-tertiary-color) !important; }
.rs__indicator:hover { color: var(--phoenix-body-color) !important; }
.rs__menu {
    z-index: 1000 !important;
    margin-top: 0.125rem !important;
    background-color: var(--phoenix-emphasis-bg) !important;
    border: var(--phoenix-border-width) solid var(--phoenix-border-color);
    border-radius: var(--phoenix-border-radius) !important;
    box-shadow: var(--phoenix-box-shadow) !important;
}
.rs__option {
    font-size: 0.8rem;
    color: var(--phoenix-body-color) !important;
    background-color: transparent !important;
}
.rs__option--is-focused { background-color: var(--phoenix-secondary-bg) !important; }
.rs__option--is-selected {
    color: #fff !important;
    background-color: var(--phoenix-primary) !important;
}
.rs__option--is-disabled {
    font-size: 0.64rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--phoenix-tertiary-color) !important;
}
.rs__menu-notice { font-size: 0.8rem; color: var(--phoenix-tertiary-color) !important; }

/* react-select dentro de .input-group: ocupa o espaço de um .form-control */
.input-group > .rs-grouped {
    position: relative;
    flex: 1 1 auto;
    width: 1%;
    min-width: 7rem;
}
.input-group > .rs-grouped .rs__control { border-radius: 0 !important; }
.input-group > .rs-grouped:not(:first-child) .rs__control { margin-left: calc(-1 * var(--phoenix-border-width)); }
.input-group > .rs-grouped .rs__control--is-focused { z-index: 5; position: relative; }

/* ── Tabelas roláveis: cabeçalho fixo sobre a superfície do card ──────────── */
.table-sticky-head thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--phoenix-emphasis-bg);
}

/* ── Widget do TradingView: altura por faixa de tela ─────────────────────── */
.tv-chart { height: 520px; }
@media (max-width: 991.98px) { .tv-chart { height: 440px; } }
@media (max-width: 767.98px) { .tv-chart { height: 380px; } }
@media (max-width: 575.98px) { .tv-chart { height: 320px; } }

/* ── Chat Beholder AI no .support-chat: mensagens em Markdown ─────────────── */
.chat-markdown > :last-child { margin-bottom: 0; }
.chat-markdown p,
.chat-markdown ul,
.chat-markdown ol { margin-bottom: 0.5rem; }
.chat-markdown h1, .chat-markdown h2, .chat-markdown h3,
.chat-markdown h4, .chat-markdown h5, .chat-markdown h6 { font-size: 0.8rem; margin-bottom: 0.5rem; color: inherit; }
.chat-markdown pre,
.chat-markdown code { white-space: pre-wrap; word-break: break-word; }

/* ── Toasts de notificação (WebSocket): acima de tudo, clicáveis ──────────── */
.toast-container.app-toasts { position: fixed; top: calc(var(--phoenix-navbar-top-height) + 1rem); right: 1rem; }
.toast-container.app-toasts .toast { pointer-events: auto; }

/* ── Ícone de moeda sem versão colorida: o monocromático (preto) fica claro no tema escuro ── */
[data-bs-theme="dark"] .coin-icon-mono { filter: invert(1); }