/* static/css/pages/dashboard.css */

.dashboard-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
  }
  
  .dashboard-title {
    font-size: 2.2rem;
    margin-bottom: 2rem;
    text-align: center;
  }
  
  .dashboard-section {
    margin-bottom: 2.5rem;
  }
  
  .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.25rem;
    margin-top: 1rem;
  }
  
  .card {
    background-color: var(--color-bg-light, #ffffff);
    padding: 1rem 1.5rem;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    font-size: 1rem;
    color: var(--color-text-dark, #111);
  }
  
  body.dark-mode .card {
    background-color: #1e1e1e;
    color: #f0f0f0;
  }
  
  .card.stat {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
  }
  
  .card.stat h3 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    color: var(--color-accent, #007bff);
  }
  
  /* Table */
  .tx-table table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.25rem;
    font-size: 0.95rem;
  }
  .tx-table table {
    transition: all 0.2s ease-in-out;
}

  .tx-table th,
  .tx-table td {
    padding: 0.75rem;
    border: 1px solid #ccc;
    text-align: center;
  }
  
  .tx-table th {
    background-color: #f4f4f4;
    color: #333;
  }
  
  body.dark-mode .tx-table th {
    background-color: #333;
    color: #f0f0f0;
  }
  
  .tx-table td {
    background-color: #fff;
  }
  
  body.dark-mode .tx-table td {
    background-color: #1b1b1b;
    color: #ddd;
  }
  
  /* Admin Controls */
  .admin-controls .btn-admin {
    margin-right: 1rem;
    margin-top: 1rem;
    padding: 0.6rem 1rem;
    background-color: var(--color-accent, #007bff);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
  }
  
  .admin-controls .btn-admin:hover {
    background-color: #0056b3;
  }

  



  /* Sticky Table Header for Dashboard */
  /* --- Sticky Header and Scrollable Body Upgrade --- */

.tx-table {
    max-height: 650px; /* Adjust as needed */
    overflow-y: auto;
    display: block;
}

/* Keep full table width */
.tx-table table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* Display rows properly */
.tx-table thead, .tx-table tbody, .tx-table tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

/* Make tbody scrollable separately */
.tx-table tbody {
    display: block;
    max-height: 550px; /* Adjust scroll height if needed */
    overflow-y: auto;
}

/* Keep header sticky */
.tx-table thead {
    display: table;
    width: 100%;
    table-layout: fixed;
}

/* Hover Effect */
.tx-table tbody tr:hover {
    background-color: #333;
    cursor: pointer;
}

/* Dark mode hover */
body.dark-mode .tx-table tbody tr:hover {
    background-color: #444;
}


/* Hide scrollbar unless scrolling needed */
.tx-table tbody::-webkit-scrollbar {
    width: 8px;
}

.tx-table tbody::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 10px;
}

.tx-table tbody::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

/* Hide scrollbar if not needed */
.tx-table tbody {
    scrollbar-width: thin;
    scrollbar-color: #888 #222;
}

/* Hover Effect on Transaction Rows */
.tx-table tbody tr:hover {
    background-color: #333; /* Darker hover for dark mode */
    color: #fff;
    transform: scale(1.005);
    box-shadow: 0 4px 10px rgba(0, 255, 255, 0.3);
    transition: all 0.2s ease-in-out;
}

body:not(.dark-mode) .tx-table tbody tr:hover {
    background-color: #f0f0f0; /* Lighter hover for light mode */
    color: #111;
    box-shadow: 0 4px 10px rgba(0, 150, 255, 0.3);
}

/* Tiny Bounce Effect on Hover */
.tx-table tbody tr:hover {
    animation: bounceHover 0.4s ease;
}

/* Bounce Animation Keyframes */
@keyframes bounceHover {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.02); }
    50%  { transform: scale(0.995); }
    70%  { transform: scale(1.015); }
    100% { transform: scale(1); }
}

/* Smooth Fade-In Animation for Dashboard Table */
.tx-table {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease forwards;
    animation-delay: 0.2s; /* slight delay after page load */
}

