@import './styles/theme.css';

/* Base styles */
body {
  text-align: center;
  font-family: "Times New Roman", monospace;
  font-weight: 400;
  font-style: normal;
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

/* Hide DataTables elements */
#chainData_filter,
#chainData_length,
#chainData_info,
#chainData_paginate,
#gasData_filter,
#gasData_length,
#gasData_info,
#gasData_paginate {
  display: none;
}

/* Container layout */
.container {
  display: flex;
  justify-content: space-between;
  padding-right: 1rem;
  padding-left: 1rem;
  transition: all 0.3s ease;
  margin-left: auto;
  margin-right: auto;
  width: 98%;
  max-width: none;
  position: relative;
}

/* Content panels with proper centering */
.column, #pageOneContent, #pageTwoContent {
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 10px;
  margin: 10px;
  box-shadow: 0 1px 3px var(--shadow-color);
  transition: all 0.3s ease;
}

#pageOneContent {
  width: 25%;
}

#pageTwoContent {
  width: 75%;
}

/* Navbar open state adjustments */
.side-nav.open ~ .container {
  width: calc(98% - 200px);
  margin: 0 auto;
  transform: translateX(100px);
}

.side-nav.open ~ .container #pageOneContent,
.side-nav.open ~ .container #pageTwoContent {
  margin: 10px;
}

/* Table styles */
#chainData, #gasData {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  min-width: 400px;
  table-layout: fixed;
}

/* Column widths */
#chainData th:nth-child(1),
#chainData td:nth-child(1) {
  width: 30% !important;
}

#chainData th:nth-child(2),
#chainData td:nth-child(2),
#chainData th:nth-child(3),
#chainData td:nth-child(3),
#chainData th:nth-child(4),
#chainData td:nth-child(4) {
  width: 23% !important;
}

/* Dark mode styles */
[data-theme="dark"] #chainData tbody tr:nth-child(even) {
  background-color: #242424 !important;
}

[data-theme="dark"] #chainData tbody tr:nth-child(odd) {
  background-color: #1a1a1a !important;
}

[data-theme="dark"] #chainData td {
  color: #e0e0e0 !important;
}

[data-theme="dark"] #chainData th {
  background-color: #2d2d2d !important;
  color: #e0e0e0 !important;
  border-color: #404040 !important;
}

/* Mobile responsiveness */
@media (max-width: 1600px) {
  body {
    min-width: 800px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .container {
    width: 100%;
  }

  /* .side-nav.open ~ .container {
    width: calc(96.5% - 180px);
    transform: translateX(90px);
  } */

  #pageOneContent, #pageTwoContent {
    margin: 0;
    padding: 0.5rem;
  }

  /* #pageOneContent {
    width: 37.5% !important;
  }
  
  #pageTwoContent {
    width: 62.5% !important;
  } */
}

/* @media (max-width: 800px) {
  #pageOneContent {
    width: 65% !important;
  }
  
  #pageTwoContent {
    width: 65% !important;
  } */
/* } - removed stray brace */

@media (max-width: 640px) {
  #chainData, #gasData {
    width: 98%;
  }
}

#chainData tbody tr {
  background-color: white !important;
}

#chainData tbody tr td {
  border: none !important;
}

#chainData.dataTable.no-footer tr:nth-child(odd) {
  background-color: white !important;
}

#chainData.dataTable.no-footer tr:nth-child(even) {
  background-color: white !important;
}

#chainData td {
  text-align: right;
}

#chainData tbody tr:hover {
  background-color: white !important;
}

#filterDiv {
  width: 35% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: left !important;
  margin-bottom: 1rem;
}

#balanceFilter {
  padding: 4px 8px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 14px;
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

#balanceFilter:focus {
  outline: none;
  border-color: var(--hover-border);
}

#balanceFilter:hover {
  border-color: var(--hover-border);
}

/* Mobile responsiveness */
@media (max-width: 640px) { 
  #filterDiv {
    width: 90% !important;
  }
}

.group-indicator {
    cursor: pointer;
    transition: background-color 0.2s;
}

