/**
 * Reelender shared styles - design tokens applied
 */
* { box-sizing: border-box; }

body {
  font-family: var(--font-family);
  background: var(--bg-main);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

.menuPane {
  background: var(--bg-sidebar);
  border-right-color: var(--border-sidebar);
}

.siteMenu a {
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}

.siteMenu a:hover {
  border-color: var(--accent-primary);
  background: var(--bg-card-elevated);
}

.siteMenu a.active {
  background: rgba(34, 139, 34, 0.12);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}

.siteMenu a.active .menuIcon {
  background: rgba(34, 139, 34, 0.2);
  color: var(--accent-primary);
}

.siteMenu button.menuLogout {
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.siteMenu button.menuLogout:hover {
  border-color: var(--accent-primary);
  background: var(--bg-card-elevated);
}

.menuHeader { color: var(--text-secondary); }
.menuIcon {
  background: rgba(28, 68, 106, 0.6);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}

.menuToggle {
  background: var(--bg-card-elevated);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
}

.label, .fieldLabel, .metricLabel { color: var(--text-secondary); }

button:not(.menuToggle):not(.menuLogout) {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: #FFFFFF;
  border-radius: 6px;
  padding: 4px 10px;
  font-weight: 400;
}

button:not(.menuToggle):not(.menuLogout):hover {
  background: var(--accent-secondary);
  border-color: var(--accent-secondary);
}

/* Tabs: inactive = gray text, active = green like primary buttons */
.tabs { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--border-strong); }
.tabs button {
  background: transparent !important;
  border: 1px solid var(--border-strong);
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  color: var(--text-secondary) !important;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 0.95rem;
  margin-bottom: -1px;
}
.tabs button:hover { color: var(--text-primary) !important; }
.tabs button.active {
  background: var(--accent-primary) !important;
  border-color: var(--accent-primary);
  color: #FFFFFF !important;
}
.tabPane { display: none; }
.tabPane.active { display: block; }

/* Pagination: disabled buttons stay readable */
.txPagination { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 0.9rem; }
.txPagination span { color: var(--text-secondary); }
.txPagination button:disabled { color: var(--text-secondary) !important; opacity: 0.8; }

button.secondary, .btn-secondary {
  background: transparent;
  color: var(--accent-primary);
  border-color: var(--accent-primary);
}

button.secondary:hover, .btn-secondary:hover {
  background: rgba(34, 139, 34, 0.1);
}

input, select, textarea {
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
}

.ok, .statusOk, .success { color: var(--success); }
.err, .statusErr, .error, .danger { color: var(--danger); }

.walletBadge, .mode {
  border-color: var(--border-strong);
  color: var(--accent-primary);
}

.walletBadge.netBotchain, .mode.netBotchain,
.netBotchain { color: var(--success); border-color: rgba(34, 197, 94, 0.5); }
.netMain { color: var(--danger); border-color: rgba(239, 68, 68, 0.5); }

table th, .table th { color: var(--text-secondary); }
table td, table th, .table td, .table th { border-bottom-color: var(--border-subtle); }
tr:hover { background: rgba(15, 40, 64, 0.5); }

.badge { border-radius: 6px; padding: 2px 8px; }
.badge.warn { background: rgba(34, 139, 34, 0.15); color: var(--accent-primary); }
.badge.danger { background: rgba(239, 68, 68, 0.15); color: var(--danger); }