/* Keyframes for Fade-In Up Effect */
@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade-in effect for new transaction rows */
.fade-in-row {
    opacity: 0;
    transform: translateY(10px);
    animation: fadeInUp 0.6s ease forwards;
  }
  
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  
/* Optional: Soft hover highlight for transaction rows */
#tx-body tr:hover {
    background-color: rgba(0, 123, 255, 0.08); /* Light blue tint for light mode */
    transition: background-color 0.2s ease;
  }
  
  /* Dark mode hover highlight */
  body.dark-mode #tx-body tr:hover {
    background-color: rgba(0, 123, 255, 0.15); /* Slightly stronger in dark mode */
  }
  
/* 🆕 Public Stats Section */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
  }
  
  .stat-card {
    background: var(--color-bg-light, #fff);
    border: 1px solid #ddd;
    padding: 1rem;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  }
  
  .stat-card h4 {
    margin-bottom: 0.5rem;
    font-size: 1rem;
    color: var(--color-accent, #007bff);
  }
  
  .stat-card p {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--color-text-dark, #111);
  }
  
  body.dark-mode .stat-card {
    background: #222;
    border-color: #444;
    color: #eee;
  }
  
  body.dark-mode .stat-card h4 {
    color: #4fa3ff;
  }
  
  body.dark-mode .stat-card p {
    color: #fff;
  }

body.dark-mode .stat-card,
body.dark-mode .card,
body.dark-mode .dashboard-section,
body.dark-mode .tx-table table {
    background-color: var(--color-card-dark);
    color: var(--color-text-dark);
}

body.dark-mode .dashboard-title,
body.dark-mode .wallet-overview,
body.dark-mode .key-stats,
body.dark-mode .admin-controls {
    color: var(--color-text-dark);
}

body.dark-mode .tx-table thead {
    background-color: var(--color-card-dark);
    color: var(--color-text-dark);
}

/* 🌙 Dashboard Dark Mode Overrides */
body.dark-mode .dashboard-container {
    background-color: var(--color-background-dark);
  }
  
  body.dark-mode .stat-card,
  body.dark-mode .card {
    background-color: var(--color-card-dark);
    color: var(--color-text-dark);
    border-color: var(--color-border-dark);
  }
  
  body.dark-mode .dashboard-title,
  body.dark-mode .dashboard-section h2 {
    color: var(--color-text-dark);
  }
  
  body.dark-mode .tx-table table {
    background-color: var(--color-background-dark);
    color: var(--color-text-dark);
  }
  
  body.dark-mode .tx-table thead {
    background-color: var(--color-card-dark);
    color: var(--color-text-dark);
  }
  
  body.dark-mode .admin-controls button,
  body.dark-mode .admin-controls a {
    background-color: var(--color-accent-dark);
    color: var(--color-text-dark);
  }

  /* 🌞 Dashboard Light Mode */
.dashboard-container {
    background-color: var(--color-background-light);
  }
  
  .stat-card,
  .card {
    background-color: var(--color-card-light);
    color: var(--color-text-light);
    border-color: var(--color-border-light);
  }
  
  .dashboard-title,
  .dashboard-section h2 {
    color: var(--color-text-light);
  }
  
  .tx-table table {
    background-color: var(--color-background-light);
    color: var(--color-text-light);
  }
  
  .tx-table thead {
    background-color: var(--color-card-light);
    color: var(--color-text-light);
  }
  
  .admin-controls button,
  .admin-controls a {
    background-color: var(--color-accent-light);
    color: var(--color-text-light);
  }
  
  /* 🌙 Dashboard Dark Mode */
  body.dark-mode .dashboard-container {
    background-color: var(--color-background-dark);
  }
  
  body.dark-mode .stat-card,
  body.dark-mode .card {
    background-color: var(--color-card-dark);
    color: var(--color-text-dark);
    border-color: var(--color-border-dark);
  }
  
  body.dark-mode .dashboard-title,
  body.dark-mode .dashboard-section h2 {
    color: var(--color-text-dark);
  }
  
  body.dark-mode .tx-table table {
    background-color: var(--color-background-dark);
    color: var(--color-text-dark);
  }
  
  body.dark-mode .tx-table thead {
    background-color: var(--color-card-dark);
    color: var(--color-text-dark);
  }
  
  body.dark-mode .admin-controls button,
  body.dark-mode .admin-controls a {
    background-color: var(--color-accent-dark);
    color: var(--color-text-dark);
  }
  

/* 🌞 Light Mode - Card Styling */
.stat-card,
.card {
  background-color: var(--color-card-light);
  color: var(--color-text-light);
  border: 1px solid var(--color-border-light);
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

/* 🌙 Dark Mode - Card Styling */
body.dark-mode .stat-card,
body.dark-mode .card {
  background-color: var(--color-card-dark);
  color: var(--color-text-dark);
  border: 1px solid var(--color-border-dark);
  box-shadow: 0 2px 6px rgba(255, 255, 255, 0.05);
}

/* 🖱️ Hover Effect for Cards */
.stat-card:hover,
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

body.dark-mode .stat-card:hover,
body.dark-mode .card:hover {
  box-shadow: 0 6px 12px rgba(255, 255, 255, 0.1);
}

/* 🌞 Light Mode - Public Stats Cards */
#public-stats .stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background-color: var(--color-card-light);
    border: 1px solid var(--color-border-light);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    min-height: 120px;
  }
  
  #public-stats .stat-card h4 {
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-accent-light);
  }
  
  #public-stats .stat-card p {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-text-light);
  }
  
  /* 🌙 Dark Mode - Public Stats Cards */
  body.dark-mode #public-stats .stat-card {
    background-color: var(--color-card-dark);
    border: 1px solid var(--color-border-dark);
    box-shadow: 0 2px 6px rgba(255, 255, 255, 0.05);
  }
  
  body.dark-mode #public-stats .stat-card h4 {
    color: var(--color-accent-dark);
  }
  
  body.dark-mode #public-stats .stat-card p {
    color: var(--color-text-dark);
  }
  
