/* Compatibilidade dos componentes customizados do Trader com o tema Vuexy. */
[data-bs-theme="dark"] .bi-card,
[data-bs-theme="dark"] .sc-card,
[data-bs-theme="dark"] .sc-kpi,
[data-bs-theme="dark"] .proc-card,
[data-bs-theme="dark"] .filter-pill {
  background-color: var(--bs-paper-bg) !important;
  border-color: var(--bs-border-color) !important;
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .kpi-today {
  background-color: rgba(var(--bs-primary-rgb), .09) !important;
  border-color: rgba(var(--bs-primary-rgb), .45) !important;
}

[data-bs-theme="dark"] .kpi-value,
[data-bs-theme="dark"] .kpi-value-sm,
[data-bs-theme="dark"] .section-title,
[data-bs-theme="dark"] .sc-title,
[data-bs-theme="dark"] .sc-kpi .value,
[data-bs-theme="dark"] .sc-section-title,
[data-bs-theme="dark"] .score-range-value,
[data-bs-theme="dark"] .proc-title,
[data-bs-theme="dark"] .risk-value,
[data-bs-theme="dark"] .strategy-guide h6,
[data-bs-theme="dark"] .invest-title,
[data-bs-theme="dark"] .invest-card .section-title,
[data-bs-theme="dark"] .invest-card .kpi-value,
[data-bs-theme="dark"] .accordion-clean .accordion-button:not(.collapsed) {
  color: var(--bs-heading-color) !important;
}

[data-bs-theme="dark"] .kpi-label,
[data-bs-theme="dark"] .kpi-detail,
[data-bs-theme="dark"] .operations-table-hint,
[data-bs-theme="dark"] .filters-grid .form-label,
[data-bs-theme="dark"] .sc-sub,
[data-bs-theme="dark"] .sc-muted,
[data-bs-theme="dark"] .sc-kpi .label,
[data-bs-theme="dark"] .weight-help,
[data-bs-theme="dark"] .score-range-meta,
[data-bs-theme="dark"] .proc-meta,
[data-bs-theme="dark"] .risk-kicker,
[data-bs-theme="dark"] .risk-help,
[data-bs-theme="dark"] .invest-subtitle,
[data-bs-theme="dark"] .section-subtitle {
  color: var(--bs-secondary-color) !important;
}

[data-bs-theme="dark"] .filter-check,
[data-bs-theme="dark"] .proc-switch-label,
[data-bs-theme="dark"] .form-label,
[data-bs-theme="dark"] .recommended-reference,
[data-bs-theme="dark"] .strategy-guide p,
[data-bs-theme="dark"] .strategy-guide li {
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .trade-detail-box,
[data-bs-theme="dark"] .strategy-guide,
[data-bs-theme="dark"] .weight-card,
[data-bs-theme="dark"] .kpi-card,
[data-bs-theme="dark"] .bg-lighter,
[data-bs-theme="dark"] .accordion-clean .accordion-button:not(.collapsed) {
  background-color: rgba(var(--bs-body-bg-rgb), .72) !important;
  border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] #operationsTable,
[data-bs-theme="dark"] #operationsTable tbody,
[data-bs-theme="dark"] #operationsTable td {
  color: var(--bs-body-color);
  background-color: transparent;
}

[data-bs-theme="dark"] #operationsTable thead th,
[data-bs-theme="dark"] .sc-table thead th {
  background-color: var(--bs-paper-bg) !important;
  color: var(--bs-secondary-color) !important;
  border-color: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] #operationsTable > tbody > tr:hover > * {
  --bs-table-bg-state: rgba(var(--bs-primary-rgb), .09);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] .input-group-text,
