/* Layout only: reuse the live table values, fonts, and theme colors. */
#dashboard-section .dashboard-breakdown-mobile-sort { display: none; }

html body #dashboard-section#dashboard-section#dashboard-section#dashboard-section .dashboard-breakdown-table tbody th.dashboard-breakdown-account {
  position: relative !important;
  padding-left: 17px !important;
}
html body #dashboard-section#dashboard-section#dashboard-section#dashboard-section .dashboard-breakdown-table tbody th.dashboard-breakdown-account::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mobile-deposit-broker-color, #53b6df);
  transform: translateY(-50%);
}

@media (max-width: 760px) {
  html body #dashboard-section#dashboard-section#dashboard-section .dashboard-breakdown {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-content: start !important;
    align-items: center !important;
    column-gap: 8px !important;
  }
  html body #dashboard-section#dashboard-section#dashboard-section .dashboard-breakdown > .dashboard-panel-title {
    grid-column: 1 !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  html body #dashboard-section#dashboard-section#dashboard-section .dashboard-breakdown-mobile-sort {
    display: flex !important;
    grid-column: 2 !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    color: var(--dashboard-secondary) !important;
    font: inherit !important;
  }
  html body #dashboard-section#dashboard-section#dashboard-section .dashboard-breakdown-mobile-sort select {
    min-width: 0 !important;
    max-width: 95px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--dashboard-text) !important;
    font: inherit !important;
  }
  html body #dashboard-section#dashboard-section#dashboard-section .dashboard-breakdown-table-wrap {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin: 10px 0 0 !important;
    overflow: visible !important;
  }
  html body #dashboard-section#dashboard-section#dashboard-section .dashboard-breakdown-table {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
  }
  html body #dashboard-section#dashboard-section#dashboard-section .dashboard-breakdown-table thead { display: none !important; }
  html body #dashboard-section#dashboard-section#dashboard-section .dashboard-breakdown-table tbody { display: block !important; }
  html body #dashboard-section#dashboard-section#dashboard-section .dashboard-breakdown-table tbody tr {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: 6px !important;
    row-gap: 2px !important;
    padding: 4px 0 !important;
    height: auto !important;
    min-height: 0 !important;
    border-bottom: 1px solid var(--dashboard-grid) !important;
  }
  html body #dashboard-section#dashboard-section#dashboard-section .dashboard-breakdown-table tbody tr:last-child { border-bottom: 0 !important; }
  html body #dashboard-section#dashboard-section#dashboard-section .dashboard-breakdown-table tbody :is(th, td) {
    box-sizing: border-box !important;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.2 !important;
    overflow: visible !important;
    padding: 0 !important;
    border: 0 !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }
  html body #dashboard-section#dashboard-section#dashboard-section .dashboard-breakdown-table tbody th:nth-child(1) {
    grid-column: 1 / 3 !important;
    grid-row: 1 !important;
    text-align: left !important;
    overflow-wrap: anywhere !important;
  }
  html body #dashboard-section#dashboard-section#dashboard-section .dashboard-breakdown-table tbody td:nth-child(2) {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    text-align: right !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  html body #dashboard-section#dashboard-section#dashboard-section .dashboard-breakdown-table tbody td:nth-child(n+3) {
    grid-row: 2 !important;
    text-align: left !important;
    overflow-wrap: anywhere !important;
  }
  html body #dashboard-section#dashboard-section#dashboard-section .dashboard-breakdown-table tbody td:nth-child(3) { grid-column: 1 !important; padding-left: 17px !important; }
  html body #dashboard-section#dashboard-section#dashboard-section .dashboard-breakdown-table tbody td:nth-child(4) { grid-column: 2 !important; border-left: 1px solid var(--dashboard-grid) !important; padding-left: 12px !important; }
  html body #dashboard-section#dashboard-section#dashboard-section .dashboard-breakdown-table tbody td:nth-child(5) { grid-column: 3 !important; border-left: 1px solid var(--dashboard-grid) !important; padding-left: 12px !important; }
  html body #dashboard-section#dashboard-section#dashboard-section .dashboard-breakdown-table tbody td:nth-child(n+3)::before { display: block; margin-bottom: 0; font-weight: 400; }
  html body #dashboard-section#dashboard-section#dashboard-section .dashboard-breakdown-table tbody td:nth-child(3)::before { content: 'Invested '; color: var(--dashboard-secondary); }
  html body #dashboard-section#dashboard-section#dashboard-section .dashboard-breakdown-table tbody td:nth-child(4)::before { content: 'P&L '; color: var(--dashboard-secondary); }
  html body #dashboard-section#dashboard-section#dashboard-section .dashboard-breakdown-table tbody td:nth-child(5)::before { content: 'Return'; color: var(--dashboard-secondary); }
  html body #dashboard-section#dashboard-section#dashboard-section .dashboard-breakdown-table tbody td:nth-child(5)::after { content: none; }
  html body #dashboard-section#dashboard-section#dashboard-section .dashboard-breakdown-table tbody .dashboard-breakdown-empty {
    grid-column: 1 / -1 !important;
    text-align: center !important;
  }
}