/* H00dle Frontend V7.1 — presentation and responsive layer only. */

/* Claim buttons are neutral by default; lime only when claimable amount exists. */
#claimH00Btn,
#claimTSLABtn{
  width:100%;
  min-height:40px;
  padding:10px 12px!important;
  border:1px solid rgba(214,254,80,.28)!important;
  background:transparent!important;
  color:#a8b69a!important;
  box-shadow:none!important;
  transform:none!important;
  transition:background .16s ease,color .16s ease,border-color .16s ease,transform .12s ease!important;
}
#claimH00Btn:not(:disabled):hover,
#claimTSLABtn:not(:disabled):hover{
  background:transparent!important;
  color:#dcebd1!important;
  border-color:rgba(214,254,80,.48)!important;
  box-shadow:none!important;
  transform:none!important;
}
#claimH00Btn.claim-ready,
#claimTSLABtn.claim-ready{
  background:var(--lime)!important;
  color:#050805!important;
  border-color:var(--lime)!important;
  font-weight:700!important;
}
#claimH00Btn.claim-ready:hover,
#claimTSLABtn.claim-ready:hover{
  background:var(--lime)!important;
  color:#050805!important;
  border-color:var(--lime)!important;
  transform:translateY(-1px)!important;
}
#claimH00Btn:disabled,
#claimTSLABtn:disabled{
  opacity:.4!important;
  cursor:not-allowed!important;
}

/* Wallet values are balances, sidebar rewards remain pending/claimable. */
.wallet-balance-caption{
  margin-top:3px;
  color:#65705d;
  font-size:8px;
  line-height:1.35;
}

/* V7.1 tier data readability. */
.tier .tier-row b[data-v71-value="true"]{color:#f1ffe8!important}
.tier:hover .tier-row b[data-v71-value="true"],
.tier.selected .tier-row b[data-v71-value="true"]{color:#050805!important}

/* Unknown on-chain job state is deliberately non-actionable. */
.nft .status.checking,
.worker-card .status.checking{
  color:var(--amber)!important;
  background:transparent!important;
}
.nft[data-v6-locked="true"]{cursor:default!important}
.nft[data-v6-locked="true"]:hover{transform:none!important}
.worker-item[data-job-state="checking"]{
  opacity:.46!important;
  pointer-events:none!important;
}

/* Keep NFT previews compact. Viewport/browser zoom changes column count, not card size. */
.nft-grid{
  grid-template-columns:repeat(auto-fill,minmax(168px,188px))!important;
  justify-content:start!important;
  align-items:start!important;
}
.nft{
  width:100%!important;
  min-width:0!important;
}
.nft .art{
  width:100%!important;
  aspect-ratio:1/1!important;
}

/* Mobile: header wraps instead of crushing navigation/actions. */
@media(max-width:800px){
  header{
    position:sticky!important;
    top:0;
    height:auto!important;
    min-height:0!important;
    padding:12px 14px!important;
    display:grid!important;
    grid-template-columns:1fr auto!important;
    grid-template-areas:
      "brand actions"
      "nav nav";
    gap:11px 12px!important;
  }
  header .brand{grid-area:brand;min-width:0}
  header .actions{grid-area:actions;justify-self:end;gap:6px!important}
  header .nav{
    grid-area:nav;
    width:100%;
    display:grid!important;
    grid-template-columns:repeat(3,1fr)!important;
    gap:4px!important;
    border-top:1px solid rgba(214,254,80,.08);
    padding-top:7px;
  }
  .nav button{
    width:100%;
    min-width:0;
    min-height:40px!important;
    padding:9px 4px!important;
    font-size:8px!important;
    line-height:1.3!important;
    letter-spacing:.45px!important;
    white-space:nowrap;
  }
  .home-link,
  .wallet-btn{
    min-height:36px!important;
    padding:9px 9px!important;
    font-size:7px!important;
  }

  .shell{display:block!important;min-height:0!important}
  .shell>aside:first-child{
    padding:18px 14px!important;
    border-right:0!important;
    border-bottom:1px solid rgba(214,254,80,.09)!important;
  }
  .left-sidebar-content{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:0!important;
  }
  main{padding:20px 14px 28px!important;overflow:visible!important}

  .hero{min-height:0!important;padding:28px 0 24px!important;margin-bottom:28px!important}
  .hero h1{font-size:clamp(22px,7vw,30px)!important;line-height:1.25!important}
  .hero p{font-size:12px!important;line-height:1.65!important;max-width:none!important}

  .stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;margin-bottom:30px!important}
  .stat{min-width:0!important;padding:16px 12px!important}
  .stat .v{font-size:30px!important}

  .section-head{display:block!important;padding-bottom:12px!important}
  .section-note{margin-top:7px!important;text-align:left!important;max-width:none!important}

  .nft-grid{
    grid-template-columns:repeat(auto-fill,minmax(150px,180px))!important;
    justify-content:start!important;
    gap:12px!important;
  }
  .nft .nft-line{display:block!important}
  .nft .status{margin-top:7px!important;display:inline-block!important;padding-left:0!important}
  .nft .actions{display:grid!important;grid-template-columns:1fr!important}
  .nft .actions button{width:100%!important;min-height:38px}

  .tiers{display:grid!important;grid-template-columns:1fr!important;border:0!important;gap:12px!important}
  .tier{
    width:100%;
    min-height:0!important;
    padding:20px 16px!important;
    border:1px solid rgba(214,254,80,.11)!important;
  }
  .tier .tier-role{min-height:0!important}
  .tier .tier-row{grid-template-columns:minmax(90px,1fr) auto!important}

  .workbench{grid-template-columns:1fr!important;gap:16px!important}
  .worker-list{max-height:none!important}
  .workers-grid{grid-template-columns:1fr!important}
  .worker-card .profile-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  .staking-toolbar-clean{width:100%!important}
  .staking-actions{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%!important}
  .staking-actions button{width:100%!important}
  .staking-actions #stakeSelectedBtn{grid-column:1/-1}
  .staking-selected-count{align-self:flex-end!important;margin-top:4px!important}

  #claimPanel.sidebar-rewards{padding-bottom:18px!important}
  #claimPanel.sidebar-rewards>div:last-child{grid-template-columns:1fr 1fr!important;gap:12px!important}
  #claimPanel.sidebar-rewards>div:last-child>div{min-width:0!important}
}

@media(max-width:480px){
  header .brand-name{font-size:10px!important}
  .mark{width:38px!important;height:38px!important}
  .home-link{display:none!important}
  .nft-grid{
    grid-template-columns:repeat(auto-fill,minmax(148px,180px))!important;
    justify-content:start!important;
  }
  .stats{grid-template-columns:1fr 1fr!important}
  .staking-actions{grid-template-columns:1fr!important}
  .staking-actions #stakeSelectedBtn{grid-column:auto}
  #claimPanel.sidebar-rewards>div:last-child{grid-template-columns:1fr!important}
}

/* Off-day Job Market state: dark/inverted lime instead of the active lime button. */
#startJobBtn[aria-disabled="true"]{
  opacity:1!important;
  background:#18210f!important;
  color:#9fbf45!important;
  border:1px solid #35461d!important;
  box-shadow:inset 0 0 0 1px rgba(214,254,80,.03)!important;
  cursor:not-allowed!important;
}