/* SAIF Theme CSS */
:root {
  --wallet-primary: #6b7280;
  --wallet-primary-rgb: 107, 114, 128;
  --wallet-secondary: #4b5563;
  --wallet-accent: #9ca3af;
  --wallet-muted: #94a3b8;
  --wallet-background: #000000;
  --wallet-foreground: #ffffff;
  --wallet-card-bg: #1f2937;
  --wallet-border: #374151;
}

/* Primary text colors */
.wallet-text-primary {
  color: var(--wallet-primary);
}

.wallet-text-secondary {
  color: var(--wallet-muted);
}

.wallet-text-accent {
  color: var(--wallet-accent);
}

/* Backgrounds */
.wallet-bg-primary {
  background-color: var(--wallet-background);
}

.wallet-bg-card {
  background-color: var(--wallet-card-bg);
}

/* Buttons */
.wallet-button-primary {
  background-color: var(--wallet-primary);
  color: #ffffff;
  border: 1px solid var(--wallet-primary);
}

.wallet-button-primary:hover {
  background-color: var(--wallet-secondary);
}

.wallet-button-secondary {
  background-color: rgba(var(--wallet-primary-rgb), 0.2);
  color: var(--wallet-primary);
  border: 1px solid rgba(var(--wallet-primary-rgb), 0.5);
}

.wallet-button-secondary:hover {
  background-color: rgba(var(--wallet-primary-rgb), 0.3);
}

.wallet-button-ghost {
  background-color: transparent;
  color: var(--wallet-primary);
  border: none;
}

.wallet-button-ghost:hover {
  background-color: rgba(var(--wallet-primary-rgb), 0.1);
}

/* Cards */
.wallet-card {
  background-color: var(--wallet-card-bg);
  border: 1px solid rgba(var(--wallet-primary-rgb), 0.3);
  border-radius: 0.5rem;
}

.wallet-card-header {
  color: var(--wallet-primary);
}

/* Inputs */
.wallet-input {
  background-color: var(--wallet-background);
  border: 1px solid rgba(var(--wallet-primary-rgb), 0.3);
  color: var(--wallet-primary);
}

.wallet-input:focus {
  border-color: var(--wallet-primary);
  box-shadow: 0 0 0 1px var(--wallet-primary);
}

/* Select */
.wallet-select {
  background-color: var(--wallet-background);
  border: 1px solid rgba(var(--wallet-primary-rgb), 0.3);
  color: var(--wallet-primary);
}

.wallet-select-item {
  color: var(--wallet-primary);
}

.wallet-select-item:hover {
  background-color: rgba(var(--wallet-primary-rgb), 0.2);
}

/* Badges */
.wallet-badge {
  background-color: rgba(var(--wallet-primary-rgb), 0.2);
  color: var(--wallet-primary);
  border: 1px solid rgba(var(--wallet-primary-rgb), 0.3);
}

/* Borders */
.wallet-border {
  border-color: rgba(var(--wallet-primary-rgb), 0.3);
}

.wallet-border-hover:hover {
  border-color: rgba(var(--wallet-primary-rgb), 0.5);
}

/* Interactive states */
.wallet-hover:hover {
  background-color: rgba(var(--wallet-primary-rgb), 0.1);
}

.wallet-active {
  background-color: rgba(var(--wallet-primary-rgb), 0.1);
  border-color: rgba(var(--wallet-primary-rgb), 0.3);
  color: var(--wallet-primary);
}

/* Icons */
.wallet-icon {
  color: var(--wallet-primary);
}

/* Special elements */
.wallet-balance {
  color: var(--wallet-primary);
}

.wallet-address {
  color: var(--wallet-primary);
}

.wallet-token-symbol {
  color: var(--wallet-muted);
}

.wallet-token-balance {
  color: var(--wallet-muted);
}

/* Logo container */
.wallet-logo {
  color: var(--wallet-primary);
}

/* SAIF Theme Layout Adjustments */

/* Hide log panels for SAIF theme - simpler selector */
body[data-theme="saif"] .lg\:col-span-1 .overflow-y-auto {
  display: none;
}

/* Hide the entire right column for SAIF theme */
body[data-theme="saif"] .grid > .lg\:col-span-1:last-child {
  display: none;
}

/* Reduce container width for SAIF theme */
body[data-theme="saif"] .container {
  max-width: 768px !important; /* max-w-3xl equivalent */
}

/* Adjust grid layout for SAIF theme - force single column */
body[data-theme="saif"] .grid {
  grid-template-columns: 1fr !important;
}

/* Make content take full width when log panel is hidden */
body[data-theme="saif"] .lg\:col-span-2 {
  grid-column: span 1 !important;
  max-width: 100% !important;
}

/* SAIF specific header adjustments */
body[data-theme="saif"] header {
  max-width: 768px;
  margin: 0 auto;
}

/* Handle unlock screen layout */
body[data-theme="saif"] .flex.justify-start > div {
  width: 100% !important;
  max-width: 768px;
  margin: 0 auto;
}