.group-indicator:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.deposit-type {
  font-weight: bold;
  padding: 2px 5px;
  border-radius: 3px;
}

/* Light mode deposit types */
.deposit-type.eoa {
  background-color: #bbf7d0;
  color: #166534;
}

.deposit-type.contract {
  background-color: #bfdbfe;
  color: #1e40af;
}

.deposit-type.solana {
  background-color: #e9d5ff;
  color: #6b21a8;
}

.deposit-type.lifi {
  background-color: #fed7aa;
  color: #9a3412;
}

.deposit-type.unknown {
  background-color: #e5e7eb;
  color: #1f2937;
}

/* Dark mode deposit types */
[data-theme="dark"] .deposit-type.eoa {
  background-color: #166534;
  color: #bbf7d0;
}

[data-theme="dark"] .deposit-type.contract {
  background-color: #1e40af;
  color: #bfdbfe;
}

[data-theme="dark"] .deposit-type.solana {
  background-color: #6b21a8;
  color: #e9d5ff;
}

[data-theme="dark"] .deposit-type.lifi {
  background-color: #9a3412;
  color: #fed7aa;
}

[data-theme="dark"] .deposit-type.unknown {
  background-color: #1f2937;
  color: #e5e7eb;
}

.nav-links {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 10px 0;
    flex-wrap: wrap;
    padding: 0 1rem;
}

.nav-links a {
    text-decoration: none;
    display: inline-block;
    flex: 1 1 auto;
    min-width: 50px;
    max-width: 125px;
}

.nav-links button {
    width: 100%;
    white-space: nowrap;
    padding: 8px 12px;
    border: 1px solid #ddd;
    background-color: #f0f0f0;
    color: #333;
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.nav-links button:hover {
    background-color: #e0e0e0;
    border-color: #ccc;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.nav-links button:active {
    transform: translateY(0);
    background-color: #d0d0d0;
}

@media (max-width: 768px) {
    .nav-links {
        gap: 6px;
        margin: 8px 0;
    }

    .nav-links a {
        min-width: 80px;
        max-width: 120px;
    }

    .nav-links button {
        padding: 6px 10px;
        font-size: 0.875rem;
        font-weight: 500;
    }
}

/* Update existing styles */
h1 {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  font-size: 2rem;
  margin-top: 2rem;
  color: var(--text-primary);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  body.nav-open h1:first-of-type {
    font-size: 1.5rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    position: relative;
    left: -100px;
    transition: left 0.3s ease;
  }

  h1:first-of-type {
    font-size: 1.5rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
}

/* Add smooth transitions for theme changes */
.transaction,
.copy-btn,
#balanceFilter,
.status,
.deposit-type {
  transition: all 0.2s ease;
}

/* DataTables specific overrides */
.dataTables_wrapper {
  color: var(--text-primary);
}

.dataTables_filter input {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.dataTables_filter input:focus {
  border-color: var(--hover-border);
  outline: none;
}

/* Dark mode table styles for chainData */
[data-theme="dark"] #chainData,
[data-theme="dark"] #chainData *,
[data-theme="dark"] .dataTables_wrapper,
[data-theme="dark"] .dataTables_wrapper * {
  background-color: #1a1a1a !important;
  color: #e0e0e0 !important;
  border-color: #404040 !important;
}

/* Table header specific styles */
[data-theme="dark"] #chainData thead th {
  background-color: #2d2d2d !important;
  color: #e0e0e0 !important;
  border-color: #404040 !important;
}

/* Table rows */
[data-theme="dark"] #chainData tbody tr,
[data-theme="dark"] #chainData.dataTable tbody tr,
[data-theme="dark"] #chainData.dataTable.no-footer tbody tr,
[data-theme="dark"] #chainData.dataTable.stripe tbody tr,
[data-theme="dark"] #chainData.dataTable.display tbody tr {
  background-color: #1a1a1a !important;
  color: #e0e0e0 !important;
}

/* Table cells */
[data-theme="dark"] #chainData td,
[data-theme="dark"] #chainData.dataTable td {
  background-color: transparent !important;
  color: #e0e0e0 !important;
  border: none !important;
}

