/* ============================================================================
   KOMPETE LABS — UI Polish + Responsive layer  (visual only)
   Loaded AFTER style.css / legacy.css / makeover.css. Purely cosmetic:
   spacing, hierarchy, focus states, touch targets, mobile navigation drawer,
   table scroll affordances and responsive stacking. Nothing here changes
   markup semantics, data, events, filters, sorts, or behaviour.
   To revert: remove the single <link> to this file (and the mobile-nav
   markup + mobilenav.js) in templates/index.html.
   ========================================================================== */

/* ── Accessibility: consistent keyboard focus everywhere ──────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.nav-btn:focus-visible,
.act-tab:focus-visible,
.rec-tab:focus-visible,
.ms-trigger:focus-visible,
.home-cta-btn:focus-visible,
.uc-tab:focus-visible,
.dev-card:focus-visible,
.footer-code:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  border-radius:6px;
}
/* Never leave a bare default outline where we've themed focus */
:focus:not(:focus-visible){outline:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* ── Numeric columns: keep figures on one line & aligned ──────────────────── */
th[style*="right"], td[style*="right"],
.act-th-right, .act-td-right, .act-price{white-space:nowrap}

/* Make clickable rows visually obvious (cursor already set in JS on some) */
.user-list-row, .act-row[role="button"], tr[onclick], .clickable-row{cursor:pointer}

/* ============================================================================
   Mobile navigation drawer  (activates <=900px; desktop untouched)
   ========================================================================== */
.mobile-nav-toggle{display:none}
#nav-scrim{display:none}

.mobile-nav-toggle{
  align-items:center;justify-content:center;
  width:42px;height:42px;flex:0 0 auto;padding:0;
  background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);
  color:var(--text);cursor:pointer;transition:border-color .15s var(--ease),background .15s var(--ease);
}
.mobile-nav-toggle:hover{border-color:var(--border-strong);background:var(--elevated)}
.mnav-bars{position:relative;width:18px;height:12px;display:block}
.mnav-bars span{position:absolute;left:0;right:0;height:2px;background:currentColor;border-radius:2px;
  transition:transform .2s var(--ease),opacity .15s var(--ease),top .2s var(--ease)}
.mnav-bars span:nth-child(1){top:0}
.mnav-bars span:nth-child(2){top:5px}
.mnav-bars span:nth-child(3){top:10px}
body.mnav-open .mnav-bars span:nth-child(1){top:5px;transform:rotate(45deg)}
body.mnav-open .mnav-bars span:nth-child(2){opacity:0}
body.mnav-open .mnav-bars span:nth-child(3){top:5px;transform:rotate(-45deg)}

@media (max-width:900px){
  /* Guard against any accidental sideways scroll of the whole page */
  html,body{overflow-x:hidden;max-width:100%}

  /* Stable single-row header (nav is now an off-canvas drawer, not in flow) */
  :root{--header:58px}
  header{height:var(--header) !important;flex-wrap:nowrap !important;gap:10px;padding:0 14px}
  .header-right{display:none}

  .mobile-nav-toggle{display:inline-flex;margin-left:auto}
  body.mnav-open header{z-index:310}          /* keep the toggle (X) above scrim */

  /* Scrim */
  #nav-scrim{
    display:block;position:fixed;inset:0;z-index:290;
    background:rgba(5,7,11,.6);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
    opacity:0;pointer-events:none;transition:opacity .2s var(--ease);
  }
  body.mnav-open #nav-scrim{opacity:1;pointer-events:auto}
  body.mnav-open{overflow:hidden}

  /* Nav -> slide-in drawer from the right */
  nav{
    position:fixed;top:0;right:0;z-index:300;
    height:100vh;height:100dvh;width:min(320px,86vw);
    display:flex;flex-direction:column;align-items:stretch;gap:4px;
    background:var(--surface);border-left:1px solid var(--border-strong);
    box-shadow:var(--shadow-3);
    padding:calc(var(--header) + 12px) 12px 24px;
    margin:0;overflow-y:auto;overflow-x:hidden;
    transform:translateX(100%);transition:transform .24s var(--ease);
    -webkit-mask-image:none;mask-image:none;
  }
  body.mnav-open nav{transform:none}

  /* Drawer items: full-width, tappable, labelled (override icon-only rule) */
  .nav-btn{
    width:100%;justify-content:flex-start;gap:11px !important;
    font-size:14px !important;font-weight:600;color:var(--muted);
    padding:12px 12px !important;min-height:46px;border-radius:var(--r-sm);
  }
  .nav-btn::before{width:18px !important;height:18px !important;opacity:.9}
  .nav-btn:hover{color:var(--text)}
  .nav-btn.active{background:var(--accent-dim);color:#EAF3FF;box-shadow:inset 3px 0 0 var(--accent)}
  body.dev-unlocked .dev-only{width:100%}
}

