/* ═══════════════════════════════════════════════════════
   TradeForge — XRPL Wallet & Pass System Styles
   Compact, industrial, utility-based. Never dominant.
   ═══════════════════════════════════════════════════════ */

/* ── Wallet Status Indicator ── */
.tf-wallet-status{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;font-size:12px;font-weight:600;background:rgba(46,49,54,.96);border:1px solid rgba(181,183,185,.10)}
.tf-wallet-status .tf-wallet-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.tf-wallet-status.connected .tf-wallet-dot{background:#27ae60}
.tf-wallet-status.disconnected .tf-wallet-dot{background:rgba(181,183,185,.35)}
.tf-wallet-status .tf-wallet-addr{color:var(--muted);font-family:monospace;font-size:11px;letter-spacing:.02em}
.tf-wallet-status .tf-wallet-label{color:var(--text)}

/* ── Wallet Connect Button ── */
.tf-wallet-connect-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:8px;border:1px solid rgba(140,106,62,.35);background:transparent;color:var(--bronze);font-size:13px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s;letter-spacing:.01em}
.tf-wallet-connect-btn:hover{background:rgba(140,106,62,.08);border-color:rgba(140,106,62,.55)}
.tf-wallet-connect-btn svg{width:14px;height:14px;flex-shrink:0}
.tf-wallet-connect-btn.compact{padding:6px 12px;font-size:12px}
.tf-wallet-connect-btn.compact svg{width:12px;height:12px}

