/* Important declarations in this layer override the unlayered legacy page skins. */
@layer dashboard-controls {
  [data-dashboard-dust] {
    display:inline-flex!important; align-items:center!important; justify-content:center!important;
    flex:none!important; gap:7px!important; width:auto!important; min-width:0!important;
    height:32px!important; min-height:32px!important; padding:0!important;
    border:0!important; border-radius:8px!important;
    background:transparent!important; color:#8b859b!important;
    font:400 12px/18px Saans,Arial,sans-serif!important; letter-spacing:0!important;
    text-transform:none!important; white-space:nowrap!important; cursor:pointer!important;
    box-shadow:none!important; user-select:none!important; opacity:1!important;
    transition:color 120ms!important;
  }
  [data-dashboard-dust]:hover { border:0!important; background:transparent!important; box-shadow:none!important; color:white!important }
  [data-dashboard-dust][data-dust-active="true"] { color:white!important }
  [data-dashboard-dust]:focus-visible { outline:1px solid #b6a2ff!important; outline-offset:3px!important }
  [data-dashboard-dust]::before,[data-dashboard-dust]::after { display:none!important }
  [data-dashboard-dust] > .dashboard-dust-switch { display:block!important; position:relative!important; flex:none!important; width:40px!important; height:24px!important; min-width:40px!important; padding:0!important; margin:0!important; border:1px solid #494553!important; border-radius:16px!important; box-sizing:border-box!important; background:#24212e!important; box-shadow:none!important; transition:background var(--motion,180ms),border-color var(--motion,180ms)!important }
  [data-dashboard-dust] > .dashboard-dust-switch::before { display:none!important }
  [data-dashboard-dust] > .dashboard-dust-switch::after { content:""!important; display:block!important; position:absolute!important; left:3px!important; top:3px!important; width:16px!important; height:16px!important; border:0!important; border-radius:50%!important; background:#8b859b!important; box-shadow:none!important; transform:translateX(0)!important; transition:transform var(--motion,180ms),background var(--motion,180ms)!important }
  [data-dashboard-dust]:hover > .dashboard-dust-switch { background:#302c3a!important; border-color:#635d70!important }
  [data-dashboard-dust][data-dust-active="true"] > .dashboard-dust-switch { background:#173c40!important; border-color:#2b9397!important }
  [data-dashboard-dust][data-dust-active="true"] > .dashboard-dust-switch::after { transform:translateX(16px)!important; background:#35ffff!important }
  [data-dashboard-dust][data-dust-active="true"]:hover > .dashboard-dust-switch { background:#1c494d!important; border-color:#4ac4c6!important }
  [data-dashboard-dust] :is(.dashboard-dust-icon,.dust-switch-knob,.liq-dust-switch-knob) { display:none!important }
  [data-dashboard-dust] :is(.dust-pill-label,.liq-dust-pill-label) { color:inherit!important; font:inherit!important; letter-spacing:0!important }
  [data-dashboard-dust][hidden],[data-dashboard-dust][data-dust-hidden="true"] { display:none!important }
  :is(col,th)[data-dashboard-chain-column],td[data-dashboard-chain-cell] { width:80px!important; min-width:80px!important; max-width:80px!important; box-sizing:border-box!important }
  col[data-dashboard-chain-fluid] { width:var(--dashboard-chain-width)!important }
  :is(th[data-dashboard-chain-column],td[data-dashboard-chain-cell]) { text-align:center!important }
  td[data-dashboard-chain-cell] { vertical-align:middle!important }
  td[data-dashboard-chain-cell][data-dashboard-chain-anchor] { vertical-align:top!important }
  td[data-dashboard-chain-cell] img { position:relative!important; top:var(--dashboard-chain-offset,0px)!important }
  th[data-dashboard-chain-column] :is(button,.th-content) { justify-content:center!important }
  [data-dashboard-chain-cell] :is(.chain-badge,.pf-chain-chip,.pf-lp-chain,.chain,.supply-health-chain-badge) { display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:0!important; width:auto!important; min-width:0!important; padding:0!important; margin:0!important; border:0!important; background:none!important; box-shadow:none!important }
  [data-dashboard-chain-cell] .dashboard-chain-label { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; clip-path:inset(50%)!important; white-space:nowrap!important; border:0!important }
  @media(prefers-reduced-motion:reduce){[data-dashboard-dust],[data-dashboard-dust] > .dashboard-dust-switch,[data-dashboard-dust] > .dashboard-dust-switch::after{transition:none!important}}
}

@layer dashboard-controls {
  /* Equivalent filters keep the DOLO Holders toolbar dimensions. */
  .odolo-page .toolbar .dd-btn { height:36px!important; min-height:36px!important; padding-top:0!important; padding-bottom:0!important; box-sizing:border-box!important }
  main .dolo-empty-state { display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:6px!important; min-height:132px!important; text-align:center!important }
  main .dolo-empty-state>strong { font:500 14px/20px Saans,Arial,sans-serif!important; color:#fff!important }
  main .dolo-empty-state>span { font:400 12px/18px Saans,Arial,sans-serif!important; color:var(--fg-3,#8b85ad)!important }
  .assets-page .assets-table-wrap:has(.assets-empty-row) { height:auto!important }
  .assets-page .assets-empty-row>td { height:132px!important }
  [data-dashboard-update] { font:400 12px/18px Saans,Arial,sans-serif!important; letter-spacing:normal!important }
  main table [data-dashboard-sort-control] { display:inline-flex!important; align-items:center!important; justify-content:inherit!important; gap:4px!important; min-height:32px!important; padding:0!important; border:0!important; border-radius:4px!important; background:transparent!important; color:inherit!important; font:inherit!important; letter-spacing:inherit!important; cursor:pointer!important; vertical-align:middle!important }
  main table [data-dashboard-sort-control]:focus-visible { outline:2px solid rgba(174,168,202,.65)!important; outline-offset:2px!important }
}

/* Desktop tables fit their card; small screens retain the native scroll layout. */
@layer dashboard-controls {
  @media(min-width:1000px) {
    .section :is(.holders-table,.liquidity-table),
    .vedolo-page :is(#holders-table,#exits-table,#early-unlock-table,#position-activity-table,#claimable-table,.holder-drilldown-table),
    .odolo-page :is(#tbl-cb,#tbl-latest-ex,#tbl-latest-pair,#tbl-ex),
    .assets-page #tbl,
    .tvl-page #supply-health-table,
    .portfolio-page :is(.pf-borrow-positions,.pf-exercise-table),
    .borrow-page :is(#positions-table,#liquidation-history-table,.sim-atrisk-table) { min-width:0!important; width:100%!important }
  }
  @media(min-width:1000px) and (max-width:1280px) {
    .section :is(.holders-table,.liquidity-table) :is(th,td),
    .vedolo-page :is(#holders-table,#exits-table,#early-unlock-table,#position-activity-table,#claimable-table) :is(th,td),
    .odolo-page :is(#tbl-cb,#tbl-latest-ex,#tbl-latest-pair,#tbl-ex) :is(th,td),
    .tvl-page #supply-health-table :is(th,td),
    .portfolio-page .pf-exercise-table :is(th,td) { padding-left:6px!important; padding-right:6px!important }
    .section :is(.holders-table,.liquidity-table) th,
    .vedolo-page :is(#holders-table,#exits-table,#early-unlock-table,#position-activity-table,#claimable-table) th,
    .odolo-page :is(#tbl-cb,#tbl-latest-ex,#tbl-latest-pair,#tbl-ex) th,
    .tvl-page #supply-health-table th,
    .portfolio-page :is(.pf-borrow-positions,.pf-exercise-table) th { white-space:normal!important; overflow-wrap:normal!important }
    .vedolo-page .holder-drilldown-table :is(th,td) { padding-left:4px!important; padding-right:4px!important }
    .vedolo-page .holder-drilldown-table .detail-sort-control { white-space:normal!important }
    .vedolo-page .holder-drilldown-table .flow-source-tag { min-width:0!important }
    .vedolo-page #early-unlock-table .holder-drilldown-table col:nth-child(2) { width:15%!important }
    .vedolo-page #early-unlock-table .holder-drilldown-table col:nth-child(5) { width:10%!important }
    .vedolo-page #early-unlock-table .holder-drilldown-table col:nth-child(7) { width:11.5%!important }
    .vedolo-page #early-unlock-table .holder-drilldown-table col:nth-child(8) { width:10.5%!important }
    .section .holders-table .wallet-name { flex-wrap:wrap!important; white-space:normal!important }
    .section .liquidity-table .pair { white-space:normal!important }
    .vedolo-page #claimable-table .rank { width:auto!important; min-width:0!important }
    .vedolo-page :is(#claimable-table,#position-activity-table) col { width:auto!important }
    .vedolo-page #claimable-table col:nth-child(1) { width:5%!important }
    .vedolo-page #claimable-table col:nth-child(2) { width:20%!important }
    .vedolo-page #claimable-table col:nth-child(3) { width:16%!important }
    .vedolo-page #claimable-table col:nth-child(4) { width:14%!important }
    .vedolo-page #claimable-table col:nth-child(5) { width:11%!important }
    .vedolo-page #claimable-table col:nth-child(6) { width:13%!important }
    .vedolo-page #claimable-table col:nth-child(7) { width:10%!important }
    .vedolo-page #claimable-table col:nth-child(8) { width:11%!important }
    .vedolo-page #position-activity-table col:nth-child(1) { width:40px!important }
    .vedolo-page #position-activity-table col:nth-child(2) { width:152px!important }
    .vedolo-page #position-activity-table col:nth-child(3) { width:142px!important }
    .vedolo-page #position-activity-table col:nth-child(n+4) { width:calc((100% - 334px) / 4)!important }
    .vedolo-page #position-activity-table .flow-source-tag { min-width:0!important }
    .vedolo-page #position-activity-table .activity-position-main { max-width:100%;overflow:hidden;text-overflow:ellipsis }
    .portfolio-page .pf-borrow-positions col[data-column="account"] { width:14%!important }
    .portfolio-page .pf-borrow-positions col[data-column="health"] { width:16%!important }
    .portfolio-page .pf-borrow-positions col[data-column="emode"] { width:12%!important }
    .portfolio-page .pf-borrow-positions col[data-column="spacer"] { width:0!important }
    .portfolio-page .pf-borrow-positions col:is([data-column="collateral"],[data-column="debt"]) { width:calc(29% - 40px)!important }
    .borrow-page #positions-table :is(th,td):nth-child(3) { padding-left:clamp(0px,calc(var(--borrow-hf-width,153px) - 108px),40px)!important }
    .borrow-page #positions-table :is(th,td):nth-child(4) { padding-left:0!important; padding-right:0!important }
    .portfolio-page .pf-sort-button,
    .earn-page .earn-lending-table .sort-header-button { white-space:normal!important }
    .earn-page .earn-lending-table :is(th,td)[data-column="health"] { padding-left:0!important; padding-right:0!important }
    .earn-page .earn-lending-table :is(th,td)[data-column="details"] { padding-left:0!important; padding-right:0!important }
  }
}

/* Open filter chevrons share the white state used by DOLO Holders. */
@layer dashboard-controls {
  .supply-activity-type-filter.open .supply-activity-type-chevron,
  :is(.chain-filter,.risk-dropdown).open .trigger-chevron,
  [aria-expanded="true"] > svg.trigger-chevron { color:white!important; stroke:currentColor!important }
}

/* Keep intrinsic token/address controls within their responsive column budgets. */
@layer dashboard-controls {
  @media(min-width:1000px) and (max-width:1200px) {
    .section .liquidity-table .token-amount { max-width:100%!important; gap:6px!important }
    .section .liquidity-table .token-amount>span { min-width:0!important; white-space:normal!important }
  }
  @media(min-width:1000px) and (max-width:1280px) {
    .vedolo-page #claimable-table .claimable-expired-cell .holder-value { white-space:normal!important }
    .vedolo-page #early-unlock-table .holder-drilldown-table .early-unlock-value { white-space:normal!important }
  }
  @media(max-width:1100px) {
    .rewards-page .rw-live th .sort-header-button,
    .rewards-page .rw-live th .sort-header-button>span { white-space:normal!important }
    .rewards-page .rw-live td.ends-col { white-space:normal!important }
  }
  @media(max-width:999px) {
    .earn-page .earn-lending-table { min-width:900px!important }
    .earn-page .earn-lending-table :is(th,td):is([data-column="health"],[data-column="details"]) { padding-left:0!important; padding-right:0!important }
    .borrow-page #positions-table>thead>tr>th:nth-child(3)>.col-header-group { width:100%!important; max-width:100%!important; flex-wrap:wrap!important; justify-content:center!important }
    .borrow-page #positions-table>thead>tr>th:nth-child(3) .borrow-sort-header { max-width:100%!important; white-space:normal!important }
  }
  /* Anchor the accessible disclosure label inside the table scrollport. */
  .odolo-page #tbl-ex>thead>tr>th:last-child { position:relative!important }
}

/* DOLO Holders is the shared typography and identity-control reference. */
@layer dashboard-controls {
  :root { --dashboard-title-size:20px; --dashboard-title-gap:12px; --dashboard-count-size:12px }
  @media(max-width:1200px) { :root { --dashboard-title-size:18px; --dashboard-title-gap:8px } }
  @media(max-width:600px) { :root { --dashboard-title-size:17px; --dashboard-count-size:10px } }
  :is(.section-heading .title-group>h2,.card-title>h2,.donut-title>h2,.exit-title-row>h3,
      .earn-section-title,.liquidation-table-title-row,.borrow-earnings-title>h2,
      .supply-table-heading>h3,.supply-activity-heading>h3,.rewards-page .section-heading-left>h2,
      .revenue-section-title-line>.panel-title,.revenue-page .title-group>h2,
      .veborrow-wallet-title,.history-page .title-group>h2) {
    font:500 var(--dashboard-title-size)/1.3 Saans,Arial,sans-serif!important;
    color:var(--text,#fff)!important; letter-spacing:-.35px!important;
  }
  :is(.section-heading .title-group,.card-title:has(>h2),.donut-title:has(>h2),.exit-title-row,
      .earn-supply-header,.earn-lending-header,.earn-past-header,.liquidation-table-title-row,
      .borrow-earnings-title,.supply-table-heading>h3,.supply-activity-heading>h3,
      .rewards-page .section-heading-left,.revenue-section-title-line,
      .revenue-page .title-group,.veborrow-wallet-heading,.history-page .title-group) {
    align-items:baseline!important; column-gap:var(--dashboard-title-gap)!important; flex-wrap:wrap!important;
  }
  :is(.section-heading .title-group>.count,.card-title>.count-badge,.donut-title>.count-badge,
      .exit-title-row>.count-badge,.earn-section-count,.header-count,.borrow-earnings-count,
      .rewards-page .section-note,.veborrow-wallet-count-badge,.history-page #history-count,.vedolo-page #lockedRangeBadge) {
    font:400 var(--dashboard-count-size)/1.45 Saans,Arial,sans-serif!important;
    color:var(--muted,#8b85ad)!important; letter-spacing:normal!important; text-transform:none!important;
    min-height:0!important; height:auto!important; padding:0!important; margin:0!important;
    border:0!important; background:none!important; box-shadow:none!important;
  }
  :is(.card-title,.title-group,.veborrow-wallet-heading,.borrow-earnings-title)
  >:is(.tvl-activity-info,.history-scope-info,.rv-info,.borrow-earnings-info) {
    margin-left:calc(6px - var(--dashboard-title-gap))!important; align-self:center!important;
  }
  main table>thead>tr>th { font-family:Saans,Arial,sans-serif!important; font-size:14px!important; letter-spacing:.21px!important }
  main table>thead>tr>th:is(.sorted,.sort-active,.active,[aria-sort="ascending"],[aria-sort="descending"]) { font-weight:500!important }
  .tvl-page #supply-health-table>tbody>.supply-health-row>td { font-weight:500!important; letter-spacing:.21px!important }
  .tvl-page #supply-health-table>tbody>.supply-health-row>td.num { color:var(--text,#fff)!important }
  .rewards-page .rw-sort-arrow,
  .tvl-page #supply-health-card .supply-health-table .sort-arrow,
  .tvl-page #supply-health-card .supply-health-table .sort-arrow svg { width:16px!important; min-width:16px!important; height:16px!important }
  .tvl-page #supply-health-table th[aria-sort="ascending"] .sort-arrow { transform:rotate(180deg)!important }
  .section .flow-half .wallet-name { font-size:14px!important }

  .borrow-page :is(#positions-table,#liquidation-history-table,.sim-atrisk-table) .known-address-sub { gap:3px!important }
  .borrow-page :is(#positions-table,#liquidation-history-table,.sim-atrisk-table) .known-address-sub>.addr-tooltip-wrap { margin-right:4px!important }
  :is(.borrow-page #borrow-earnings-card,.tvl-page #tvl-activity-card) a.debank-link img { opacity:.8!important }
  :is(.borrow-page #borrow-earnings-card,.tvl-page #tvl-activity-card) a.debank-link:is(:hover,:focus-visible) img { opacity:1!important; filter:brightness(1.25)!important }
  :is(.borrow-page,.earn-page) #unified-tooltip { transition:none!important }

  .vedolo-page :is(#locks-table,#unlocks-table) .wallet-primary-line>.wallet-tx-meta { font:400 12px/18px Saans,Arial,sans-serif!important; letter-spacing:normal!important }
  .vedolo-page #early-unlock-table .early-unlock-lock-value { font:400 12px/18px Saans,Arial,sans-serif!important; letter-spacing:0!important }
  :is(.vedolo-page .holder-drilldown-table,.odolo-page .ex-detail-table)>tbody>tr>td,
  .vedolo-page .holder-drilldown-table :is(.holder-value,.holder-position-id,.holder-detail-lock,.early-unlock-value,.early-remaining,.early-position-id),
  .odolo-page .ex-detail-table .bal-val { font:500 14px/20px Saans,Arial,sans-serif!important; letter-spacing:.21px!important }
  .vedolo-page #holders-table .holder-drilldown-table>tbody>tr>td:first-child,
  .odolo-page .ex-detail-table .ex-detail-rank { font-weight:400!important }
  .vedolo-page .holder-drilldown-table :is(.early-position-id,.holder-position-id) { padding:0!important; border:0!important; box-shadow:none!important }
  @media(min-width:1000px) and (max-width:1280px) {
    .vedolo-page #early-unlock-table .holder-drilldown-table>tbody>tr>td:first-child { white-space:normal!important }
  }
  :is(.vedolo-page .holder-drilldown-table,.odolo-page .ex-detail-table)>tbody>tr>td { transition:background-color 60ms ease-out!important }
  :is(.vedolo-page .holder-drilldown-table,.odolo-page .ex-detail-table)>tbody>tr:not(:has(>td[colspan])):hover>td,
  .odolo-page #tbl-ex>tbody>.ex-row-open:hover>td { background:rgba(139,133,173,.16)!important }
}