/* ============================================================================
   Table readability + horizontal-scroll affordance (mobile)
   Uses the CSS "scroll shadow" trick: side covers scroll with content and
   uncover a soft shadow only while there is more to scroll sideways.
   ========================================================================== */
@media (max-width:900px){
  .table-wrap, .uc-table-wrap, .act-table-wrap{
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    background:
      linear-gradient(to right, var(--surface) 24%, rgba(14,17,24,0)) left center/26px 100% no-repeat,
      linear-gradient(to left,  var(--surface) 24%, rgba(14,17,24,0)) right center/26px 100% no-repeat,
      radial-gradient(farthest-side at 0 50%,   rgba(0,0,0,.42), rgba(0,0,0,0)) left center/13px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.42), rgba(0,0,0,0)) right center/13px 100% no-repeat;
    background-attachment:local, local, scroll, scroll;
  }
  /* Roomier rows + guaranteed legible column widths on wide data tables */
  table tbody td, table thead th{padding:10px 12px}
  #pa-table{min-width:900px}
  #sl-table{min-width:840px}
  #sets-table{min-width:640px}
  #tf-table{min-width:560px}
  .act-table{min-width:520px}
  .uc-table{min-width:440px}

  /* Shorten monospace wallet addresses so they don't stretch rows */
  .act-addr{display:inline-block;max-width:118px;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;vertical-align:bottom}
}

/* ============================================================================
   Global mobile ergonomics: full-width inputs, 44px targets, no iOS zoom
   ========================================================================== */
@media (max-width:640px){
  .view{padding:calc(var(--header) + 14px) 12px 44px}

  /* 16px text inputs stop iOS Safari from auto-zooming on focus */
  input[type=text],input[type=number],input[type=password],select,textarea{font-size:16px}

  /* Comfortable tap targets */
  button,.nav-btn,.ms-trigger,.act-tab,.rec-tab,.uc-select,select{min-height:40px}

  /* Search / wallet bars: input full-width, button stacks beneath */
  .search-bar{flex-direction:column;gap:8px;max-width:none}
  .search-bar input{width:100%}
  .search-bar button,#user-search-btn,#legacy-search-btn,#opp-go{width:100%;min-height:44px}
}
@media (max-width:400px){
  .view{padding:calc(var(--header) + 12px) 10px 40px}
}

/* ============================================================================
   Item Inventory toolbar — stack cleanly, keep every control usable
   ========================================================================== */
@media (max-width:640px){
  #view-item .item-toolbar2{padding:0 10px}
  #view-item .tb-row{gap:8px}
  #view-item .tb-search{flex:1 1 100%;min-width:0}
  #view-item .toolbar-search{height:40px}
  #view-item #item-sort{flex:1 1 100%;height:40px}
  #view-item #item-count{margin-left:0;flex:1 1 100%;text-align:left;padding:2px 0}
  #view-item .tb-filters{gap:8px}
  #view-item .ms-trigger{height:40px;flex:1 1 46%;justify-content:space-between}
  #view-item .tb-range{height:40px;flex:1 1 46%}
  #view-item .tb-range input{width:100%;min-width:0}
  #view-item .tb-check{height:40px;flex:1 1 46%}
  #view-item .tb-fair{flex:1 1 100%}
  #view-item .tb-fair .tb-fair-check{flex:1}
}
/* Multiselect dropdowns must never punch through the viewport edge */
@media (max-width:900px){
  .ms-dropdown{max-width:min(300px, calc(100vw - 24px))}
  #view-item .tb-fair-pop{width:min(280px, calc(100vw - 24px));right:0}
}

/* Active-filter chips: clearer, obviously removable */
.item-active-tags:not(:empty){margin:2px auto 12px;max-width:1240px;display:flex;flex-wrap:wrap;gap:6px}

/* ============================================================================
   Price Alerts — stack the settings + filter bars on mobile
   ========================================================================== */