/* ── Wallet Disconnect Button ── */
.tf-wallet-disconnect{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:6px;border:1px solid rgba(181,183,185,.12);background:transparent;color:var(--muted);font-size:11px;cursor:pointer;transition:color .15s,border-color .15s}
.tf-wallet-disconnect:hover{color:#e74c3c;border-color:rgba(231,76,60,.3)}

/* ── Wallet Verify Button ── */
.tf-wallet-verify-btn{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:6px;border:1px solid rgba(39,174,96,.2);background:transparent;color:#27ae60;font-size:11px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s}
.tf-wallet-verify-btn:hover{background:rgba(39,174,96,.06);border-color:rgba(39,174,96,.35)}
.tf-wallet-verify-btn:disabled{opacity:.5;cursor:default}

/* ── Wallet Actions Row ── */
.access-wallet-actions{display:flex;align-items:center;gap:6px}

/* ── Verified Dot Modifier ── */
.access-wallet-connected-dot.verified-dot{background:#27ae60;box-shadow:0 0 4px rgba(39,174,96,.3)}

/* ── Wallet Card (for account/settings) ── */
.tf-wallet-card{background:linear-gradient(180deg,rgba(46,49,54,.96),rgba(46,49,54,.82));border:1px solid rgba(181,183,185,.10);border-radius:14px;padding:20px}
.tf-wallet-card-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px}
.tf-wallet-card-title{font-size:15px;font-weight:700;color:#fff;display:flex;align-items:center;gap:8px}
.tf-wallet-card-title svg{width:16px;height:16px;color:var(--bronze)}
.tf-wallet-card-body{margin:0}
.tf-wallet-card .tf-wallet-detail{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(181,183,185,.06);font-size:13px}
.tf-wallet-card .tf-wallet-detail:last-child{border-bottom:none}
.tf-wallet-card .tf-wallet-detail-label{color:var(--muted)}
.tf-wallet-card .tf-wallet-detail-value{color:var(--text);font-weight:600}
.tf-wallet-card .tf-wallet-detail-value.mono{font-family:monospace;font-size:12px;letter-spacing:.02em}

/* ── Wallet Connect Prompt (empty state) ── */
.tf-wallet-prompt{text-align:center;padding:24px 16px;border:1px dashed rgba(140,106,62,.25);border-radius:12px;background:rgba(140,106,62,.03)}
.tf-wallet-prompt svg{width:28px;height:28px;color:var(--bronze);opacity:.6;margin:0 0 10px}
.tf-wallet-prompt p{font-size:13px;color:var(--muted);margin:0 0 14px;line-height:1.5}

/* ── Pass Cards ── */
.tf-pass-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 20px}
.tf-pass-card{background:linear-gradient(180deg,rgba(46,49,54,.96),rgba(46,49,54,.82));border:1px solid rgba(181,183,185,.10);border-radius:12px;padding:16px;position:relative;transition:border-color .2s}
.tf-pass-card.active{border-color:rgba(140,106,62,.45)}
.tf-pass-card.verified{border-color:rgba(39,174,96,.35)}
.tf-pass-card-tier{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 6px}
.tf-pass-card-name{font-size:16px;font-weight:700;color:#fff;margin:0 0 10px}
.tf-pass-card-state{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:6px;font-size:11px;font-weight:600;letter-spacing:.02em}
.tf-pass-card-state.assigned{background:rgba(140,106,62,.12);color:var(--bronze)}
.tf-pass-card-state.verified{background:rgba(39,174,96,.12);color:#27ae60}
.tf-pass-card-state.locked{background:rgba(181,183,185,.08);color:var(--muted)}
.tf-pass-card-state.upgrade{background:rgba(52,152,219,.08);color:#3498db}
.tf-pass-card-state.inactive{background:rgba(181,183,185,.06);color:rgba(181,183,185,.5)}
.tf-pass-card-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.tf-pass-card-state.assigned .tf-pass-card-dot{background:var(--bronze)}
.tf-pass-card-state.verified .tf-pass-card-dot{background:#27ae60}
.tf-pass-card-state.locked .tf-pass-card-dot{background:var(--muted)}
.tf-pass-card-state.upgrade .tf-pass-card-dot{background:#3498db}
.tf-pass-card-state.inactive .tf-pass-card-dot{background:rgba(181,183,185,.35)}
.tf-pass-card-source{font-size:11px;color:var(--muted);margin:8px 0 0}
.tf-pass-card-action{margin:10px 0 0}

/* ── Pass Source Hint (subtle "via wallet" label) ── */
.tf-pass-source-hint{font-size:10px;color:rgba(39,174,96,.6);font-weight:500;margin-left:4px;letter-spacing:.01em}

/* ── Pass Upgrade Prompt ── */
.tf-upgrade-prompt{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:10px;background:rgba(52,152,219,.05);border:1px solid rgba(52,152,219,.12);margin:0 0 16px}
.tf-upgrade-prompt-icon{width:32px;height:32px;border-radius:8px;background:rgba(52,152,219,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#3498db}
.tf-upgrade-prompt-icon svg{width:16px;height:16px}
.tf-upgrade-prompt-text{flex:1;min-width:0}
.tf-upgrade-prompt-title{font-size:13px;font-weight:700;color:var(--text);margin:0 0 2px}
.tf-upgrade-prompt-desc{font-size:12px;color:var(--muted);line-height:1.4}
.tf-upgrade-prompt-btn{padding:6px 14px;border-radius:6px;border:1px solid rgba(52,152,219,.3);background:transparent;color:#3498db;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s}
.tf-upgrade-prompt-btn:hover{background:rgba(52,152,219,.08)}

/* ── Access Verification Badge ── */
.tf-access-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:6px;font-size:11px;font-weight:600}
.tf-access-badge.verified{background:rgba(39,174,96,.1);color:#27ae60}
.tf-access-badge.pending{background:rgba(243,156,18,.1);color:#f39c12}
.tf-access-badge.unverified{background:rgba(181,183,185,.08);color:var(--muted)}
.tf-access-badge.revoked{background:rgba(231,76,60,.08);color:#e74c3c}
.tf-access-badge-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.tf-access-badge.verified .tf-access-badge-dot{background:#27ae60}
.tf-access-badge.pending .tf-access-badge-dot{background:#f39c12}
.tf-access-badge.unverified .tf-access-badge-dot{background:var(--muted)}
.tf-access-badge.revoked .tf-access-badge-dot{background:#e74c3c}

/* ── Ownership Status Banner ── */
.tf-ownership-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-radius:10px;background:rgba(46,49,54,.96);border:1px solid rgba(181,183,185,.08)}
.tf-ownership-banner.verified{border-color:rgba(39,174,96,.15);background:rgba(39,174,96,.03)}
.tf-ownership-banner.revoked{border-color:rgba(231,76,60,.12);background:rgba(231,76,60,.02)}
.tf-ownership-banner-left{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.tf-ownership-detail{font-size:12px;color:var(--muted);line-height:1.4}
.tf-ownership-nft-count{font-size:11px;color:var(--muted);white-space:nowrap;font-weight:500}

/* ── Inline Ownership Indicator (for dashboards/nav) ── */
.tf-ownership-indicator{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:2px 8px;border-radius:4px}
.tf-ownership-indicator.verified{color:#27ae60;background:rgba(39,174,96,.08)}
.tf-ownership-indicator.platform{color:var(--bronze);background:rgba(140,106,62,.08)}
.tf-ownership-indicator-dot{width:4px;height:4px;border-radius:50%;flex-shrink:0}
.tf-ownership-indicator.verified .tf-ownership-indicator-dot{background:#27ae60}
.tf-ownership-indicator.platform .tf-ownership-indicator-dot{background:var(--bronze)}

/* ── Wallet Connect Modal ── */
.tf-wallet-modal-overlay{position:fixed;inset:0;background:rgba(15,17,20,.7);z-index:9000;display:none;align-items:center;justify-content:center;padding:20px}
.tf-wallet-modal-overlay.open{display:flex}
.tf-wallet-modal{background:var(--graphite);border:1px solid rgba(181,183,185,.12);border-radius:16px;padding:28px 24px;max-width:420px;width:100%;position:relative}
.tf-wallet-modal-close{position:absolute;top:12px;right:12px;background:none;border:none;color:var(--muted);cursor:pointer;padding:4px}
.tf-wallet-modal-close:hover{color:#fff}
.tf-wallet-modal-close svg{width:18px;height:18px}
.tf-wallet-modal h3{font-size:17px;margin:0 0 6px;color:#fff}
.tf-wallet-modal p{font-size:13px;color:var(--muted);margin:0 0 20px;line-height:1.5}
.tf-wallet-modal-input{width:100%;padding:10px 14px;border-radius:8px;border:1px solid rgba(181,183,185,.15);background:rgba(28,30,33,.8);color:var(--text);font-family:monospace;font-size:13px;outline:none;box-sizing:border-box}
.tf-wallet-modal-input:focus{border-color:rgba(140,106,62,.5)}
.tf-wallet-modal-input::placeholder{color:rgba(181,183,185,.35)}
.tf-wallet-modal-actions{display:flex;gap:10px;margin:16px 0 0}
.tf-wallet-modal-hint{font-size:11px;color:var(--muted);margin:12px 0 0;line-height:1.4;opacity:.7}

/* ── Mobile ── */
@media(max-width:640px){
  .tf-pass-grid{grid-template-columns:1fr}
  .tf-wallet-modal{padding:24px 20px;border-radius:12px}
  .tf-upgrade-prompt{flex-direction:column;align-items:flex-start;gap:10px}
  .tf-ownership-banner{flex-direction:column;align-items:flex-start;gap:8px}
  .tf-ownership-banner-left{flex-direction:column;gap:6px}
}
@media(max-width:520px){
  .tf-wallet-card{padding:16px}
  .tf-pass-card{padding:14px}
}