/* Realized P&L desktop layout; mobile keeps its existing presentation. */
@media (max-width: 768px) {
  html body #stocks-gains-section .realized-pl-desktop-title,
  html body #stocks-gains-section .realized-pl-desktop-filters,
  html body #stocks-gains-section .realized-pl-reset-filters {
    display: none !important;
  }
}

@media (min-width: 769px) {
  html body #stocks-gains-section#stocks-gains-section.active {
    --pl-bg: #0b1e27;
    --pl-header: #102530;
    --pl-border: #294451;
    --pl-text: #e8f2f6;
    --pl-muted: #abc0cf;
    --pl-positive: #25e5bd;
    --pl-negative: #ff827e;
    --pl-accent: #23dee6;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 clamp(24px, 3vw, 56px) 48px !important;
    background: #0b171e !important;
  }

  html body #stocks-gains-section#stocks-gains-section > .portfolio-summary-strip {
    max-width: none !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  html body #stocks-gains-section#stocks-gains-section > .realized-pl-desktop-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: none !important;
    gap: 18px 14px !important;
    margin: 12px 0 20px !important;
    padding: 0 !important;
  }

  html body #stocks-gains-section#stocks-gains-section .realized-pl-desktop-title {
    display: none !important;
  }

  html body #stocks-gains-section#stocks-gains-section .realized-pl-desktop-filters {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 14px !important;
  }

  html body #stocks-gains-section#stocks-gains-section .realized-pl-desktop-filters select {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    padding: 0 34px 0 14px !important;
    border: 1px solid var(--pl-border) !important;
    border-radius: 6px !important;
    background: var(--pl-bg) !important;
    color: var(--pl-text) !important;
    font-size: 14px !important;
  }

  html body #stocks-gains-section#stocks-gains-section .realized-pl-reset-filters {
    flex: 0 0 auto !important;
    height: 44px !important;
    padding: 0 12px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--pl-muted) !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  html body #stocks-gains-section#stocks-gains-section #add-stock-gain-btn {
    flex: 0 0 auto !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 22px !important;
    border-radius: 6px !important;
    background: var(--pl-accent) !important;
    color: #082b33 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  html body #stocks-gains-section#stocks-gains-section #delete-selected-stock-gains-btn:not([style*="display: none"]) {
    order: 3 !important;
  }

  html body #stocks-gains-section#stocks-gains-section > .realized-pl-table-scroll {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border: 1px solid var(--pl-border) !important;
    border-radius: 8px !important;
    background: var(--pl-bg) !important;
    overflow-x: auto !important;
  }

  html body #stocks-gains-section#stocks-gains-section #stocks-gains-table {
    width: 100% !important;
    min-width: 1300px !important;
    max-width: none !important;
    margin: 0 !important;
    color: var(--pl-text) !important;
  }

  html body #stocks-gains-section#stocks-gains-section #stocks-gains-table :is(thead, tbody, thead tr, tbody tr) {
    width: 100% !important;
    max-width: none !important;
  }

  html body #stocks-gains-section#stocks-gains-section #stocks-gains-table thead tr,
  html body #stocks-gains-section#stocks-gains-section #stocks-gains-table-body tr {
    grid-template-columns: 4.5% 5% 8% 7.5% 10% 12% 7% 6.5% 11% 11% 9% 8.5% !important;
    border-radius: 0 !important;
  }

  html body #stocks-gains-section#stocks-gains-section #stocks-gains-table thead tr {
    min-height: 54px !important;
    background: var(--pl-header) !important;
  }

  html body #stocks-gains-section#stocks-gains-section #stocks-gains-table-body tr {
    min-height: 48px !important;
    border-top: 1px solid var(--pl-border) !important;
    background: var(--pl-bg) !important;
    box-shadow: none !important;
  }

  html body #stocks-gains-section#stocks-gains-section #stocks-gains-table-body tr:nth-child(even) {
    background: color-mix(in srgb, var(--pl-header) 42%, var(--pl-bg)) !important;
  }

  html body #stocks-gains-section#stocks-gains-section #stocks-gains-table :is(th, td) {
    min-width: 0 !important;
    padding: 8px 10px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--pl-muted) !important;
    font-size: 13px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  html body #stocks-gains-section#stocks-gains-section #stocks-gains-table thead th {
    color: var(--pl-text) !important;
    font-weight: 650 !important;
  }

  html body #stocks-gains-section#stocks-gains-section #stocks-gains-table :is(.column-filter-toggle, .column-filter-menu) {
    display: none !important;
  }

  html body #stocks-gains-section#stocks-gains-section #stocks-gains-table-body td[data-field="symbol"] {
    color: var(--pl-text) !important;
    font-weight: 700 !important;
  }

  html body #stocks-gains-section#stocks-gains-section #stocks-gains-table-body td:is([data-field="realized_gain"], [data-field="net_gain"]) {
    font-weight: 650 !important;
  }

  html body #stocks-gains-section#stocks-gains-section #stocks-gains-table-body td:is([data-field="realized_gain"], [data-field="net_gain"]):is(.amount-positive, .positive) {
    color: var(--pl-positive) !important;
  }

  html body #stocks-gains-section#stocks-gains-section #stocks-gains-table-body td:is([data-field="realized_gain"], [data-field="net_gain"]):is(.amount-negative, .negative) {
    color: var(--pl-negative) !important;
  }
}

@media (min-width: 769px) and (max-width: 1500px) {
  html body #stocks-gains-section#stocks-gains-section .realized-pl-desktop-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    flex-basis: 100% !important;
  }
}

@media (min-width: 769px) {
  html[data-appearance="light"] body #stocks-gains-section#stocks-gains-section.active {
    --pl-bg: #fff;
    --pl-header: #eaf3f8;
    --pl-border: #cedfe8;
    --pl-text: #163449;
    --pl-muted: #557186;
    --pl-positive: #00886e;
    --pl-negative: #c9464c;
    --pl-accent: #23dee6;
    background: #f4f9fc !important;
  }
}