@media (max-width:760px){
  #view-pricealerts #pa-app > div{gap:8px !important}
  #view-pricealerts #pa-mode,
  #view-pricealerts #pa-webhook,
  #view-pricealerts #pa-search,
  #view-pricealerts .pa-filter{width:100% !important;min-width:0 !important;flex:1 1 100% !important;box-sizing:border-box}
  #view-pricealerts #pa-save-webhook,
  #view-pricealerts #pa-logout{flex:1 1 auto;min-height:40px}
  #view-pricealerts label[style]{width:100%}
  #view-pricealerts #pa-login{margin:40px auto;padding:0 4px}
}

/* ============================================================================
   Activity — tabs / tiles / timeframe on mobile
   ========================================================================== */
@media (max-width:620px){
  .act-tiles{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:18px}
  .act-tile{padding:12px 14px}
  .act-tile-val{font-size:19px}
  .act-tabs{gap:2px}
  .act-tab{padding:8px 11px;font-size:12.5px}
  .act-tabs-right{margin-left:0;width:100%;flex-wrap:wrap;gap:8px;padding-bottom:8px}
  .act-tabs-right .input-clear-wrap{flex:1 1 100%}
  .act-search-input{width:100%;box-sizing:border-box}
  .act-select{flex:1 1 auto}
}

/* ============================================================================
   Undercutooors — filters, wallet checker, result rows on mobile
   ========================================================================== */
@media (max-width:600px){
  .uc-page-header{flex-direction:column;align-items:flex-start;gap:6px}
  .uc-filters{flex-direction:column;align-items:stretch;gap:8px}
  .uc-filters .uc-select,.uc-filters .input-clear-wrap,#uc-search{width:100%;box-sizing:border-box}
  .uc-myitems-card-row{flex-direction:column;align-items:stretch;gap:8px}
  .uc-myitems-card-row .input-clear-wrap{width:100%}
  .uc-myitems-btn{width:100%;min-height:44px}
}

/* ============================================================================
   Sets / Limited Time / Tickets & FAME — stack their toolbars on mobile
   ========================================================================== */
@media (max-width:640px){
  #view-sets .item-toolbar,
  #view-shoplimited .item-toolbar,
  #view-ticketsfame .item-toolbar{flex-direction:column;align-items:stretch;gap:8px}
  #view-sets .item-toolbar > *,
  #view-shoplimited .item-toolbar > *,
  #view-ticketsfame .item-toolbar > *{width:100% !important;align-self:auto !important;box-sizing:border-box}
  #view-sets .item-toolbar h2,
  #view-shoplimited .item-toolbar h2,
  #view-ticketsfame .item-toolbar h2{margin-bottom:2px}
  #view-sets #sets-go{min-height:44px}
  #view-ticketsfame .ms-trigger{justify-content:space-between}
}

/* ============================================================================
   Legacy Optimiser / Opportunities / Rank Movers — headings + inputs
   ========================================================================== */
@media (max-width:640px){
  #view-legacy .search-section h1,
  #view-opportunities h1,
  #view-movers h1{font-size:20px}
  #view-legacy .legacy-wrap,
  #view-opportunities .opp-wrap,
  #view-movers .movers-wrap{padding-left:2px;padding-right:2px}
  #opp-input,#legacy-wallet-input{width:100%;box-sizing:border-box}
}

/* ============================================================================
   Logs — long lines wrap instead of forcing a wide page
   ========================================================================== */
@media (max-width:760px){
  #view-logs .logs-wrap,#logs-wrap{overflow-x:auto}
  #view-logs pre,#logs-wrap pre,#logs-wrap code,.log-line{
    white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
}

/* ============================================================================
   Modals — fit the viewport, scroll internally, no clipped buttons
   ========================================================================== */
