/* BSV Explorer Styles */

:root {
  --bsv-bg-color: #1e2130;
  --bsv-info-label-color: #8a94a6;
}

[data-bs-theme="light"] {
  --bsv-bg-color: var(--box-1-bg);
  --bsv-info-label-color: #8a94a6;
}

#bsv-explorer-page {
  color: var(--text-color);
  font-family: "Montserrat", sans-serif;
}

.bsv-explorer-result {
  background-color: var(--bsv-bg-color);
  border-radius: 8px;
  padding: 20px;
  margin-top: 20px;
}

.bsv-explorer-result h2 {
  color: var(--text-color);
  margin-bottom: 20px;
  font-size: 24px;
  border-bottom: 1px solid var(--input-border-color);
  padding-bottom: 10px;
}

.bsv-explorer-result h3 {
  color: var(--text-color);
  margin: 20px 0 15px;
  font-size: 20px;
}

.bsv-explorer-result h4 {
  color: var(--text-color);
  margin: 15px 0 10px;
  font-size: 18px;
}

.address-info,
.transaction-info {
  margin-bottom: 20px;
}

.info-row {
  display: flex;
  margin-bottom: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--input-border-color);
}

.info-row .label {
  flex: 0 0 150px;
  font-weight: bold;
  color: var(--bsv-info-label-color);
}

.info-row .value {
  flex: 1;
  word-break: break-all;
  display: flex;
  align-items: center;
  gap: 8px;
}

.transaction-list {
  margin-top: 15px;
}

/* Transaction item styles */
.transaction-item {
  border: 1px solid var(--input-border-color);
  border-radius: 4px;
  margin-bottom: 10px;
  background-color: var(--box-1-bg);
}

.transaction-header {
  display: flex;
  align-items: center;
  padding: 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--input-border-color);
  background-color: var(--button-2-bg-color);
}

.transaction-header:hover {
  background-color: var(--button-1-hover-color);
}

.transaction-expand-icon {
  margin-right: 10px;
  width: 20px;
  text-align: center;
}

.transaction-height {
  flex: 0 0 80px;
  font-weight: bold;
  /* color: var(--left-panel-title-color); */
  color: var(--tab-button-bg-hover);
}

.transaction-id {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.transaction-time {
  flex: 0 0 180px;
  text-align: right;
  color: var(--left-panel-title-color);
}

.transaction-tags {
  flex: 0 0 120px;
  text-align: right;
}

.transaction-tag-icon {
  margin-left: 5px;
  display: flex;
  align-items: center;
}

.mnee-icon {
  height: 16px;
  width: 16px;
}

.transaction-values {
  display: flex;
  justify-content: flex-end;
  padding: 8px 12px;
  gap: 20px;
  border-bottom: 1px solid var(--input-border-color);
}

.transaction-value {
  /* font-weight: bold; */
  font-weight: normal;
}

.transaction-value.positive {
  color: #2ecc71;
}

.transaction-value.negative {
  color: #e74c3c;
}

.transaction-details {
  padding: 15px;
  background-color: var(--button-2-hover-color);
}

.txid-link,
.address-link,
.scripthash-link {
  color: var(--link-color);
  text-decoration: none;
}

.txid-link:hover,
.address-link:hover,
.scripthash-link:hover {
  text-decoration: underline;
  color: var(--link-hover-color);
}

.script-hash {
  color: var(--link-color);
  font-size: 85%;
}

.tag {
  display: inline-block;
  background-color: var(--button-2-hover-color);
  color: var(--text-color);
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 5px;
  font-size: 12px;
}

.mnee-tag {
  background-color: var(--button-1-bg-color);
  color: var(--button-1-text-color);
}

.transaction-details-loading {
  padding: 20px;
  text-align: center;
  color: var(--left-panel-title-color);
}

/* Side by side columns for inputs and outputs */
.transaction-columns {
  display: flex;
  flex-direction: row;
  gap: 20px;
}

.transaction-column {
  flex: 1;
  min-width: 0; /* Prevent flex items from overflowing */
}

.inputs-list,
.outputs-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 600px;
  overflow-y: auto;
}

.input-item,
.output-item {
  background-color: var(--box-1-bg);
  border: 1px solid var(--input-border-color);
  border-radius: 4px;
  padding: 10px;
}

