/*
  Mobile Responsive (InvestIA)

  Correcoes finais carregadas depois do CSS das paginas. O foco aqui e evitar
  overflow horizontal global, deixando scroll apenas nos componentes que precisam
  dele (tabelas e graficos).
*/

@media (max-width: 767.98px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  .layout-wrapper,
  .layout-container,
  .layout-page,
  .content-wrapper {
    max-width: 100vw;
    min-width: 0;
    overflow-x: hidden;
  }

  .container,
  .container-fluid,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    width: 100%;
    max-width: 100%;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
  }

  .row {
    min-width: 0;
  }

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

  .app-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .app-card__header,
  .app-card__body,
  .app-card__footer,
  .app-card__body-scroll {
    max-width: 100%;
    min-width: 0;
  }

  .app-card__header,
  .app-card__footer {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .app-card__body {
    overflow: visible;
  }

  .app-card__value,
  .app-card [data-card-value="true"] {
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
    font-size: clamp(1.3rem, 7vw, 1.85rem);
    line-height: 1.12;
  }

  .app-card--kpi .app-card__value {
    font-size: clamp(1.45rem, 7.5vw, 1.85rem);
  }

  .filter-wrapper,
  .filter-select,
  .filter-clear-btn,
  .period-select {
    max-width: 100%;
    min-width: 0;
  }

  .month-navigator {
    display: grid !important;
    grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem;
    align-items: center;
    width: 100%;
    max-width: 100%;
    height: auto !important;
    min-height: 0 !important;
    padding: 0.5rem !important;
    gap: 0.5rem !important;
  }

  .month-display {
    width: auto !important;
    min-width: 0;
    flex: initial !important;
  }

  .month-nav-btn {
    width: 2.5rem !important;
    height: 2.5rem !important;
    min-width: 0;
  }

  .period-select {
    width: 100% !important;
    padding-right: 1.9rem !important;
    padding-left: 0.75rem !important;
    font-size: 0.9rem !important;
  }

  .filter-label[style*="visibility: hidden"] {
    display: none;
  }

  .navbar-nav-right {
    min-width: 0;
  }

  #layout-navbar .navbar-nav {
    gap: 0.1rem;
  }

  #layout-navbar .nav-link.btn-icon,
  #layout-navbar .dropdown-user .nav-link {
    padding-right: 0.35rem !important;
    padding-left: 0.35rem !important;
  }

  #layout-navbar .dropdown-notifications .dropdown-menu {
    min-width: min(22rem, calc(100vw - 1.5rem)) !important;
    max-width: calc(100vw - 1.5rem) !important;
  }

  .profile-page,
  .account-settings-page {
    max-width: 100%;
  }

  .profile-page h4,
  .account-settings-page h4,
  h4:has(+ .profile-page),
  h4:has(+ .account-settings-page) {
    overflow-wrap: anywhere;
    line-height: 1.25;
  }

  .profile-page .form-control,
  .profile-page .form-select,
  .account-settings-page .form-control,
  .account-settings-page .form-select {
    max-width: 100%;
  }

  .profile-page .avatar-wrapper,
  .profile-page .button-wrapper,
  .account-settings-page code {
    max-width: 100%;
    min-width: 0;
  }

  .account-settings-page code {
    display: inline-block;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .account-settings-page .alert,
  .account-settings-page p,
  .profile-page p,
  .profile-page .text-muted,
  .account-settings-page .text-muted {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 575.98px) {
  .app-card {
    --app-card-padding-x: 0.65rem;
  }

  .app-card__actions {
    flex: 1 1 100%;
    justify-content: stretch !important;
  }

  .app-card__actions > *,
  .app-card__actions .input-group,
  .app-card__actions .form-select,
  .app-card__actions .btn {
    width: 100% !important;
    max-width: 100%;
    margin-left: 0 !important;
  }

  .card-datatable,
  .table-responsive,
  .dataTables_wrapper,
  .app-card .card-datatable.table-responsive {
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  .app-card:has(.card-datatable.table-responsive),
  .settings-page-card:has(.card-datatable.table-responsive),
  #transactionsCard,
  #assetsCard {
    height: min(42rem, calc(100dvh - 2rem)) !important;
    max-height: calc(100dvh - 2rem) !important;
    min-height: 0 !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
    overflow: hidden !important;
  }

  .app-card:has(.card-datatable.table-responsive) .app-card__body,
  .settings-page-card:has(.card-datatable.table-responsive) .app-card__body,
  #transactionsCard .app-card__body,
  #assetsCard .app-card__body {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .app-card .card-datatable.table-responsive,
  .settings-page-card .card-datatable.table-responsive,
  #transactionsCard #transactionsTableScroll.card-datatable.table-responsive,
  #assetsCard #assetsTableScroll.card-datatable.table-responsive {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .app-card .card-datatable.table-responsive .dataTables_wrapper,
  .settings-page-card .card-datatable.table-responsive .dataTables_wrapper {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    min-height: 0 !important;
    height: 100% !important;
  }

  .app-card .card-datatable.table-responsive .dataTables_wrapper > .row:first-of-type,
  .settings-page-card .card-datatable.table-responsive .dataTables_wrapper > .row:first-of-type {
    flex: 0 0 auto !important;
  }

  .app-card .card-datatable.table-responsive .dataTables_wrapper > .row:nth-of-type(2),
  .settings-page-card .card-datatable.table-responsive .dataTables_wrapper > .row:nth-of-type(2) {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .app-card .card-datatable.table-responsive .dataTables_wrapper > .row:last-of-type,
  .settings-page-card .card-datatable.table-responsive .dataTables_wrapper > .row:last-of-type {
    flex: 0 0 auto !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-top: 0.5rem !important;
    border-top: 1px solid var(--datatable-footer-divider, rgba(0, 0, 0, 0.06));
    background: var(--app-card-bg, #fff);
  }

  .dataTables_wrapper {
    padding: 0.75rem !important;
  }

  .dataTables_wrapper table.dataTable th,
  .dataTables_wrapper table.dataTable td,
  .app-card .table th,
  .app-card .table td {
    font-size: 0.82rem;
    padding-right: 0.45rem;
    padding-left: 0.45rem;
  }

  .dataTables_wrapper table.dataTable,
  .app-card .table:not(.table-no-stable) {
    table-layout: auto !important;
    width: max-content !important;
    min-width: 40rem;
  }

  .datatables-transactions {
    min-width: 44rem !important;
  }

  .datatables-credit-cards {
    min-width: 40rem !important;
  }

  .investments-page .datatables-assets {
    min-width: 58rem !important;
  }

  .investments-page #assetsTableScroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }

  .investments-page .datatables-assets td.dtr-control::before,
  .investments-page .datatables-assets th.dtr-control::before,
  .investments-page table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
  .investments-page table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
    display: none !important;
    content: none !important;
  }

  .reconciliation-table,
  #installmentsTable {
    min-width: 54rem !important;
  }

  .dataTables_wrapper table.dataTable th:last-child,
  .dataTables_wrapper table.dataTable td:last-child,
  .app-card .table th:last-child,
  .app-card .table td:last-child {
    position: static !important;
    right: auto !important;
    z-index: auto !important;
    min-width: 6.5rem !important;
    width: 6.5rem !important;
    background: transparent !important;
  }

  .dark-style .dataTables_wrapper table.dataTable th:last-child,
  .dark-style .dataTables_wrapper table.dataTable td:last-child,
  .dark-style .app-card .table th:last-child,
  .dark-style .app-card .table td:last-child {
    background: transparent !important;
  }

  .investments-page .datatables-assets thead th:last-child,
  .investments-page .datatables-assets tbody td:last-child {
    position: static !important;
    right: auto !important;
    z-index: auto !important;
  }

  .app-card .table td:last-child .btn,
  .dataTables_wrapper table.dataTable td:last-child .btn {
    width: 2rem;
    height: 2rem;
    padding: 0.25rem !important;
  }

  .app-card .table td:last-child > .d-flex,
  .dataTables_wrapper table.dataTable td:last-child > .d-flex {
    gap: 0.25rem !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
  }

  .app-card .app-card__footer > .d-flex {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center !important;
    gap: 0.5rem !important;
  }

  .app-card .app-card__footer [id$="DtInfo"],
  .app-card .app-card__footer .text-muted,
  .app-card .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_info {
    display: none !important;
  }

  .app-card .app-card__footer nav,
  .app-card .app-card__footer [id$="DtPaginate"] {
    flex: 1 1 100%;
    min-width: 0;
    text-align: center;
  }

  .app-card .dataTables_wrapper .dataTables_paginate,
  .app-card .app-card__footer .dataTables_paginate {
    width: 100%;
    justify-content: center !important;
    overflow-x: visible !important;
  }

  .app-card .dataTables_wrapper .dataTables_paginate .pagination,
  .app-card .app-card__footer .pagination {
    justify-content: center !important;
    flex-wrap: nowrap !important;
  }

  .app-card .dataTables_wrapper .dataTables_paginate:has(.previous.disabled):has(.next.disabled),
  .app-card .app-card__footer .dataTables_paginate:has(.previous.disabled):has(.next.disabled),
  .app-card .app-card__footer nav:has(.dataTables_paginate:has(.previous.disabled):has(.next.disabled)) {
    display: none !important;
  }

  .dataTables_wrapper .pagination .previous .page-link,
  .dataTables_wrapper .pagination .next .page-link,
  .app-card__footer .pagination .previous .page-link,
  .app-card__footer .pagination .next .page-link,
  .app-card .pagination .page-item:first-child .page-link,
  .app-card .pagination .page-item:last-child .page-link {
    font-size: 0 !important;
    line-height: 1;
  }

  .dataTables_wrapper .pagination .previous .page-link::before,
  .app-card__footer .pagination .previous .page-link::before,
  .app-card .pagination .page-item:first-child .page-link::before {
    content: "<";
    font-size: 0.875rem;
  }

  .dataTables_wrapper .pagination .next .page-link::before,
  .app-card__footer .pagination .next .page-link::before,
  .app-card .pagination .page-item:last-child .page-link::before {
    content: ">";
    font-size: 0.875rem;
  }

  .category-badge,
  .category-select,
  .table .category-badge,
  .table .category-select,
  .datatables-transactions .category-badge,
  .datatables-transactions .category-select,
  .datatables-credit-cards .category-badge,
  .datatables-credit-cards .category-select {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .datatables-transactions .category-badge,
  .datatables-transactions .category-select {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
  }

  .profile-page .app-card,
  .account-settings-page .app-card {
    margin-bottom: 1rem;
  }

  .profile-page .app-card__header,
  .account-settings-page .app-card__header {
    align-items: flex-start;
  }

  .profile-page .d-flex.align-items-start.align-items-sm-center.gap-4 {
    flex-direction: column;
    align-items: center !important;
    gap: 1rem !important;
    text-align: center;
  }

  .profile-page .avatar-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .profile-page .button-wrapper {
    width: 100%;
  }

  .profile-page .button-wrapper .btn,
  .profile-page form > .mt-4 .btn,
  .account-settings-page .btn,
  .account-settings-page form,
  .account-settings-page form .btn {
    width: 100%;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .profile-page form > .mt-4,
  .account-settings-page .d-flex.flex-wrap.align-items-end,
  .account-settings-page .mt-4 {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 0.75rem !important;
  }

  .account-settings-page .d-flex.flex-wrap.align-items-end > div {
    min-width: 0 !important;
    width: 100%;
  }

  .account-settings-page .d-flex.align-items-center {
    align-items: flex-start !important;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .account-settings-page .border.rounded {
    padding: 0.75rem !important;
  }

  .account-settings-page img.img-fluid {
    max-width: min(100%, 240px) !important;
    height: auto;
  }

  .account-settings-page .row > [class*="col-md-"] + [class*="col-md-"],
  .profile-page .row > [class*="col-md-"] + [class*="col-md-"] {
    margin-top: 0.75rem;
  }

  .profile-page .table-responsive,
  .account-settings-page .table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }

  .profile-page .table {
    min-width: 42rem !important;
  }

  #invoicesCard,
  #invoicesCard .app-card__body,
  #invoicesCard .app-card__body-scroll,
  #invoicesCard .tab-content,
  #invoicesCard .tab-pane {
    max-width: 100%;
    min-width: 0;
  }

  #invoicesCard .app-card__body-scroll {
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  #invoicesCard .nav-tabs {
    display: flex;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  #invoicesCard .nav-tabs .nav-item {
    flex: 0 0 auto;
    min-width: 0;
  }

  #invoicesCard .nav-tabs .nav-link {
    max-width: 9.5rem;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #invoicesCard .table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: visible !important;
  }

  #invoicesCard .table {
    min-width: 38rem !important;
  }

  #installmentsCard .table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: visible !important;
  }

  #installmentsCard #installmentsTableBody td[colspan] {
    min-width: min(calc(100vw - 3rem), 22rem) !important;
    max-width: calc(100vw - 3rem);
    white-space: normal !important;
    overflow-wrap: anywhere;
    text-align: center !important;
  }

  .donut-chart-body,
  .expenses-category-chart-card .donut-chart-body,
  .investments-page .investments-distribution-card .donut-chart-body {
    min-height: clamp(260px, 76vw, 320px) !important;
    padding: 0.75rem 0.5rem 1rem !important;
    overflow: visible !important;
  }

  .donut-chart-wrap,
  .donut-chart-mount,
  .expenses-category-chart-card .donut-chart-wrap,
  .expenses-category-chart-card .donut-chart-mount,
  .investments-page .investments-distribution-card .donut-chart-wrap,
  .investments-page .investments-distribution-card .donut-chart-mount {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
  }

  .donut-chart-mount .apexcharts-canvas,
  .donut-chart-mount .apexcharts-svg,
  .expenses-category-chart-card .donut-chart-mount .apexcharts-canvas,
  .expenses-category-chart-card .donut-chart-mount .apexcharts-svg,
  .investments-page .investments-distribution-card .donut-chart-mount .apexcharts-canvas,
  .investments-page .investments-distribution-card .donut-chart-mount .apexcharts-svg {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

.apexcharts-tooltip:has(.donut-distribution-tooltip),
.apexcharts-tooltip.apexcharts-theme-light:has(.donut-distribution-tooltip),
.apexcharts-tooltip.apexcharts-theme-dark:has(.donut-distribution-tooltip) {
  background: #2b2c40 !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.42) !important;
}

.apexcharts-tooltip .donut-distribution-tooltip {
  background: #2b2c40 !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

.apexcharts-tooltip .donut-distribution-tooltip,
.apexcharts-tooltip .donut-distribution-tooltip * {
  color: rgba(255, 255, 255, 0.9) !important;
}

.apexcharts-tooltip .donut-distribution-tooltip .ddc-tooltip-title,
.apexcharts-tooltip .donut-distribution-tooltip .ddc-tooltip-value {
  color: rgba(255, 255, 255, 0.96) !important;
}

.apexcharts-tooltip .donut-distribution-tooltip .ddc-tooltip-muted {
  color: rgba(255, 255, 255, 0.72) !important;
}

  .apexcharts-datalabel-value {
    font-size: clamp(1.25rem, 8vw, 1.65rem) !important;
  }

  .apexcharts-datalabel-label {
    font-size: 0.7rem !important;
  }

  .apexcharts-toolbar {
    right: 0.25rem !important;
    max-width: calc(100% - 0.5rem);
  }

  #momentoFinanceiroRow .moment-header.app-card,
  #momentoFinanceiroRow .moment-header.app-card--panel,
  #momentoFinanceiroRow .moment-header.app-card--auto-height {
    height: auto !important;
    min-height: 0 !important;
    grid-template-rows: auto auto auto !important;
    overflow: visible !important;
  }

  #momentoFinanceiroRow .moment-header .app-card__body,
  #momentoFinanceiroRow .moment-header .app-card__body-scroll {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  #momentoFinanceiroRow .moment-callout,
  #momentoFinanceiroRow .moment-right-stack {
    height: auto !important;
  }

  #momentoFinanceiroRow .moment-callout {
    padding: 0.75rem !important;
  }

  #momentoFinanceiroRow .moment-callout > .d-flex:first-child {
    align-items: flex-start !important;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  #momentoFinanceiroRow .moment-callout > .d-flex:first-child .btn {
    flex: 1 1 100%;
    width: 100%;
  }

  #momentoFinanceiroRow .moment-chart-wrap {
    min-height: 260px !important;
    max-width: 100%;
    overflow: hidden;
  }

  #momentAderenciaDonut,
  #momentAderenciaDonut .apexcharts-canvas,
  #momentAderenciaDonut .apexcharts-svg {
    width: 100% !important;
    max-width: 100% !important;
  }

  #momentoFinanceiroRow .moment-center-value {
    font-size: clamp(1.25rem, 8vw, 1.75rem) !important;
  }

  #momentoFinanceiroRow .moment-center-title {
    font-size: 0.8rem !important;
  }

  .moment-hover-panel {
    min-width: 0 !important;
    max-width: calc(100vw - 2rem) !important;
  }
}