/* START OF wallet.css (Hybrid Breadcrumb + Padded Rings + Synced Blink Version) */
/* ============================================================
   SecureOneBank — Phase 4 Wallet + Portfolio UI
   Unified Premium Dark Theme
============================================================ */

/* Wallet Card Container (used for BOTH cards) */
.wallet-card {
  background: #1a1a1a;
  border: 1px solid #807A23;
  border-radius: 12px;
  padding: 24px;
  margin: 30px auto;
  width: 90%;
  max-width: 700px;
  color: #e6e6e6;
  box-shadow: 0 4px 25px rgba(0,0,0,0.6);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  position: relative;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Title */
.wallet-title {
  font-size: 22px;
  margin-bottom: 20px;
  color: #4DB823;
  text-align: center;
}

/* Inner layout wrapper for centering */
.wallet-card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* ============================================================
   WALLET CARD (Connect / Auth / Provider)
============================================================ */

.wallet-provider-select {
  border: 1px solid #d4af37;
  background: #111;
  padding: 14px 18px;
  border-radius: 8px;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  gap: 30px;
  font-size: 14px;
}

.wallet-provider-select label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: #ccc;
}

.wallet-provider-select input[type="radio"] {
  accent-color: #4DB823;
}

/* Status Badge */
#wallet-status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.status-connected {
  background: rgba(77, 184, 35, 0.15);
  color: #4DB823;
  border: 1px solid #4DB823;
}

.status-disconnected {
  background: rgba(128, 122, 35, 0.15);
  color: #E0CC71;
  border: 1px solid #807A23;
}

/* Wallet Address */
.wallet-address {
  font-size: 14px;
  margin-bottom: 12px;
  text-align: center;
}

.wallet-address strong {
  color: #aaa;
}

/* Blue Connect Prompt (synced blink with rings) */
.wallet-blue-prompt {
  text-align: center;
  color: #1976d2;
  font-size: 13px;
  margin-bottom: 10px;
  opacity: 1;
  animation: sob-breadcrumb-text-blink 2s infinite;
}

.wallet-card:has(#wallet-status-badge.status-connected) #wallet-connect-prompt {
  display: none;
}

/* Synced text blink (2s) */
@keyframes sob-breadcrumb-text-blink {
  0%   { opacity: 1; }
  50%  { opacity: 0.25; }
  100% { opacity: 1; }
}

/* Buttons */
.wallet-buttons {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}

.wallet-buttons button {
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  border: none;
  font-size: 14px;
  transition: 0.2s ease;
}

#solana-connect-btn,
#wallet-auth-btn {
  background: #807A23;
  color: white;
}

#solana-connect-btn:hover,
#wallet-auth-btn:hover {
  background: #4DB823;
}

#wallet-auth-btn[style*="display: none"] {
  display: none !important;
}

#solana-disconnect-btn {
  background: #333;
  color: #ccc;
  border: 1px solid #807A23;
}

#solana-disconnect-btn:hover {
  background: #4DB823;
  color: white;
  border-color: #4DB823;
}

/* Network Status */
.network-status {
  text-align: center;
  font-size: 12px;
  color: #aaa;
  margin-top: 10px;
}

/* ============================================================
   PORTFOLIO CARD (Token Table)
============================================================ */

.wallet-total {
  text-align: right;
  margin-bottom: 12px;
  width: 100%;
}

.wallet-total-label {
  display: block;
  font-size: 11px;
  color: #aaa;
}

.wallet-total-value {
  font-size: 22px;
  font-weight: bold;
}

.wallet-loading {
  display: inline-block;
  font-size: 11px;
  color: #888;
  margin-left: 6px;
}

.wallet-table-header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #999;
  border-bottom: 1px solid #333;
  padding-bottom: 6px;
  margin-bottom: 8px;
  width: 100%;
}

.wallet-token-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.wallet-token-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr auto;
  align-items: center;
  font-size: 14px;
  padding: 6px 0;
  border-bottom: 1px solid #262626;
  width: 100%;
}

.wallet-token-row:last-child {
  border-bottom: none;
}

.token-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.token-icon {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid #333;
}

.token-symbol {
  font-weight: 500;
}

.col-balance,
.col-usd,
.col-change {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.token-balance {
  color: #ddd;
}

.token-usd {
  color: #ccc;
}

.token-change {
  font-size: 12px;
}

.change-up {
  color: #4DB823;
}

.change-down {
  color: #ff4d4d;
}

.change-neutral {
  color: #999;
}

.token-trade-btn {
  background: transparent;
  border: 1px solid #807A23;
  color: #E0CC71;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
  margin-left: 8px;
  transition: 0.2s ease;
}

.token-trade-btn:hover {
  background: #4DB823;
  border-color: #4DB823;
  color: #fff;
}

/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 600px) {
  .wallet-card {
    padding: 18px;
  }

  .wallet-provider-select {
    flex-direction: column;
    gap: 12px;
  }

  .wallet-buttons {
    flex-direction: column;
  }

  .wallet-token-row,
  .wallet-table-header {
    grid-template-columns: 2fr 1.2fr 1.2fr 1.2fr auto;
  }
}

