/* Inline editors: shared desktop dark treatment, ahead of surface overrides. */
@layer desktop-table-editors {
  @media (min-width: 761px) {
    html:not([data-appearance="light"]) body table tbody tr:is(
      .editing, .stock-row-editing, .editing-new,
      :has(td [contenteditable="true"], td[contenteditable="true"], td input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), td select)
    ) > td {
      background: #102d38 !important;
    }

    html:not([data-appearance="light"]) body table tbody tr:is(
      .editing, .stock-row-editing, .editing-new,
      :has(td [contenteditable="true"], td[contenteditable="true"], td input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), td select)
    ) > td:first-child {
      box-shadow: inset 3px 0 #23dee6 !important;
    }

    html:not([data-appearance="light"]) body table tbody td :is(
      input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="button"]):not([type="submit"]),
      select, textarea, [contenteditable="true"]
    ) {
      box-sizing: border-box !important;
      width: 100% !important;
      min-width: 0 !important;
      max-width: 100% !important;
      height: 36px !important;
      min-height: 36px !important;
      padding: 7px 11px !important;
      border: 1px solid #345563 !important;
      border-radius: 4px !important;
      background: #0b1e27 !important;
      color: #e3edf3 !important;
      font-family: inherit !important;
      font-size: inherit !important;
      font-weight: 400 !important;
      line-height: 20px !important;
      outline: none !important;
      box-shadow: inset 0 1px 2px rgb(0 0 0 / 12%) !important;
      color-scheme: dark;
      transition: border-color 180ms ease, box-shadow 180ms ease;
    }

    html:not([data-appearance="light"]) body table tbody td select {
      appearance: none !important;
      padding-right: 30px !important;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m3 6 5 5 5-5' fill='none' stroke='%23adc7d6' stroke-width='1.5'/%3E%3C/svg%3E") !important;
      background-repeat: no-repeat !important;
      background-position: right 9px center !important;
    }

    html:not([data-appearance="light"]) body table tbody td input::placeholder,
    html:not([data-appearance="light"]) body table tbody td textarea::placeholder {
      color: #8099a7 !important;
      opacity: 1;
    }

    html:not([data-appearance="light"]) body table tbody td :is(input, select, textarea, [contenteditable="true"]):focus {
      border-color: #23dee6 !important;
      box-shadow: 0 0 0 1px rgb(35 222 230 / 18%) !important;
      outline: none !important;
    }

    html:not([data-appearance="light"]) body table tbody td input[type="number"] {
      text-align: right !important;
    }

    /* Legacy editors make the cell itself editable; keep its table geometry. */
    html:not([data-appearance="light"]) body table tbody td[contenteditable="true"] {
      background: #0b1e27 !important;
      color: #e3edf3 !important;
      outline: 1px solid #345563 !important;
      outline-offset: -5px !important;
      border-radius: 4px;
    }
    html:not([data-appearance="light"]) body table tbody td[contenteditable="true"]:focus {
      outline-color: #23dee6 !important;
    }
    @media (prefers-reduced-motion: reduce) {
      html:not([data-appearance="light"]) body table tbody td :is(input, select, textarea) {
        transition: none !important;
      }
    }
  }
}

/* Match Dividends' 12px table content on desktop in both appearances. */
@layer desktop-table-typography {
  @media (min-width: 761px) {
    html body :is(
      #withdrawals-section, #deposits-section,
      #stocks-gains-section, #taxes-section
    ) table :is(tbody, tfoot) :is(
      td, td span:not([aria-hidden="true"]), td strong, td b,
      td a, td small, td label, td input:not([type="checkbox"]), td select
    ) {
      font-size: 12px !important;
    }
  }
}

/* Shared panel and table surface for desktop dark appearance.
   Important layer wins over legacy page rules with repeated ID selectors. */
@layer desktop-panel-surfaces {
  @media (min-width: 761px) {
    html:not([data-appearance="light"]) body :is(
      .panel, .card,
      [class$="-panel"], [class*="-panel "],
      [class$="-card"], [class*="-card "],
      .chart-container, .performance-chart-container,
      .stocks-toolbar, .stocks-action-row, .stocks-table-scroll,
      .deposits-invested-band, .deposits-history-toolbar,
      .deposits-table-pagination, .deposits-history-footer,
      .wd-desktop-toolbar, .wd-desktop-footer, .wd-total-row,
      .dv-desktop-filters, .dividends-page-action-row,
      .allocation-switch-wrapper, .portfolio-summary-strip
    ) {
      background: #0b1e27 !important;
    }

    /* Cover header, body, footer and zebra rows, including sticky cells. */
    html:not([data-appearance="light"]) body :is(
      table, thead, tbody, tfoot, tr, th, td,
      [role="table"], [role="grid"], [role="rowgroup"],
      [role="row"], [role="columnheader"], [role="cell"], [role="gridcell"]
    ) {
      background: #0b1e27 !important;
    }

    /* Keep table interaction states visible on the shared base surface. */
    html:not([data-appearance="light"]) body table tbody tr:hover > td {
      background: color-mix(in srgb, #23dee6 6%, #0b1e27) !important;
    }
    html:not([data-appearance="light"]) body table tbody tr:is(
      .selected, .is-selected, [aria-selected="true"]
    ) > td {
      background: color-mix(in srgb, #23dee6 12%, #0b1e27) !important;
    }
  }
}