/* Wallet page */

/* All money values green */
.wallet-page .text-green,
.wallet-page .total-assets-usd {
  color: #16b777 !important;
}

/* Wallet cards - grid layout */
.wallet-page #wallet_cards_container {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.wallet-page .wallet-card {
  border: 2px solid transparent !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  min-width: 140px !important;
  max-width: 160px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1) !important;
}

.wallet-page .wallet-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

.wallet-page .wallet-card.selected {
  border-color: #16b777 !important;
  background: rgba(22, 183, 119, 0.08) !important;
}

/* Wallet card action buttons */
.wallet-page .wallet-card {
  position: relative;
}
.wallet-page .wallet-card .card-actions {
  display: none;
  position: absolute;
  top: 5px;
  right: 5px;
  gap: 4px;
  z-index: 5;
}
.wallet-page .wallet-card:hover .card-actions {
  display: flex;
}
.wallet-page .wallet-card .card-action-btn {
  background: rgba(255,255,255,0.95) !important;
  border: 1px solid #dee2e6 !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
  font-size: 11px !important;
  cursor: pointer !important;
  color: #7f8c8d !important;
  line-height: 1.4 !important;
}
.wallet-page .wallet-card .card-action-btn:hover {
  border-color: #16b777 !important;
  color: #16b777 !important;
}
.wallet-page .wallet-card .card-action-btn:hover.delete {
  border-color: #e74c3c !important;
  color: #e74c3c !important;
}

/* Wallet form modal */
#wallet_form_modal {
  display: none !important;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 90000;
  align-items: center;
  justify-content: center;
}
#wallet_form_modal.show {
  display: flex !important;
}
.wallet-page .wallet-card .card-actions {
  display: none;
  position: absolute;
  top: 5px;
  right: 5px;
  gap: 4px;
  z-index: 5;
}
.wallet-page .wallet-card:hover .card-actions {
  display: flex;
}
.wallet-page .wallet-card .card-action-btn {
  background: rgba(255,255,255,0.95) !important;
  border: 1px solid #dee2e6 !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
  font-size: 11px !important;
  cursor: pointer !important;
  color: #7f8c8d !important;
  line-height: 1.4 !important;
  transition: all 0.15s !important;
}
.wallet-page .wallet-card .card-action-btn:hover {
  border-color: #16b777 !important;
  color: #16b777 !important;
}
.wallet-page .wallet-card .card-action-btn.delete:hover {
  border-color: #e74c3c !important;
  color: #e74c3c !important;
}

/* Chain distribution - horizontal bar chart */
.wallet-page .chain-bars-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.wallet-page .chain-bar-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.wallet-page .chain-bar-label {
  min-width: 60px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.wallet-page .chain-bar-track {
  flex: 1 !important;
  height: 8px !important;
  border-radius: 4px !important;
  overflow: visible !important;
  position: relative !important;
  background: #e5e7eb !important;
}

.wallet-page .chain-bar-fill {
  height: 100% !important;
  border-radius: 4px !important;
  min-width: 2px !important;
  position: relative !important;
}

.wallet-page .chain-bar-pct {
  min-width: 42px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-align: right !important;
}

.wallet-page .chain-bar-value {
  min-width: 60px !important;
  font-size: 12px !important;
  text-align: right !important;
}

/* Asset table */
.wallet-page .asset-table {
  font-size: 13px !important;
}

.wallet-page .asset-table tbody td {
  padding: 12px 8px !important;
}

/* Wallet card refreshing state */
.wallet-page .wallet-card.refreshing {
  opacity: 0.6;
  pointer-events: none;
  position: relative;
}
.wallet-page .wallet-card.refreshing::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid #16b777;
  border-top-color: transparent;
  border-radius: 50%;
  animation: wallet-card-spin 0.8s linear infinite;
}
@keyframes wallet-card-spin {
  to { transform: rotate(360deg); }
}