/* Hover states */
[data-theme="dark"] #chainData tbody tr:hover,
[data-theme="dark"] #chainData.dataTable tbody tr:hover,
[data-theme="dark"] #chainData.dataTable.hover tbody tr:hover,
[data-theme="dark"] #chainData.dataTable.display tbody tr:hover {
  background-color: #2d2d2d !important;
}

/* Override any inline styles */
[data-theme="dark"] #chainData [style*="background"],
[data-theme="dark"] #chainData [style*="background-color"],
[data-theme="dark"] #chainData [style*="color"] {
  background-color: #1a1a1a !important;
  color: #e0e0e0 !important;
}

/* Override DataTables stripe classes */
[data-theme="dark"] #chainData .odd,
[data-theme="dark"] #chainData .even {
  background-color: #1a1a1a !important;
}

/* Force text color on all elements inside the table */
[data-theme="dark"] #chainData * {
  color: #e0e0e0 !important;
}

/* Dark mode table styles for gasData */
[data-theme="dark"] #gasData {
  background-color: #1a1a1a;
  color: #e0e0e0;
}

[data-theme="dark"] #gasData tbody tr {
  background-color: #1a1a1a !important;
}

[data-theme="dark"] #gasData tbody tr:nth-child(even) {
  background-color: #242424 !important;
}

[data-theme="dark"] #gasData td {
  color: #e0e0e0;
  border-color: #404040 !important;
}

[data-theme="dark"] #gasData thead {
  background-color: #2d2d2d;
}

[data-theme="dark"] #gasData th {
  background-color: #2d2d2d;
  color: #e0e0e0;
  border-color: #404040;
}

[data-theme="dark"] #gasData tbody tr:hover {
  background-color: #2d2d2d !important;
}

/* Override any white backgrounds */
[data-theme="dark"] #gasData.dataTable.no-footer tr:nth-child(odd) {
  background-color: #1a1a1a !important;
}

[data-theme="dark"] #gasData.dataTable.no-footer tr:nth-child(even) {
  background-color: #242424 !important;
}

/* Override white background styles for mainnet table */
[data-theme="dark"] #chainData tbody tr {
  background-color: #1a1a1a !important;
}

[data-theme="dark"] #chainData tbody tr td {
  border: none !important;
  color: #e0e0e0 !important;
}

[data-theme="dark"] #chainData.dataTable.no-footer tr:nth-child(odd),
[data-theme="dark"] #chainData.dataTable.no-footer tr:nth-child(even) {
  background-color: #1a1a1a !important;
}

[data-theme="dark"] #chainData td {
  text-align: right;
  color: #e0e0e0 !important;
}

[data-theme="dark"] #chainData tbody tr:hover {
  background-color: #2d2d2d !important;
}

/* Force dark mode on all table elements */
[data-theme="dark"] table.dataTable tbody tr {
  background-color: #1a1a1a !important;
}

[data-theme="dark"] table.dataTable tbody td {
  color: #e0e0e0 !important;
}

[data-theme="dark"] table.dataTable.stripe tbody tr.odd,
[data-theme="dark"] table.dataTable.display tbody tr.odd {
  background-color: #1a1a1a !important;
}

[data-theme="dark"] table.dataTable.stripe tbody tr.even,
[data-theme="dark"] table.dataTable.display tbody tr.even {
  background-color: #1a1a1a !important;
}

[data-theme="dark"] table.dataTable.hover tbody tr:hover,
[data-theme="dark"] table.dataTable.display tbody tr:hover {
  background-color: #2d2d2d !important;
}

/* Override any remaining white backgrounds */
[data-theme="dark"] #chainData tbody tr[style*="background-color: white"],
[data-theme="dark"] #chainData tbody tr[style*="background-color: rgb(255, 255, 255)"] {
  background-color: #1a1a1a !important;
}

[data-theme="dark"] #chainData tbody tr:hover[style*="background-color: white"],
[data-theme="dark"] #chainData tbody tr:hover[style*="background-color: rgb(255, 255, 255)"] {
  background-color: #2d2d2d !important;
}