/* Page Hero */
.page-hero {
  text-align: center;
  margin: 40px auto 30px;
  max-width: 700px;
  color: #735c5c;
}

.page-hero h1 {
  font-size: 28px;
  margin-bottom: 10px;
  color: #4DB823;
}

.page-hero p {
  font-size: 16px;
  color: #735c5c;
}

/* ============================================================
   Global Modal System
============================================================ */

body.sob-modal-open {
  overflow: hidden;
}

.sob-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease-out, visibility 0.22s ease-out;
  z-index: 900;
}

.sob-modal-overlay-visible {
  opacity: 1;
  visibility: visible;
}

.sob-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.94);
  opacity: 0;
  visibility: hidden;
  background: #111;
  border-radius: 12px;
  border: 1px solid #807A23;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.8);
  width: 90%;
  max-width: 520px;
  color: #e6e6e6;
  z-index: 910;
  transition:
    opacity 0.22s ease-out,
    transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.22s ease-out;
}

.sob-modal-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.sob-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px 10px;
  border-bottom: 1px solid #262626;
}

.sob-modal-header h2 {
  font-size: 18px;
  margin: 0;
  color: #4DB823;
}

.sob-modal-close {
  background: transparent;
  border: none;
  color: #aaa;
  font-size: 20px;
  cursor: pointer;
  padding: 0;
}

.sob-modal-close:hover {
  color: #fff;
}

.sob-modal-body {
  padding: 14px 20px 10px;
}

.sob-modal-footer {
  padding: 12px 20px 16px;
  border-top: 1px solid #262626;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.sob-modal-lead {
  font-size: 14px;
  color: #ccc;
  margin-bottom: 14px;
}

.sob-modal-section {
  margin-bottom: 14px;
}

.sob-modal-code-block {
  background: #050505;
  border-radius: 8px;
  border: 1px solid #262626;
  padding: 10px 12px;
  font-family: "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  color: #e6e6e6;
}

.sob-modal-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
}

.sob-meta-label {
  display: block;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  margin-bottom: 2px;
}

.sob-meta-value {
  color: #e6e6e6;
  word-break: break-all;
  font-family: "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
}

/* Fields & Buttons */

.sob-field-label {
  display: block;
  font-size: 12px;
  color: #aaa;
  margin-bottom: 4px;
}

.sob-field-row {
  display: flex;
  gap: 8px;
}

.sob-input {
  flex: 1;
  background: #050505;
  border-radius: 8px;
  border: 1px solid #333;
  padding: 8px 10px;
  color: #e6e6e6;
  font-size: 14px;
}

.sob-input:focus {
  outline: none;
  border-color: #4DB823;
}

.sob-btn-primary,
.sob-btn-secondary {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: 0.18s ease;
}

.sob-btn-primary {
  background: #4DB823;
  color: #fff;
}

.sob-btn-primary:hover {
  background: #5fd52f;
}

.sob-btn-secondary {
  background: #222;
  color: #ddd;
  border: 1px solid #444;
}

.sob-btn-secondary:hover {
  background: #333;
}

/* Responsive */

@media (max-width: 480px) {
  .sob-modal {
    width: 94%;
    max-width: 94%;
  }
}

/* ============================================================
   SMART AUTH FLOW — INLINE MESSAGE + BUTTON HIGHLIGHT
============================================================ */

.wallet-inline-message {
  min-height: 18px;
  margin-top: 8px;
  margin-bottom: 5px;
  font-size: 13px;
  color: #1976d2;
  text-align: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.wallet-inline-message-visible {
  opacity: 1;
}

.wallet-success-message {
  margin-top: 8px;
  font-size: 13px;
  color: #00C853;
}

/* Padded breadcrumb ring wrappers (P-2: 6px padding) */
.wallet-breadcrumb-ring {
  display: inline-block;
  padding: 6px;
  border-radius: 999px;
  transition: box-shadow 0.2s ease;
}

/* AUTH BUTTON HIGHLIGHT (hard, thin, blue outer ring) */
.wallet-auth-highlight {
  box-shadow: 0 0 0 2px rgba(77, 166, 255, 0.95);
}

/* CONNECT BUTTON HIGHLIGHT (hard, thin, blue outer ring) */
.wallet-connect-highlight {
  box-shadow: 0 0 0 2px rgba(77, 166, 255, 0.95);
}

/* Shared ring pulse (2s, synced with text blink) */
.wallet-auth-pulse,
.wallet-connect-pulse {
  animation: sob-breadcrumb-ring-pulse 2s infinite;
}

@keyframes sob-breadcrumb-ring-pulse {
  0%   { box-shadow: 0 0 0 2px rgba(77, 166, 255, 0.95); }
  50%  { box-shadow: 0 0 0 8px rgba(77, 166, 255, 0.0); }
  100% { box-shadow: 0 0 0 2px rgba(77, 166, 255, 0.95); }
}

#wallet-auth-success-message {
  text-align: center;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 13px;
  color: #00C853;
}