[data-bs-theme="dark"] .select2-selection,
[data-bs-theme="dark"] .flatpickr-input {
  background-color: var(--bs-body-bg) !important;
  border-color: var(--bs-border-color) !important;
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .form-control::placeholder {
  color: var(--bs-secondary-color) !important;
  opacity: .8;
}

[data-bs-theme="dark"] .flatpickr-calendar,
[data-bs-theme="dark"] .flatpickr-months .flatpickr-month,
[data-bs-theme="dark"] .flatpickr-weekdays,
[data-bs-theme="dark"] .flatpickr-days {
  background: var(--bs-paper-bg) !important;
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .flatpickr-day,
[data-bs-theme="dark"] .flatpickr-weekday,
[data-bs-theme="dark"] .flatpickr-current-month,
[data-bs-theme="dark"] .flatpickr-current-month input.cur-year {
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .flatpickr-day:hover {
  background: rgba(var(--bs-primary-rgb), .16) !important;
  border-color: rgba(var(--bs-primary-rgb), .25) !important;
}

[data-bs-theme="dark"] .apexcharts-text,
[data-bs-theme="dark"] .apexcharts-legend-text,
[data-bs-theme="dark"] .apexcharts-title-text {
  fill: var(--bs-body-color) !important;
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .apexcharts-gridline,
[data-bs-theme="dark"] .apexcharts-xaxis line,
[data-bs-theme="dark"] .apexcharts-yaxis line {
  stroke: var(--bs-border-color) !important;
}

[data-bs-theme="dark"] .apexcharts-tooltip,
[data-bs-theme="dark"] .apexcharts-tooltip-title,
[data-bs-theme="dark"] .apexcharts-xaxistooltip,
[data-bs-theme="dark"] .apexcharts-menu {
  background: var(--bs-paper-bg) !important;
  border-color: var(--bs-border-color) !important;
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .apexcharts-toolbar svg {
  fill: var(--bs-secondary-color) !important;
}

[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .accordion-item,
[data-bs-theme="dark"] .accordion-button {
  background-color: var(--bs-paper-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

/* Notificações do app: posição e acabamento consistentes em todas as telas. */
.app-toast-container {
  right: max(0px, env(safe-area-inset-right)) !important;
  bottom: max(0px, env(safe-area-inset-bottom)) !important;
  width: min(100%, 420px);
  pointer-events: none;
}

.app-toast-container .toast {
  width: 100%;
  max-width: 390px;
  margin-left: auto;
  pointer-events: auto;
  border: 0;
  box-shadow: 0 .5rem 1.5rem rgba(34, 48, 62, .22);
}

.app-toast-container .toast-header .icon-base { flex: 0 0 auto; }

/*
 * Camada responsiva do Trader
 * --------------------------------------------------------------------------
 * Tudo abaixo é aplicado somente em celulares. O layout de desktop permanece
 * intacto, inclusive espaçamentos, grids, tabelas e dimensões de gráficos.
 */
@media (max-width: 767.98px) {
  :root {
    --trader-mobile-gutter: .875rem;
    --trader-mobile-radius: .875rem;
    --trader-mobile-touch: 2.75rem;
  }

  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    -webkit-text-size-adjust: 100%;
    touch-action: manipulation;
  }

  /* Estrutura principal e navegação */
  .layout-page,
  .content-wrapper,
  .container-xxl,
  .container-fluid {
    min-width: 0 !important;
  }

  .container-xxl.container-p-y,
  .container-fluid.container-p-y {
    padding: .875rem var(--trader-mobile-gutter) 5.25rem !important;
  }

  .layout-navbar {
    min-height: 3.75rem !important;
    padding-inline: .75rem !important;
  }

  .layout-navbar .layout-menu-toggle {
    margin-right: .35rem !important;
  }

  .layout-navbar .nav-link.btn-icon,
  .layout-navbar .layout-menu-toggle .nav-link {
    width: 2.625rem !important;
    min-width: 2.625rem !important;
    height: 2.625rem !important;
  }

  .layout-navbar .navbar-nav-right,
  .layout-navbar #navbar-collapse {
    min-width: 0;
  }

  .layout-navbar .navbar-search-wrapper {
    display: none !important;
  }

  .layout-navbar .navbar-nav > .nav-item {
    margin-inline: 0 !important;
  }

  .navbar-dropdown .dropdown-menu {
    position: fixed !important;
    top: 4.25rem !important;
    right: var(--trader-mobile-gutter) !important;
    left: var(--trader-mobile-gutter) !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - 5.25rem);
    overflow: auto;
  }

  .dropdown-shortcuts-list,
  .dropdown-notifications-list {
    max-height: calc(100dvh - 15rem) !important;
  }

  /* Ritmo visual: cards, títulos e conteúdo */
  .row.g-5,
  .row.g-6,
  .bi-shell,
  .sc-shell,
  .invest-shell {
    --bs-gutter-x: 0 !important;
    --bs-gutter-y: .875rem !important;
  }

  .card,
  .bi-card,
  .sc-card,
  .rank-card,
  .risk-card,
  .invest-card,
  .proc-card {
    border-radius: var(--trader-mobile-radius) !important;
  }

  .card-body,
  .bi-card .card-body,
  .sc-card .card-body,
  .invest-card .card-body {
    padding: 1rem !important;
  }

  h1,
  .h1 { font-size: 1.55rem !important; }

  h2,
  .h2 { font-size: 1.4rem !important; }

  h3,
  .h3 { font-size: 1.25rem !important; }

  h4,
  .h4,
  .card-title,
  .sc-title { font-size: 1.125rem !important; }

  h5,
  .h5,
  .section-title { font-size: 1rem !important; }

  .text-muted,
  .text-body-secondary,
  .sc-sub,
  .sc-muted,
  .kpi-detail,
  .section-subtitle {
    overflow-wrap: anywhere;
  }

  /* Flex containers de cabeçalho e barras de ação */
  .card-body > .d-flex.justify-content-between,
  .bi-card .card-body > .d-flex.justify-content-between,
  .sc-card .card-body > .d-flex.justify-content-between,
  .invest-card .card-body > .d-flex.justify-content-between {
    align-items: stretch !important;
  }

  .card-body > .d-flex.justify-content-between > *,
  .bi-card .card-body > .d-flex.justify-content-between > *,
  .sc-card .card-body > .d-flex.justify-content-between > *,
  .invest-card .card-body > .d-flex.justify-content-between > * {
    min-width: 0;
  }

  .card-body > .d-flex.justify-content-between > .d-flex,
  .bi-card .card-body > .d-flex.justify-content-between > .d-flex,
  .sc-card .card-body > .d-flex.justify-content-between > .d-flex,
  .invest-card .card-body > .d-flex.justify-content-between > .d-flex {
    width: 100%;
    justify-content: flex-start !important;
  }

  /* Controles confortáveis para toque */
  .btn:not(.btn-icon):not(.btn-xs) {
    min-height: var(--trader-mobile-touch);
    white-space: normal;
  }

  .btn-sm:not(.btn-icon) {
    min-height: 2.5rem;
  }

  .form-control,
  .form-select,
  .input-group-text,
  .select2-selection {
    min-height: var(--trader-mobile-touch) !important;
    font-size: 1rem !important;
  }

  input[type="checkbox"].form-check-input,
  input[type="radio"].form-check-input {
    min-width: 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
  }

  .input-group > .btn {
    min-width: var(--trader-mobile-touch);
  }

  form.row > [class*="col-"],
  form.row > [class*="col-md-"],
  form.row > [class*="col-lg-"] {
    min-width: 0;
  }

  /* KPIs em duas colunas; o último ocupa a largura quando necessário */
  .kpi-grid,
  .stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .75rem !important;
  }

  .kpi-grid > *,
  .stats-grid > * {
    min-width: 0;
  }

  .kpi-grid .card-body,
  .kpi-card,
  .sc-kpi {
    padding: .875rem !important;
  }

  .kpi-value,
  .kpi-value-sm,
  .sc-kpi .value {
    font-size: 1.25rem !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere;
  }

  /* Tabelas continuam completas e ganham rolagem previsível */
  .table-responsive,
  .operations-table-wrap,
  .rank-table {
    width: calc(100% + 2rem);
    max-width: calc(100% + 2rem);
    margin-inline: -1rem;
    padding-inline: 1rem;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .table-responsive table,
  .operations-table-wrap table,
  .rank-table table {
    min-width: 700px;
    font-size: .8125rem;
  }

  .table-responsive th,
  .table-responsive td,
  .operations-table-wrap th,
  .operations-table-wrap td,
  .rank-table th,
  .rank-table td {
    padding: .7rem .6rem !important;
    white-space: nowrap;
  }

  .table-responsive th:first-child,
  .table-responsive td:first-child,
  .operations-table-wrap th:first-child,
  .operations-table-wrap td:first-child,
  .rank-table th:first-child,
  .rank-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--bs-paper-bg);
  }

  /* Modais usam toda a tela útil e mantêm ações sempre acessíveis */
  .modal {
    padding: 0 !important;
  }

  .modal-dialog,
  .modal-dialog-centered,
  .modal-dialog-scrollable,
  .modal-lg,
  .modal-xl {
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh;
    min-height: 100dvh;
    margin: 0 !important;
  }

  .modal-content {
    min-height: 100dvh;
    max-height: 100dvh;
    border: 0 !important;
    border-radius: 0 !important;
  }

  .modal-header {
    padding: max(1rem, env(safe-area-inset-top)) 1rem .875rem !important;
    align-items: flex-start !important;
  }

  .modal-header > div {
    min-width: 0;
    padding-right: .5rem;
  }

  .modal-title {
    font-size: 1.1rem !important;
    overflow-wrap: anywhere;
  }

  .modal-body {
    padding: 1rem !important;
    overscroll-behavior: contain;
  }

  .modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .625rem;
    padding: .75rem 1rem max(.75rem, env(safe-area-inset-bottom)) !important;
    background: var(--bs-paper-bg);
  }

  .modal-footer > * {
    width: 100% !important;
    margin: 0 !important;
  }

  .modal-footer > .d-flex {
    grid-column: 1 / -1;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Gráficos e áreas visuais não extrapolam a tela */
  canvas,
  svg,
  .apexcharts-canvas,
  .apexcharts-svg,
  .tradingview-widget-container,
  [id*="Chart"],
  [id*="chart"] {
    max-width: 100% !important;
  }

  .apexcharts-legend {
    max-width: 100%;
    overflow-x: auto;
  }

  /* Scanner: filtros e pesos ocupam a largura disponível */
  .filter-chip-grid {
    grid-template-columns: 1fr !important;
  }

  #scanner_results_card .card-body > .d-flex > .d-flex,
  #scanner_results_card .card-body > .d-flex > div,
  #scanner_controls_form,
  #scanner_apply_form > .row .d-flex {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-wrap: wrap !important;
  }

  #scanner_controls_form > input,
  #scanner_controls_form > select {
    flex: 1 1 7rem;
    min-width: 0;
  }

  #scanner_controls_form > .btn {
    flex: 1 1 auto;
  }

  #scannerRunsAccordion,
  #scannerRunsAccordion .accordion-item,
  #scannerRunsAccordion .accordion-header,
  #scannerRunsAccordion .accordion-button {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  #scannerRunsAccordion .accordion-button {
    flex-wrap: wrap;
    gap: .4rem;
    padding: .875rem;
    white-space: normal;
  }

  #scannerRunsAccordion .accordion-button::after {
    margin-left: auto;
  }

  .filter-check-wrap,
  .filter-check {
    min-width: 0;
  }

  .weight-card,
  .strategy-guide {
    padding: .875rem !important;
  }

  /* Logs: mantém conteúdo técnico legível sem quebrar a página */
  pre,
  code,
  .log-output,
  #log-output {
    max-width: 100%;
    overflow: auto;
    white-space: pre;
    -webkit-overflow-scrolling: touch;
  }

  /* Toasts não cobrem a navegação inferior do aparelho */
  .app-toast-container {
    right: var(--trader-mobile-gutter) !important;
    bottom: max(var(--trader-mobile-gutter), env(safe-area-inset-bottom)) !important;
    left: var(--trader-mobile-gutter) !important;
    width: auto !important;
  }

  .app-toast-container .toast {
    max-width: none;
  }
}

@media (max-width: 389.98px) {
  .kpi-grid,
  .stats-grid {
    grid-template-columns: 1fr !important;
  }

  .modal-footer,
  .modal-footer > .d-flex {
    grid-template-columns: 1fr !important;
  }
}