/* =============================================================================
   app.css — Minty Extension Website — App Stylesheet
   Used by: dashboard.html, leaderboard.html, streamer.html
   Extends: style.css (must be loaded first)
   ============================================================================= */

/* =============================================================================
   1. App Navigation
   ============================================================================= */

.app-nav {
  position:      fixed;
  top:           0;
  left:          0;
  right:         0;
  height:        56px;
  z-index:       100;
  background:    rgba(17, 17, 17, 0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.app-nav-inner {
  max-width:   1200px;
  margin:      0 auto;
  padding:     0 24px;
  display:     flex;
  align-items: center;
  height:      100%;
  gap:         0;
}

.app-logo {
  font-size:       16px;
  font-weight:     700;
  color:           #ffffff;
  text-decoration: none;
  margin-right:    32px;
  flex-shrink:     0;
  letter-spacing:  -0.3px;
}

.app-logo span {
  color: var(--gold);
}

.app-nav-links {
  display: flex;
  gap:     4px;
  flex:    1;
}

.app-nav-link {
  padding:         6px 14px;
  font-size:       13px;
  font-weight:     500;
  color:           var(--text-muted);
  text-decoration: none;
  border-bottom:   2px solid transparent;
  height:          56px;
  display:         flex;
  align-items:     center;
  transition:      color 0.18s ease, border-color 0.18s ease;
  white-space:     nowrap;
}

.app-nav-link:hover {
  color: #ffffff;
}

.app-nav-link.active {
  color:              var(--red);
  border-bottom-color: var(--red);
}

/* Wallet address chip in nav */
.wallet-chip {
  margin-left:  auto;
  background:   var(--red-dim);
  color:        var(--red);
  border:       1px solid rgba(187, 10, 30, 0.3);
  padding:      4px 12px;
  font-size:    11px;
  font-family:  monospace;
  font-weight:  600;
  cursor:       pointer;
  transition:   background 0.18s ease, color 0.18s ease;
  flex-shrink:  0;
  white-space:  nowrap;
  overflow:     hidden;
  text-overflow: ellipsis;
  max-width:    200px;
}

.wallet-chip:hover {
  background: var(--red);
  color:      #ffffff;
}

/* =============================================================================
   2. App Body Shell
   ============================================================================= */

.app-body {
  padding-top: 56px; /* offset for fixed nav */
  min-height:  100vh;
  background:  var(--bg);
}

/* =============================================================================
   3. Page Header (inside app pages)
   ============================================================================= */

.page-header {
  padding:       32px 0 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 32px;
}

.page-title {
  font-size:      24px;
  font-weight:    700;
  color:          #ffffff;
  letter-spacing: -0.5px;
  line-height:    1.2;
}

.page-sub {
  font-size:  13px;
  color:      var(--text-muted);
  margin-top: 4px;
}

/* =============================================================================
   4. App Container
   ============================================================================= */

.app-container {
  max-width: 1200px;
  margin:    0 auto;
  padding:   0 24px 48px;
}

/* =============================================================================
   5. Stats Row
   ============================================================================= */

.stats-row {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   2px;
  margin-bottom:         32px;
}

.stat-card {
  background:  var(--bg-card);
  border:      1px solid var(--border);
  border-top:  2px solid var(--red);
  padding:     20px;
}

.stat-value {
  font-size:            28px;
  font-weight:          700;
  color:                var(--gold);
  font-variant-numeric: tabular-nums;
  line-height:          1;
}

.stat-label {
  font-size:      11px;
  color:          var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-top:     6px;
}

/* =============================================================================
   6. Two-Column Layout
   ============================================================================= */

.two-col {
  display:               grid;
  grid-template-columns: 2fr 1fr;
  gap:                   24px;
  margin-bottom:         32px;
}

/* =============================================================================
   7. Section Box (panel / card with header)
   ============================================================================= */

.section-box {
  background:    var(--bg-card);
  border:        1px solid var(--border);
  margin-bottom: 24px;
}

.section-box-header {
  padding:         16px 20px;
  border-bottom:   1px solid var(--border);
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             12px;
}

.section-box-title {
  font-size:      13px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color:          var(--text-body);
}

.section-box-body {
  padding: 20px;
}

/* =============================================================================
   8. Chart
   ============================================================================= */

.chart-wrap {
  padding: 4px 0;
}

.chart-wrap canvas {
  width:   100%;
  height:  160px;
  display: block;
}

/* =============================================================================
   9. Top Creators List
   ============================================================================= */

.top-creators-list {
  list-style: none;
}

.creator-row {
  display:       flex;
  align-items:   center;
  gap:           12px;
  padding:       10px 0;
  border-bottom: 1px solid var(--border);
}

.creator-row:last-child {
  border-bottom: none;
}

.creator-rank {
  width:       20px;
  font-size:   11px;
  color:       var(--text-muted);
  font-weight: 700;
  text-align:  right;
  flex-shrink: 0;
}

.creator-info {
  flex:      1;
  min-width: 0; /* allow text-overflow to work */
}

.creator-name {
  font-size:     13px;
  font-weight:   600;
  color:         #ffffff;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.creator-addr {
  font-size:   10px;
  color:       var(--text-muted);
  font-family: monospace;
}

.creator-amount {
  font-size:   13px;
  font-weight: 700;
  color:       var(--gold);
  white-space: nowrap;
  flex-shrink: 0;
}

.creator-bar-wrap {
  width:      100%;
  background: var(--border);
  height:     2px;
  margin-top: 4px;
}

.creator-bar {
  height:     2px;
  background: var(--red);
  transition: width 0.4s ease;
}

/* =============================================================================
   10. Budget Section
   ============================================================================= */

.budget-item {
  padding:       12px 0;
  border-bottom: 1px solid var(--border);
}

.budget-item:last-child {
  border-bottom: none;
}

.budget-label {
  font-size:      11px;
  color:          var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom:  8px;
}

.budget-values {
  display:         flex;
  justify-content: space-between;
  font-size:       12px;
  color:           var(--text-body);
  margin-bottom:   6px;
}

.budget-bar-wrap {
  height:        4px;
  background:    var(--border);
  border-radius: 0;
  overflow:      hidden;
}

.budget-bar {
  height:      4px;
  background:  var(--red);
  transition:  width 0.4s ease;
  max-width:   100%;
}

/* Over-budget state: flip bar to gold as warning */
.budget-bar.over {
  background: var(--gold);
}

/* =============================================================================
   11. Data Table
   ============================================================================= */

.data-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       13px;
}

.data-table th {
  text-align:      left;
  padding:         10px 12px;
  font-size:       10px;
  font-weight:     700;
  text-transform:  uppercase;
  letter-spacing:  0.8px;
  color:           var(--text-muted);
  border-bottom:   1px solid var(--border);
  white-space:     nowrap;
}

.data-table td {
  padding:        12px;
  border-bottom:  1px solid var(--border);
  color:          var(--text-body);
  vertical-align: middle;
}

.data-table tr:last-child td {
  border-bottom: none;
}

.data-table tr.clickable {
  cursor: pointer;
}

.data-table tr.clickable:hover td {
  background: rgba(255, 255, 255, 0.02);
}

/* Status badges */
.status-badge {
  display:        inline-block;
  padding:        2px 8px;
  font-size:      10px;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height:    1.6;
}

.status-badge.confirmed {
  background: var(--red-dim);
  color:      var(--red);
}

.status-badge.failed {
  background: rgba(255, 68, 68, 0.1);
  color:      #ff4444;
}

/* Explorer tx link */
.tx-link {
  color:           var(--gold);
  text-decoration: none;
  font-family:     monospace;
  font-size:       11px;
  transition:      text-decoration 0.18s ease;
}

.tx-link:hover {
  text-decoration: underline;
}

/* Empty state within a table or panel */
.empty-state {
  text-align: center;
  padding:    48px 24px;
  color:      var(--text-muted);
}

.empty-state p {
  margin-bottom: 16px;
}

.empty-state a {
  color:           var(--gold);
  text-decoration: none;
}

.empty-state a:hover {
  text-decoration: underline;
}

/* =============================================================================
   12. Leaderboard — Controls Row
   ============================================================================= */

.controls-row {
  display:       flex;
  gap:           16px;
  align-items:   center;
  margin-bottom: 24px;
  flex-wrap:     wrap;
}

.filter-input {
  background:  var(--bg-card);
  border:      1px solid var(--border);
  color:       #ffffff;
  padding:     8px 14px;
  font-size:   13px;
  flex:        1;
  min-width:   200px;
  outline:     none;
  transition:  border-color 0.18s ease;
}

.filter-input::placeholder {
  color: var(--text-muted);
}

.filter-input:focus {
  border-color: var(--red);
}

.sort-select {
  background:  var(--bg-card);
  border:      1px solid var(--border);
  color:       #ffffff;
  padding:     8px 14px;
  font-size:   13px;
  cursor:      pointer;
  outline:     none;
  transition:  border-color 0.18s ease;
  appearance:  none;
}

.sort-select:focus {
  border-color: var(--red);
}

/* Rank highlights */
.rank-gold {
  color:       var(--gold);
  font-weight: 800;
}

.rank-silver {
  color:       #aaaaaa;
  font-weight: 700;
}

.rank-bronze {
  color:       #cd7f32;
  font-weight: 700;
}

/* Inline network tag (used inside table cells) */
.network-tag {
  display:        inline-block;
  padding:        1px 6px;
  background:     var(--red-dim);
  color:          var(--red);
  font-size:      10px;
  margin:         1px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight:    600;
}

/* =============================================================================
   13. Streamer — Search
   ============================================================================= */

.search-bar-wrap {
  margin-bottom: 32px;
}

.search-form {
  display: flex;
  gap:     0;
}

.search-input {
  flex:        1;
  background:  var(--bg-card);
  border:      1px solid var(--border);
  border-right: none;
  color:       #ffffff;
  padding:     12px 16px;
  font-size:   14px;
  outline:     none;
  transition:  border-color 0.18s ease;
}

.search-input::placeholder {
  color: var(--text-muted);
}

.search-input:focus {
  border-color: var(--red);
}

.search-btn {
  background:  var(--red);
  color:       #ffffff;
  border:      none;
  padding:     12px 24px;
  font-size:   13px;
  font-weight: 600;
  cursor:      pointer;
  transition:  background 0.18s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.search-btn:hover {
  background: var(--red-dark);
}

/* =============================================================================
   14. Streamer — Profile Card
   ============================================================================= */

.profile-card {
  background:   var(--bg-card);
  border:       1px solid var(--border);
  border-top:   3px solid var(--red);
  padding:      24px;
  margin-bottom: 24px;
}

.profile-name {
  font-size:     20px;
  font-weight:   700;
  color:         #ffffff;
  margin-bottom: 4px;
}

.profile-address {
  font-family:   monospace;
  font-size:     12px;
  color:         var(--text-muted);
  margin-bottom: 20px;
  display:       flex;
  align-items:   center;
  gap:           8px;
  flex-wrap:     wrap;
  word-break:    break-all;
}

.copy-addr-btn {
  background: none;
  border:     1px solid var(--border);
  color:      var(--text-muted);
  padding:    2px 8px;
  font-size:  11px;
  cursor:     pointer;
  transition: border-color 0.18s ease, color 0.18s ease;
  flex-shrink: 0;
}

.copy-addr-btn:hover {
  border-color: var(--gold);
  color:        var(--gold);
}

/* Streamer profile stat mini-grid */
.profile-stats {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   2px;
  margin-bottom:         20px;
}

.profile-stat {
  background: var(--bg);
  padding:    14px;
}

.profile-stat-value {
  font-size:   18px;
  font-weight: 700;
  color:       var(--gold);
  line-height: 1;
}

.profile-stat-label {
  font-size:      10px;
  color:          var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top:     4px;
}

/* Network pills (supported networks on a profile) */
.network-pills {
  display:   flex;
  gap:       6px;
  flex-wrap: wrap;
}

.network-pill {
  padding:        3px 10px;
  border:         1px solid var(--border);
  color:          var(--text-muted);
  font-size:      11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height:    1.6;
}

/* =============================================================================
   15. Responsive — App Pages
   ============================================================================= */

/* Tablet */
@media (max-width: 900px) {
  .two-col {
    grid-template-columns: 1fr;
  }

  .profile-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Tablet / small */
@media (max-width: 768px) {
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .app-logo {
    margin-right: 16px;
  }

  .app-nav-link {
    padding: 6px 10px;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .stats-row {
    grid-template-columns: 1fr 1fr;
  }

  .stat-value {
    font-size: 22px;
  }

  .controls-row {
    flex-direction: column;
    align-items:    stretch;
  }

  .filter-input {
    min-width: unset;
    width:     100%;
  }

  .profile-stats {
    grid-template-columns: 1fr 1fr;
  }

  .app-nav-links {
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .app-nav-links::-webkit-scrollbar {
    display: none;
  }

  .wallet-chip {
    display: none; /* hide on very small screens, shown elsewhere if needed */
  }

  .search-form {
    flex-direction: column;
  }

  .search-input {
    border-right: 1px solid var(--border);
    border-bottom: none;
  }

  .search-btn {
    padding: 12px;
  }
}