/* Dark mode status.seen */
[data-theme="dark"] .status.seen {
  background-color: #404040;
  color: #000000 !important;  /* Force black text in dark mode */
}

.refresh-indicator {
  position: fixed;
  top: 20px;
  right: 20px;
  background: #2d2d2d;
  padding: 8px 16px;
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1000;
}

.refresh-indicator.visible {
  opacity: 1;
}

/* Remove any existing background colors */
#chainData tbody tr,
#chainData tbody tr td {
  background-color: transparent !important;
}

/* Apply alternating row colors to the entire row */
#chainData tbody tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.02) !important;
}

/* Dark mode overrides */
[data-theme="dark"] #chainData tbody tr:nth-child(even) {
  background-color: #242424 !important;
}

[data-theme="dark"] #chainData tbody tr:nth-child(odd) {
  background-color: #1a1a1a !important;
}

/* Base table styles */
#chainData {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  min-width: 400px;
  table-layout: fixed;
}

/* Large desktop screens */
@media (min-width: 1921px) {
  #pageOneContent {

    font-size: 1.2rem;
  }
  
  #pageTwoContent {

    font-size: 1.2rem;
  }

  #chainData {
    width: 95%;
    max-width: 1400px;
    font-size: 1.2rem;
  }

  #gasData {
    width: 95%;
    max-width: 1200px;
    font-size: 1.2rem;
  }

  .container {
    width: 95%;
  }
/* 
  .side-nav.open ~ .container {
    width: calc(85% - 250px);
    transform: translateX(100px);
  } */

  /* Adjust table header sizes */
  #chainData th,
  #gasData th {
    font-size: 1.3rem;
  }

  /* Adjust table cell sizes */
  #chainData td,
  #gasData td {
    font-size: 1.2rem;
    padding: 12px 8px; /* Increased padding for better readability */
  }

  /* Adjust header text */
  h1 {
    font-size: 2.5rem;
  }
}

/* Column width adjustments */
#chainData th:nth-child(1),
#chainData td:nth-child(1) {
  width: 30% !important;
}

#chainData th:nth-child(2),
#chainData td:nth-child(2),
#chainData th:nth-child(3),
#chainData td:nth-child(3),
#chainData th:nth-child(4),
#chainData td:nth-child(4) {
  width: 23% !important;
}

/* Mobile responsiveness */
@media (max-width: 640px) { 
  #chainData {
    width: 98%;
  }
}

#chainData th,
#chainData td {
  width: auto !important;  /* Override inline styles */
}

#chainData {
  min-width: 400px;
  width: 100%;
  table-layout: fixed;  /* This helps maintain consistent column widths */
}

/* Set specific widths for each column */
#chainData th:nth-child(1),
#chainData td:nth-child(1) {
  width: 30% !important;  /* Chain name column */
}

#chainData th:nth-child(2),
#chainData td:nth-child(2),
#chainData th:nth-child(3),
#chainData td:nth-child(3),
#chainData th:nth-child(4),
#chainData td:nth-child(4) {
  width: 23% !important;  /* Other columns */
}

/* WebSocket Table Styles */
#transactionTable {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse;
  background-color: #ffffff;
  max-height: 80vh;
  overflow-y: auto;
  transition: all 0.3s ease;
}

#transactionTable thead {
  position: sticky;
  top: 0;
  background-color: #f2f2f2;
  z-index: 1;
}

#transactionTable th,
#transactionTable td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

#transactionTable th {
  background-color: #f2f2f2;
  font-weight: bold;
}

#transactionTable tr:nth-child(even) {
  background-color: #f8f8f8;
}

#transactionTable tr.updated {
  background-color: #fffacd;
  transition: background-color 0.3s ease;
}

/* Dark mode table styles */
[data-theme="dark"] #transactionTable {
  background-color: #1a1a1a;
}

[data-theme="dark"] #transactionTable tr {
  background-color: #1a1a1a;
}

[data-theme="dark"] #transactionTable tr:nth-child(even) {
  background-color: #242424;
}