.wallet-status {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

#wallet-status-badge {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

/* ============================================================
   BLUE BREADCRUMB RINGS — INNER BLINK (Portfolio)
============================================================ */

.wallet-card-highlight {
  box-shadow: inset 0 0 0 3px rgba(77, 166, 255, 0.9);
  border-radius: 12px;
  animation: sobPortfolioBlink 1.2s infinite;
}

@keyframes sobPortfolioBlink {
  0%   { box-shadow: inset 0 0 0 3px rgba(77, 166, 255, 0.9); }
  50%  { box-shadow: inset 0 0 0 3px rgba(77, 166, 255, 0.2); }
  100% { box-shadow: inset 0 0 0 3px rgba(77, 166, 255, 0.9); }
}

.wallet-portfolio-breadcrumb {
  text-align: center;
  font-size: 14px;
  color: #1976d2;
  margin-top: -10px;
  margin-bottom: 15px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* When the portfolio is highlighted (authenticated), show the unlocked message */
.wallet-card-highlight .wallet-portfolio-breadcrumb {
  opacity: 1;
}

/* Persistent "Secure wallet is active" breadcrumb (non-blinking) */
.wallet-portfolio-secure-breadcrumb {
  text-align: center;
  font-size: 13px;
  color: #1976d2;
  margin-top: -6px;
  margin-bottom: 8px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.wallet-portfolio-secure-breadcrumb-visible {
  opacity: 1;
}

/* ============================================================
   END OF wallet.css (Hybrid Breadcrumb + Padded Rings + Synced Blink Version)
============================================================ */
/* END OF wallet.css (Hybrid Breadcrumb + Padded Rings + Synced Blink Version) */

/* ============================================================
   PHASE 8 — REAL TRADE MODAL (BUTTONS ALWAYS VISIBLE, NO VISIBLE SCROLLBARS)
============================================================ */

/* Overlay */
.trade-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.65);
  display: none;
  z-index: 999999;

  display: flex;
  justify-content: center;
  align-items: center;
}

/* Modal Container */
.trade-modal {
  background: #111;
  width: 380px;
  max-width: 92vw;

  /* Allow internal scroll if needed, but hide scrollbars */
  max-height: 90vh;
  overflow-y: auto;

  border-radius: 12px;
  border: 1px solid #807A23;
  box-shadow: 0 18px 60px rgba(0,0,0,0.8);
  color: #e6e6e6;
  padding: 14px 16px;
}

/* Hide scrollbars (but keep scroll behavior) */
.trade-modal {
  scrollbar-width: none;          /* Firefox */
}
.trade-modal::-webkit-scrollbar { /* WebKit */
  display: none;
}

/* Header */
.trade-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #262626;
}

.trade-modal-header h2 {
  margin: 0;
  font-size: 18px;
  color: #4DB823;
}

.trade-modal-close {
  background: transparent;
  border: none;
  color: #aaa;
  font-size: 22px;
  cursor: pointer;
  padding: 0;
}

.trade-modal-close:hover {
  color: #fff;
}

/* Token Info */
.trade-token-info {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.trade-token-icon {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  border-radius: 999px;
  border: 1px solid #333;
}

.trade-token-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Input Sections */
.trade-input-section,
.trade-slippage-section {
  margin-bottom: 12px;
}

.trade-input-section input,
.trade-slippage-section select,
.trade-slippage-section input {
  width: 100%;
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid #333;
  background: #050505;
  color: #e6e6e6;
  font-size: 14px;
}

.trade-input-section input:focus,
.trade-slippage-section input:focus {
  outline: none;
  border-color: #4DB823;
}

/* Summary Box */
.trade-summary {
  background: #1a1a1a;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #262626;
  margin-bottom: 14px;
}

.trade-summary div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

/* Footer Buttons — SecureOneBank Branding */
.trade-modal-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
}

.trade-btn-primary,
.trade-btn-success,
.trade-btn-secondary {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid #807A23;
  transition: 0.2s ease;
}

/* Preview Trade */
.trade-btn-primary {
  background: #807A23;
  color: white;
}
.trade-btn-primary:hover {
  background: #4DB823;
  border-color: #4DB823;
}

/* Sign & Submit */
.trade-btn-success {
  background: #4DB823;
  color: white;
}
.trade-btn-success:hover {
  background: #5fd52f;
}

/* Secondary (Sell Coming Soon) */
.trade-btn-secondary {
  background: #333;
  color: #ccc;
}
.trade-btn-secondary:hover {
  background: #4DB823;
  color: white;
  border-color: #4DB823;
}