/*
 * nil.css — NIL Hub page responsive polish
 * Scoped to html[data-route="/nil"] — zero bleed to other pages.
 *
 * Fix: on 2560px+ desktops the .app container stretches to fill the full
 * viewport width, creating a "sea of empty" layout with content floating
 * in a void. Cap the whole page wrapper to 1440px max-width and center it
 * so sidebar + content stay together as a composed unit at ultra-wide sizes.
 *
 * Polish bundle (2026-06-09): interactive affordances, modal animation,
 * bid-war hover/focus, icon-search combo in filter bar.
 */

/* ── Modal entrance animation (scoped here, NOT components.css) ── */
@keyframes nil-modalEnter {
  from { opacity: 0; transform: scale(.95) translateY(-20px); }
  to   { opacity: 1; transform: scale(1)  translateY(0); }
}

html[data-route="/nil"] {

  /* ----------------------------------------------------------
     DESKTOP MAX-WIDTH CAP
     ---------------------------------------------------------- */
  .app {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ----------------------------------------------------------
     OFFER / TRADE ACTION BUTTONS
     :hover brightness, :active scale, :focus-visible outline
     ---------------------------------------------------------- */
  .offer-btn,
  .offer-btn-accept,
  .offer-btn-reject,
  .trade-btn,
  .trade-btn-accept,
  .trade-btn-reject,
  .trade-btn-cancel,
  .offer-btn-cancel {
    transition: filter .15s ease, transform .1s ease;
  }

  .offer-btn:hover,
  .offer-btn-accept:hover,
  .offer-btn-reject:hover,
  .trade-btn:hover,
  .trade-btn-accept:hover,
  .trade-btn-reject:hover,
  .trade-btn-cancel:hover,
  .offer-btn-cancel:hover {
    filter: brightness(1.12);
  }

  .offer-btn:active,
  .offer-btn-accept:active,
  .offer-btn-reject:active,
  .trade-btn:active,
  .trade-btn-accept:active,
  .trade-btn-reject:active,
  .trade-btn-cancel:active,
  .offer-btn-cancel:active {
    transform: scale(.98);
  }

  .offer-btn:focus-visible,
  .offer-btn-accept:focus-visible,
  .offer-btn-reject:focus-visible,
  .trade-btn:focus-visible,
  .trade-btn-accept:focus-visible,
  .trade-btn-reject:focus-visible,
  .trade-btn-cancel:focus-visible,
  .offer-btn-cancel:focus-visible {
    outline: 2px solid var(--green-positive, #3DBA6E);
    outline-offset: 2px;
  }

  /* ----------------------------------------------------------
     BID WAR — .bw-btn hover + .bw-input focus
     ---------------------------------------------------------- */
  .bw-btn {
    transition: filter .15s ease;
  }
  .bw-btn:hover:not(:disabled) {
    filter: brightness(1.1);
  }
  .bw-input:focus {
    outline: none;
    border-color: var(--green-positive, #3DBA6E);
    box-shadow: 0 0 0 3px rgba(0,183,255,.2);
  }

  /* ----------------------------------------------------------
     MODAL OVERLAY — entrance animation
     .modal-overlay shown state triggers nil-modalEnter
     ---------------------------------------------------------- */
  .modal-overlay.show > .modal,
  .modal-overlay[style*="flex"] > .modal {
    animation: nil-modalEnter .4s cubic-bezier(.16,1,.3,1) both;
  }

  /* ----------------------------------------------------------
     MARKETPLACE FILTER BAR — icon-search combo
     Wraps the search input in a relative container with a
     16px inline SVG search icon on the left side.
     ---------------------------------------------------------- */
  .nil-search-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
  }

  .nil-search-wrap .nil-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--gray-light, #888);
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }

  .nil-search-wrap .search-box {
    padding-left: 34px;
  }

} /* end html[data-route="/nil"] scope */

/* prefers-reduced-motion: disable nil-modalEnter */
@media (prefers-reduced-motion: reduce) {
  html[data-route="/nil"] .modal-overlay.show > .modal,
  html[data-route="/nil"] .modal-overlay[style*="flex"] > .modal {
    animation: none;
  }
}