[data-theme="dark"] #transactionTable th {
  background-color: #2d2d2d;
  color: #e0e0e0;
  border-color: #404040;
}

[data-theme="dark"] #transactionTable td {
  border-color: #404040;
  color: #e0e0e0;
}

[data-theme="dark"] #transactionTable tr.updated {
  background-color: #4a3f20 !important;
}

[data-theme="dark"] #transactionTable tr.updated td {
  color: #fff3cd !important;
}

/* Status styles */
.status {
  font-weight: bold;
  padding: 2px 5px;
  border-radius: 3px;
}

.status.seen {
  background-color: #e0e0e0;
  color: #333;
}

.status.pending {
  background-color: #fff3cd;
  color: #856404;
}

.status.confirmed {
  background-color: #d4edda;
  color: #155724;
}

.status.cancelled {
  background-color: #f8d7da;
  color: #721c24;
}

/* Dark mode status */
[data-theme="dark"] .status.seen {
  background-color: #404040;
  color: #e0e0e0;
}

[data-theme="dark"] .status.pending {
  background-color: #665500;
  color: #ffffff;
}

[data-theme="dark"] .status.confirmed {
  background-color: #1b4332;
  color: #ffffff;
}

[data-theme="dark"] .status.cancelled {
  background-color: #4a1c24;
  color: #ffffff;
}

/* Deposit type styles */
.deposit-type {
  font-weight: bold;
  padding: 2px 5px;
  border-radius: 3px;
}

.deposit-type.eoa {
  background-color: #e6f4ea;
  color: #1e7e34;
}

.deposit-type.contract {
  background-color: #e8f0fe;
  color: #1967d2;
}

.deposit-type.solana {
  background-color: #f0e7fe;
  color: #6941c6;
}

.deposit-type.lifi {
  background-color: #fff0e6;
  color: #c45500;
}

.deposit-type.unknown {
  background-color: #f8f9fa;
  color: #343a40;
}

/* Chains page specific styles */
/* Remove column highlighting since columns are now interleaved */

/* DataTables alignment */
table.dataTable td.dt-left {
    text-align: left !important;
}

table.dataTable td.dt-right {
    text-align: right !important;
}

table.dataTable th {
    text-align: center;
}

/* Time toggle buttons */
.time-toggle {
    padding: 8px 16px;
    margin: 0 5px;
    border: 1px solid #ddd;
    background-color: #f8f9fa;
    color: #333;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.time-toggle:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
}

.time-toggle.active {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}

.time-toggle.active:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

/* Transaction filter styling */
.transaction-filter {
  text-align: center;
  margin-bottom: 15px;
}

.transaction-filter label {
  font-weight: bold;
  margin-right: 10px;
  color: var(--text-primary);
}

.transaction-filter select {
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 14px;
  cursor: pointer;
}

.transaction-filter select:hover {
  border-color: var(--text-secondary);
}

.transaction-filter select:focus {
  outline: none;
  border-color: #4CAF50;
  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}

/* Right-align inbound and outbound columns in transaction table */
#transactionTable td:nth-child(4),
#transactionTable td:nth-child(5) {
  text-align: right;
}

/* Center align Tx Hash, From (both), To (both), Status, and Tx Type columns */
#transactionTable td:nth-child(1),  /* Tx Hash */
#transactionTable td:nth-child(2),  /* From (chain) */
#transactionTable td:nth-child(3),  /* To (chain) */
#transactionTable td:nth-child(6),  /* From (address) */
#transactionTable td:nth-child(7),  /* To (address) */
#transactionTable td:nth-child(8),  /* Status */
#transactionTable td:nth-child(10) { /* Tx Type */
  text-align: center;
}

/* Right-align Time column */
#transactionTable td:nth-child(9) {
  text-align: right;
}

/* Right-align From and To chain columns in transaction table */
#transactionTable td:nth-child(2),
#transactionTable td:nth-child(3) {
  text-align: left;
}

/* Right-align chain name column in balance table */
#chainData td:nth-child(1) {
  text-align: right;
}