.input-header,
.output-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--input-border-color);
}

.input-index,
.output-index {
  font-weight: bold;
  color: var(--left-panel-title-color);
}

.input-txid {
  color: var(--link-color);
  font-size: 14px;
  word-break: break-all;
}

.input-details,
.output-details {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.input-address,
.output-address {
  word-break: break-all;
  display: flex;
  align-items: center;
  gap: 8px;
}

.input-value,
.output-value {
  /* color: #34714e; */
  font-weight: bold;
}

.via-info,
.spent-info {
  font-size: 12px;
  /* color: var(--left-panel-title-color); */
  margin-top: 4px;
}

.ordinal-info {
  margin-top: 8px;
  padding: 8px;
  background-color: var(--background-color);
  border: 0.5px dotted var(--input-border-color);
  border-radius: 4px;
  font-size: 14px;
}

.token-amount {
  font-size: 16px;
  font-weight: bold;
  color: var(--link-hover-color);
}

.mnee-amount {
  /* font-size: 16px; */
  /* font-weight: bold; */
  color: var(--link-hover-color);
}

.token-usd-value {
  font-weight: bold;
  margin-bottom: 4px;
}

.address-label {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  background-color: rgba(52, 152, 219, 0.2);
  color: var(--text-color);
}

.address-label.deceptive {
  background-color: rgba(231, 76, 60, 0.2);
  color: #e74c3c;
}

.address-label.exchange {
  background-color: rgba(46, 204, 113, 0.2);
  color: #2ecc71;
}

.ordinal-amount,
.ordinal-id,
.ordinal-op {
  margin-bottom: 4px;
}

/* Copy button styles */
.copy-btn {
  background: none;
  border: none;
  color: var(--left-panel-title-color);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.copy-btn:hover {
  background-color: var(--button-2-hover-color);
  color: var(--text-color);
}

/* Pagination styles */
.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.page-link {
  display: inline-block;
  padding: 6px 12px;
  background-color: var(--button-2-hover-color);
  color: var(--text-color);
  text-decoration: none;
  border-radius: 4px;
  cursor: pointer;
}

.page-link:hover {
  background-color: var(--button-1-bg-color);
  color: var(--button-1-text-color);
}

.page-link.current {
  background-color: var(--button-1-bg-color);
  color: var(--button-1-text-color);
  font-weight: bold;
}

.page-link.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.page-ellipsis {
  padding: 6px 8px;
  color: var(--left-panel-title-color);
}

.no-data {
  color: var(--left-panel-title-color);
  font-style: italic;
  padding: 10px 0;
}

.search-box {
  background-color: var(--search-box-bg-color);
  border: 1px solid var(--search-box-border-color);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.search-box p {
  margin-bottom: 15px;
}

.search-box input[type="text"] {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--input-border-color);
  background-color: var(--input-bg-color);
  color: var(--input-text-color);
  border-radius: 4px;
}

.search-box input[type="text"]::placeholder {
  color: gray;
}

.text-danger {
  color: #e74c3c;
  margin-bottom: 10px;
}

.spinner {
  animation: spin 1s linear infinite;
  display: inline-block;
  margin-right: 5px;
}

.fa-copy {
  color: var(--text-color);
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.total-input,
.total-output {
    margin-top: 15px;
    padding: 10px;
    background-color: var(--button-2-hover-color);
    border-radius: 4px;
    text-align: right;
    font-weight: bold;
    font-size: 16px;
}

.tx-pagination {
    margin-top: 10px;
    margin-bottom: 15px;
}


/* Responsive adjustments */
@media (max-width: 768px) {
  .transaction-columns {
    flex-direction: column !important; /* Stack columns vertically */
  }

  .transaction-column {
    flex: 1 1 100% !important; /* Full width for each column */
    max-width: 100%; /* Prevent overflow */
    margin-bottom: 20px;
  }

  .pagination {
    flex-wrap: wrap;
  }

  .transaction-header {
    flex-wrap: wrap;
  }

  .transaction-id {
    flex: 0 0 100%;
    margin-top: 8px;
  }

  .transaction-time {
    flex: 1;
    text-align: left;
    margin-top: 8px;
  }
}