@media (max-width:640px){
  .modal{padding:10px}
  .modal-content{max-height:92vh;padding:16px 14px}
  .uc-modal-box{max-height:90vh;width:calc(100vw - 20px)}
  .modal-header{gap:12px}
  .modal-header img{width:60px;height:60px}
  .modal-title{font-size:17px}
  .modal-content table{min-width:100%}
  .modal .table-wrap,.uc-modal-body{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* ============================================================================
   Small desktop / tablet spacing polish (non-mobile, no layout change)
   ========================================================================== */
@media (min-width:901px) and (max-width:1200px){
  .view{padding-left:22px;padding-right:22px}
}

/* Empty & loading states read as intentional, not broken (desktop + mobile) */
.loading{display:flex;align-items:center;justify-content:center;gap:10px;
  color:var(--muted);padding:44px 20px;font-size:14px}
.no-results,.placeholder{line-height:1.6}

/* Primary vs secondary/destructive button intent (visual only) */
#pa-logout{color:var(--muted)}
#pa-logout:hover{color:var(--danger);border-color:rgba(242,100,114,.4)}

/* ============================================================================
   Post-review fixes
   ========================================================================== */

/* #6 — Undercutooors popup: sticky column headers.
   .uc-modal-body is the scroll container; style.css's `.uc-modal-thead th`
   out-specifies the global sticky rule, so the header scrolled away and rows
   slid underneath. Re-assert sticky with a solid bg (desktop + mobile). */
.uc-modal-body{padding-top:0}
.uc-modal-thead th{
  position:sticky;top:0;z-index:3;
  background:var(--surface);padding-top:14px;
  box-shadow:inset 0 -1px 0 var(--border);
}

@media (max-width:900px){
  /* The two-panel layout stacks (flex column) but keeps align-items:flex-start,
     so the detail panel shrink-to-fit to its content and blew past the viewport.
     Pin both panels to full width so filters/table size to the screen. */
  #view-user .user-detail-panel,
  #view-user #user-results{width:100%;min-width:0}
  /* #4 — User inventory table stays wide enough to scroll (was squishing to
     fit, leaving nothing to scroll). */
  #user-table{min-width:720px}
}

@media (max-width:640px){
  /* #2 — The clear (×) button must sit inside the field, never cover it.
     In a shrunk flex slot the wrap collapsed and the × sat over the input. */
  .search-bar .input-clear-wrap,
  #view-user .table-filters .input-clear-wrap{flex:1 1 100%;width:100%}
  .input-clear-wrap input{width:100%;padding-right:34px}
  .input-clear-btn{right:8px;width:32px;height:32px;display:flex;align-items:center;justify-content:center}

  /* #3 — User inventory filters: tidy 2-column grid instead of a ragged
     one-per-line stack. Search spans the row; the five dropdowns tile two-up. */
  #view-user .table-filters{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:stretch}
  #view-user .table-filters .input-clear-wrap{grid-column:1 / -1}
  #view-user .table-filters .ms-wrap{width:100%}
  #view-user .table-filters .ms-trigger{width:100%;justify-content:space-between;height:40px}

  /* #5 — "Fairly priced" pill: both joined halves the same height so the
     shared border lines up (check half was 40px, chip half stayed 34px). */
  #view-item .tb-fair .tb-fair-check,
  #view-item .tb-fair .tb-fair-pct{height:40px;box-sizing:border-box;display:inline-flex;align-items:center}
}

/* #8 — Creator's Corner: it shipped with no responsive treatment, so the
   banner row, decorative mosaic/marquee, stats and tier grid collided on
   mobile. Give it a proper stacked layout. */
@media (max-width:760px){
  #creator-wrap{gap:26px;padding:4px 0 40px}
  .cc-section{border-radius:16px}
  .cc-banner{padding:18px 14px;min-height:0}
  .cc-item-mosaic{display:none}                 /* decorative bg overlapping text */
  .cc-banner-content{flex-direction:column;align-items:flex-start;gap:14px}
  .cc-portrait-img,.cc-portrait-placeholder{width:72px;height:72px}
  .cc-identity{min-width:0;width:100%}
  .cc-name{font-size:22px}
  .cc-item-showcase{width:100%}                 /* was 40%, misaligned */
  .cc-stats{margin-left:0;width:100%;gap:8px}
  .cc-stat-pill{flex:1 1 auto;min-width:88px;padding:8px 10px}
  .cc-stat-num{font-size:18px}
  .cc-lb-header{flex-direction:column;align-items:flex-start;gap:2px;padding:14px 16px 10px}
  .cc-tier-cards{grid-template-columns:1fr;gap:12px;padding:14px 16px 18px}
  .cc-fotm{margin:14px 16px;padding:12px 14px}
  /* sticky sub-nav: full-bleed negative margins caused sideways overflow */
  .cc-sticky-nav{margin:-4px 0 22px;padding:8px 12px;border-radius:0}
  .cc-sticky-nav-inner{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .cc-sticky-nav-inner::-webkit-scrollbar{display:none}
}