/* Vetra 0.3.1.37b - VS1A Mobile & Theme Cleanup
   Additive presentation correction over approved/live VS1 (0.3.1.37a).
   No marketplace authority, transaction, review, Trust scoring, media ownership,
   Related Items retrieval, or Developer Asset data behavior is replaced here. */

/* --- Listing Detail: one normal desktop scrollbar and clear Related rail --- */
.detail-modal{
  scrollbar-gutter:stable!important;
}
.vetra-related-right{
  transform:none!important;
}

/* --- Completed sales are successful outcomes, not error states --- */
.sold-history-row{
  border-color:rgba(85,214,139,.48)!important;
  background:linear-gradient(145deg,rgba(20,91,57,.28),rgba(8,45,29,.18))!important;
  box-shadow:inset 3px 0 0 rgba(85,214,139,.78)!important;
}
.sold-history-row .moderation-badge,
.dashboard-sold-badge,
.image-badge.sold,
.sold-price-badge,
.asset-sold-status{
  color:#aaf4c8!important;
  border-color:rgba(85,214,139,.52)!important;
  background:rgba(85,214,139,.14)!important;
}
.dashboard-item.dashboard-item-sold{
  border-color:rgba(85,214,139,.42)!important;
  background:linear-gradient(145deg,rgba(31,104,69,.16),rgba(9,43,28,.10))!important;
}
.dashboard-item.dashboard-item-sold>img{
  outline-color:rgba(85,214,139,.48)!important;
}
.sold-listing-banner{
  border-color:rgba(85,214,139,.42)!important;
  background:rgba(85,214,139,.08)!important;
}
.sold-listing-banner strong{color:#72e9a5!important}
.liquidation-table .sold-asset-row td{
  background:color-mix(in srgb,var(--good) 6%,var(--panel))!important;
}
.liquidation-table .sold-asset-row td:first-child{
  background:color-mix(in srgb,var(--good) 9%,var(--panel-2))!important;
}

/* --- Light theme: only the surfaces reported in live testing --- */
html.light .detail-trust-card .trust-panel{
  background:linear-gradient(180deg,#f7fbff,#edf4fb)!important;
  color:#14263b!important;
  border-color:rgba(31,91,151,.18)!important;
}
html.light .detail-trust-card .trust-panel :where(strong,h3,h4){color:#102238!important}
html.light .detail-trust-card .trust-panel :where(span,p,small){color:#536a82!important}
html.light .detail-trust-card .trust-signal{
  color:#1b3d60!important;
  background:#f8fbff!important;
  border-color:rgba(31,101,170,.22)!important;
}
html.light .detail-trust-card .trust-signal.verified{
  color:#17623c!important;
  background:rgba(38,161,96,.08)!important;
  border-color:rgba(38,161,96,.25)!important;
}
html.light .detail-description{color:#334b64!important}
html.light .detail-specs div{color:#52677e!important}
html.light .detail-specs strong{color:#14263b!important}

/* Vetra Snapshot stays on the deliberate dark hero; make its values explicit. */
html.light .hero.card .hero-stat-grid button strong{
  color:#ffffff!important;
  -webkit-text-fill-color:#ffffff!important;
}
html.light .hero.card .hero-stat-grid button span{color:#bed0e4!important}

html.light .device-permissions-panel{
  background:linear-gradient(180deg,#ffffff,#f2f7fc)!important;
  color:#14263b!important;
  border-color:rgba(31,94,157,.20)!important;
  box-shadow:0 10px 30px rgba(32,63,96,.07)!important;
}
html.light .device-permissions-head h3,
html.light .device-permission-copy strong{color:#13253a!important}
html.light .device-permissions-head p:last-child,
html.light .device-permission-copy span,
html.light .device-permissions-note span{color:#5b7188!important}
html.light .device-mode-badge{
  color:#174d7c!important;
  background:rgba(33,128,216,.08)!important;
  border-color:rgba(33,128,216,.25)!important;
}
html.light .device-permission-row{
  background:#f8fbff!important;
  border-color:rgba(31,91,151,.14)!important;
}
html.light .device-permission-icon{background:rgba(33,128,216,.09)!important;color:#176cb5!important}
html.light .device-permission-status.is-allowed,
html.light .device-permission-status.is-ready{color:#17623c!important;background:rgba(38,161,96,.08)!important;border-color:rgba(38,161,96,.25)!important}
html.light .device-permission-status.is-blocked{color:#a42b3d!important;background:rgba(215,52,77,.07)!important;border-color:rgba(215,52,77,.22)!important}
html.light .device-permission-status.is-prompt,
html.light .device-permission-status.is-available{color:#174d7c!important;background:rgba(33,128,216,.07)!important;border-color:rgba(33,128,216,.22)!important}
html.light .device-permissions-note{border-top-color:rgba(31,91,151,.14)!important}
html.light .sold-history-row,
html.light .dashboard-item.dashboard-item-sold{
  border-color:rgba(27,146,81,.34)!important;
  background:linear-gradient(145deg,rgba(225,248,235,.94),rgba(242,252,246,.98))!important;
  color:#173d29!important;
}
html.light .sold-history-row .moderation-badge,
html.light .dashboard-sold-badge,
html.light .sold-price-badge,
html.light .asset-sold-status{
  color:#17643b!important;
  background:rgba(31,158,86,.09)!important;
  border-color:rgba(31,158,86,.28)!important;
}
html.light .sold-listing-banner{
  background:rgba(31,158,86,.07)!important;
  border-color:rgba(31,158,86,.24)!important;
}
html.light .sold-listing-banner strong{color:#17643b!important}

/* --- Phone / tablet stabilization only --- */
@media(max-width:760px){
  .detail-modal{scrollbar-gutter:auto!important}

  /* Gallery stage and image use one geometry. This prevents a taller image from being
     clipped inside the 4:3 stage while still retaining object-fit:contain. */
  .detail-media-column .vetra-gallery-stage{
    aspect-ratio:4/3!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    display:block!important;
  }
  .detail-media-column .vetra-gallery-track{
    height:100%!important;
    min-height:0!important;
    align-items:stretch!important;
  }
  .detail-media-column .vetra-gallery-slide{
    aspect-ratio:auto!important;
    height:100%!important;
    min-height:0!important;
    align-self:stretch!important;
  }
  .detail-media-column .vetra-gallery-slide img,
  .detail-media-column .vetra-gallery-fallback{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:none!important;
    object-fit:contain!important;
    object-position:center center!important;
    background:#060c16!important;
  }

  /* Native fullscreen viewer is pinned to the real viewport and centers media in both axes. */
  dialog#vetraMediaViewer.vetra-media-viewer[open]{
    position:fixed!important;
    inset:0!important;
    margin:0!important;
    padding:0!important;
    width:100vw!important;
    max-width:100vw!important;
    height:100dvh!important;
    max-height:100dvh!important;
    overflow:hidden!important;
    display:grid!important;
    place-items:center!important;
    background:#000!important;
  }
  #vetraMediaViewer .vetra-media-viewer-card{
    position:relative!important;
    inset:auto!important;
    margin:0!important;
    width:100%!important;
    height:100%!important;
    min-height:100dvh!important;
    display:grid!important;
    place-items:center!important;
    overflow:hidden!important;
    background:#000!important;
  }
  #vetraMediaViewer .vetra-media-viewer-card img{
    display:block!important;
    width:auto!important;
    height:auto!important;
    max-width:100vw!important;
    max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom))!important;
    margin:auto!important;
    object-fit:contain!important;
    object-position:center center!important;
  }

  #vetraMediaViewer .modal-close{
    position:absolute!important;
    top:calc(10px + env(safe-area-inset-top))!important;
    right:10px!important;
    margin:0!important;
    z-index:6!important;
  }

  /* Last Related item must clear Vetra's persistent mobile dock/browser safe area. */
  .vetra-related-mobile{
    margin-bottom:0!important;
    padding-bottom:calc(var(--mobile-dock-height,72px) + env(safe-area-inset-bottom) + 32px)!important;
    scroll-margin-bottom:calc(var(--mobile-dock-height,72px) + env(safe-area-inset-bottom) + 32px);
  }
  /* Developer Asset Catalog: preserve the existing table/data/handlers but present each
     row as a readable mobile record. Desktop remains governed by the established table CSS. */
  #developerHubModal .devhub-view[data-devhub-view="assets"] .liquidation-table-shell{
    width:100%!important;
    max-width:100%!important;
    max-height:none!important;
    overflow:visible!important;
    border:0!important;
    background:transparent!important;
  }
  #developerHubModal .devhub-view[data-devhub-view="assets"] .liquidation-table{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    border-collapse:separate!important;
    table-layout:auto!important;
  }
  #developerHubModal .devhub-view[data-devhub-view="assets"] .liquidation-table thead{display:none!important}
  #developerHubModal .devhub-view[data-devhub-view="assets"] .liquidation-table tbody{
    display:grid!important;
    gap:12px!important;
    width:100%!important;
  }
  #developerHubModal .devhub-view[data-devhub-view="assets"] .liquidation-table tbody tr{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:0!important;
    width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
    border:1px solid var(--line)!important;
    border-radius:15px!important;
    background:linear-gradient(180deg,var(--panel-2),var(--panel))!important;
    box-shadow:0 8px 24px rgba(0,0,0,.12)!important;
  }
  #developerHubModal .devhub-view[data-devhub-view="assets"] .liquidation-table tbody td{
    position:static!important;
    display:grid!important;
    grid-template-columns:minmax(76px,.8fr) minmax(0,1.2fr)!important;
    align-items:start!important;
    gap:8px!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    padding:9px 10px!important;
    border:0!important;
    border-top:1px solid var(--line)!important;
    background:transparent!important;
    text-align:left!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    overflow-wrap:anywhere!important;
  }
  #developerHubModal .devhub-view[data-devhub-view="assets"] .liquidation-table tbody td::before{
    color:var(--muted)!important;
    font-size:.68rem!important;
    font-weight:900!important;
    letter-spacing:.055em!important;
    line-height:1.35!important;
    text-transform:uppercase!important;
  }
  #developerHubModal .devhub-view[data-devhub-view="assets"] .liquidation-table tbody td:nth-child(1){
    grid-column:1/-1!important;
    display:block!important;
    padding:12px!important;
    border-top:0!important;
    background:linear-gradient(135deg,rgba(44,139,229,.13),rgba(44,139,229,.035))!important;
  }
  #developerHubModal .devhub-view[data-devhub-view="assets"] .liquidation-table tbody td:nth-child(1)::before{content:none!important}
  #developerHubModal .devhub-view[data-devhub-view="assets"] .liquidation-listing-cell{
    display:block!important;width:100%!important;min-width:0!important
  }
  #developerHubModal .devhub-view[data-devhub-view="assets"] .liquidation-listing-cell .text-btn{
    display:block!important;width:100%!important;max-width:100%!important;padding:0!important;
    color:var(--brand)!important;font-size:.91rem!important;font-weight:900!important;white-space:normal!important;overflow-wrap:anywhere!important
  }
  #developerHubModal .devhub-view[data-devhub-view="assets"] .liquidation-listing-cell small{
    display:block!important;margin-top:4px!important;color:var(--muted)!important;font-size:.7rem!important
  }
  #developerHubModal .devhub-view[data-devhub-view="assets"] .liquidation-table tbody td:nth-child(2)::before{content:"Status"}
  #developerHubModal .devhub-view[data-devhub-view="assets"] .liquidation-table tbody td:nth-child(3)::before{content:"Qty"}
  #developerHubModal .devhub-view[data-devhub-view="assets"] .liquidation-table tbody td:nth-child(4)::before{content:"Market"}
  #developerHubModal .devhub-view[data-devhub-view="assets"] .liquidation-table tbody td:nth-child(5)::before{content:"Ask"}
  #developerHubModal .devhub-view[data-devhub-view="assets"] .liquidation-table tbody td:nth-child(6)::before{content:"Sold"}
  #developerHubModal .devhub-view[data-devhub-view="assets"] .liquidation-table tbody td:nth-child(7)::before{content:"Target"}
  #developerHubModal .devhub-view[data-devhub-view="assets"] .liquidation-table tbody td:nth-child(8)::before{content:"Floor"}
  #developerHubModal .devhub-view[data-devhub-view="assets"] .liquidation-table tbody td:nth-child(9)::before{content:"Storage"}
  #developerHubModal .devhub-view[data-devhub-view="assets"] .liquidation-table tbody td.storage-cell{
    grid-column:1/-1!important;
  }

  /* Saved Knowledge Entries: normal contained phone search rather than a stretched panel. */
  #developerHubModal .knowledge-lab-list-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    align-items:stretch!important;
    gap:10px!important;
    width:100%!important;
    max-width:100%!important;
  }
  #developerHubModal .knowledge-lab-list-head>div{width:100%!important;min-width:0!important}
  #developerHubModal .knowledge-lab-list-head input[data-knowledge-search]{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:44px!important;
    min-height:44px!important;
    padding:.7rem .8rem!important;
    margin:0!important;
    border-radius:11px!important;
  }
}

@media(max-width:430px){
  #developerHubModal .devhub-view[data-devhub-view="assets"] .liquidation-table tbody td{
    grid-column:1/-1!important;
    grid-template-columns:82px minmax(0,1fr)!important;
  }
}