/* 🌞 Light Mode - General Links */
a {
    color: var(--color-accent-light);
    text-decoration: none;
    transition: color 0.3s ease;
  }
  
  a:hover {
    color: #0056b3; /* darker blue hover in light mode */
    text-decoration: underline;
  }
  
  /* 🌙 Dark Mode - General Links */
  body.dark-mode a {
    color: var(--color-accent-dark);
  }
  
  body.dark-mode a:hover {
    color: #66b3ff; /* brighter blue on hover in dark mode */
    text-decoration: underline;
  }
  
/* 🌞 Light Mode - Button Hover */
button:hover {
    background-color: #0056b3; /* slightly darker blue */
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  }
  
  /* 🌙 Dark Mode - Button Hover */
  body.dark-mode button:hover {
    background-color: #3399ff; /* brighter lighter blue */
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.15);
  }

  /* 🌞 Light Mode - Links */
a {
    text-decoration: none;
  }
  
  a:hover {
    text-decoration: underline;
  }
  
  /* 🌙 Dark Mode - Links */
  body.dark-mode a {
    text-decoration: none;
  }
  
  body.dark-mode a:hover {
    text-decoration: underline;
  }
  
  #wallet-overview,
  #network-stats {
    display: none;
  }
  
  body.wallet-connected #wallet-overview,
  body.stats-available #network-stats {
    display: block;
  }
  
  .dashboard-container .placeholder-text {
    color: #222 !important;
    font-size: 1.1rem;
    font-weight: 500;
    margin: 1rem auto 2rem;
    text-align: center;
    font-style: italic;
    opacity: 0.85;
  }
  
.light-mode .placeholder-text {
  color: #fff;
}

.dark-mode .placeholder-text {
  color: #eee;
  opacity: 0.85;
  font-style: italic;
}

/* 🛠️ Final fix for wallet connection placeholder text */
.placeholder-text {
  font-size: 1.1rem;
  font-weight: 500;
  margin: 1rem auto 2rem;
  text-align: center;
  font-style: italic;
  opacity: 0.85;
}


/* ✅ Fix for wallet placeholder message visibility */
.placeholder-text {
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 500;
  text-align: center;
  margin-top: 1.5rem;
  font-style: italic;
  opacity: 0.85;
}



/* ✅ Override placeholder text styling on dashboard */
body.dashboard .placeholder-text {
  color: #ddd !important;
  font-style: italic;
  font-weight: 500;
  font-size: 1.1rem;
  text-align: center;
  opacity: 0.85;
}



body.dark-mode .placeholder-text {
  color: #eee;
}

body.light-mode .placeholder-text {
  color: #ffffff;
}