/* ================================
   Console View Styling
   Dark retro console theme with design system
   ================================ */

/* Import design system */
@import url('design-system.css');

/* === Global Reset === */
*, *::before, *::after {
  box-sizing: border-box;
}

/* === Base Styles === */
body {
  background-color: var(--color-bg-darkest);
  color: var(--color-text-primary);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-base);
  margin: 0;
  padding: var(--spacing-md);
  overflow-x: hidden;
}

/* === Section Container === */
#triggers {
  background-color: transparent;
  border: none;
  box-shadow: none;
}

/* === Section Headers === */
h2 {
  color: var(--color-text-dim);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-normal);
  text-shadow: none;
  border-bottom: none;
  padding-bottom: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
}

/* === Card Container === */
.box-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--card-gap);
  margin-bottom: var(--spacing-xl);
  padding: 0;
}

/* ===================================
   UNIFIED CARD BASE STYLES
   (Applied to both active and stopped cards)
   =================================== */
.trigger-section,
.stopped-token-card {
  background: linear-gradient(145deg, var(--color-bg-card), var(--color-bg-card-secondary));
  border: 2px solid;
  border-color: var(--color-border-mid) var(--color-border-darkest) var(--color-border-darkest) var(--color-border-mid);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md), var(--shadow-inset);
  padding: var(--card-padding);
  min-width: var(--card-min-width);
  max-width: var(--card-max-width);
  flex: 1 1 var(--card-flex-basis);
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  word-break: break-word;
  overflow-wrap: break-word;
  overflow: hidden;
  position: relative;
  transition: all var(--transition-normal);
}

/* Active card hover state */
.trigger-section:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-glow-primary), var(--shadow-inset);
  transform: translateY(-1px);
}

/* ===================================
   STOPPED CARD MODIFIERS
   (Visual differences only - same structure)
   =================================== */
.stopped-token-card {
  filter: grayscale(60%);
  opacity: 0.75;
}

.stopped-token-card:hover {
  filter: grayscale(30%);
  opacity: 0.9;
  border-color: var(--color-border-light);
}

/* Stopped badge overlay */
.stopped-badge {
  position: absolute;
  top: var(--spacing-xs);
  left: var(--spacing-xs);
  background: rgba(var(--color-danger-rgb), 0.9);
  color: #fff;
  padding: var(--spacing-xs) 7px;
  border-radius: 2px;
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: var(--z-badge);
  box-shadow: var(--shadow-sm);
}

/* Stopped reason display */
.stopped-reason {
  background: rgba(var(--color-danger-rgb), 0.15);
  border: 1px solid rgba(var(--color-danger-rgb), 0.3);
  border-radius: 2px;
  padding: var(--spacing-xs) 7px;
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-xs);
  color: #ff6b6b;
}

/* Time since stopped */
.stopped-time {
  color: var(--color-text-disabled);
  font-size: var(--font-size-xs);
  font-style: italic;
  margin-top: var(--spacing-xs);
}

/* Override green accents for stopped cards */
.stopped-token-card .token-logo {
  box-shadow: var(--shadow-md), 0 0 0 1px var(--color-text-muted);
}

.stopped-token-card h3 {
  color: var(--color-text-secondary);
  text-shadow: none;
}

.stopped-token-card .copy-btn:hover,
.stopped-token-card .link-btn:hover {
  border-color: var(--color-text-muted);
  box-shadow: 0 0 5px rgba(100, 100, 100, 0.3);
}

/* ===================================
   CARD HEADERS & TITLES
   =================================== */
.trigger-section h3,
.stopped-token-card h3 {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: var(--font-size-sm);
  color: var(--color-primary);
  text-shadow: var(--text-shadow-glow-primary);
  font-family: var(--font-family-mono);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  flex-wrap: wrap;
}

/* ===================================
   TOKEN HEADER (Banner/Logo)
   =================================== */
.token-header {
  position: relative;
  width: calc(100% + calc(var(--card-padding) * 2));
  margin: calc(var(--card-padding) * -1) calc(var(--card-padding) * -1) 0 calc(var(--card-padding) * -1);
  min-height: 50px;
  overflow: visible;
  z-index: var(--z-header);
}

.token-banner {
  width: 100%;
  height: 63px;
  object-fit: cover;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  display: block;
  background: linear-gradient(145deg, var(--color-bg-card), var(--color-bg-card-secondary));
}

.token-logo {
  position: absolute;
  bottom: -14px;
  left: var(--spacing-sm);
  width: 39px;
  height: 39px;
  border-radius: var(--radius-circle);
  border: 2px solid var(--color-bg-card-secondary);
  background: var(--color-bg-darkest);
  box-shadow: var(--shadow-md), 0 0 0 1px var(--color-primary);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  z-index: 20;
  object-fit: cover;
}

.token-logo:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 14px rgba(var(--color-primary-rgb), 0.4), 0 0 0 1px var(--color-primary);
}

.token-score-badge {
  position: absolute;
  top: var(--spacing-xs);
  right: var(--spacing-xs);
  background: rgba(0, 0, 0, 0.75);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  padding: var(--spacing-xs) var(--spacing-xs);
  font-size: var(--font-size-xs);
  font-weight: bold;
  color: var(--color-primary);
  text-shadow: 0 0 4px rgba(var(--color-primary-rgb), 0.6);
  z-index: 15;
  font-family: var(--font-family-mono);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.token-score-badge::before {
  content: '⭐';
  font-size: 0.9em;
}

.token-score-inline {
  float: right;
  background: rgba(var(--color-primary-rgb), 0.1);
  border: 1px solid var(--color-border-mid);
  border-radius: 2px;
  padding: 1px var(--spacing-xs);
  font-size: var(--font-size-xs);
  font-weight: bold;
  color: var(--color-primary-dim);
  font-family: var(--font-family-mono);
}

.token-content-with-header {
  margin-top: 25px;
  position: relative;
  z-index: var(--z-base);
}

/* ===================================
   CARD STATS & DATA
   =================================== */

/* 3-column compact stat row for market data */
.stat-row-compact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  margin: 2px 0;
  padding: 2px 0;
  border-top: 1px solid var(--color-border-dark);
}

.stat-row-compact .stat-item {
  flex: 1 1 30%;
  min-width: 54px;
  text-align: center;
  padding: 1px;
}

.stat-row-compact .stat-label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 1px;
}

.stat-row-compact .stat-value {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  font-family: var(--font-family-mono);
  font-weight: 600;
}

.stat-row-compact .stat-value.price-positive {
  color: var(--color-price-positive);
  text-shadow: var(--text-shadow-glow-price-positive);
}

.stat-row-compact .stat-value.price-negative {
  color: var(--color-price-negative);
  text-shadow: var(--text-shadow-glow-price-negative);
}

/* Standard stat row */
.stat-row {
  display: flex;
  justify-content: space-between;
  margin: var(--spacing-xs) 0;
  padding: 1px 0;
}

.stat-label {
  font-weight: 600;
  color: var(--color-text-dim);
  text-transform: uppercase;
  font-size: var(--font-size-xs);
  letter-spacing: 0.5px;
}

.stat-value {
  color: var(--color-text-primary);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
}

/* Price indicators */
.price-positive {
  color: var(--color-price-positive);
  font-weight: 700;
  text-shadow: var(--text-shadow-glow-price-positive);
}

.price-negative {
  color: var(--color-price-negative);
  font-weight: 700;
  text-shadow: var(--text-shadow-glow-price-negative);
}

/* ===================================
   EXPANDABLE DETAILS
   =================================== */
.match-details {
  margin-top: var(--spacing-xs);
  border-top: 1px solid var(--color-border-dark);
  padding-top: var(--spacing-xs);
}

.match-details summary {
  cursor: pointer;
  font-size: var(--font-size-xs);
  color: var(--color-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: var(--spacing-xs) 0;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.match-details summary::-webkit-details-marker {
  display: none;
}

.match-details summary::before {
  content: '▸';
  color: var(--color-primary);
  font-size: 0.9em;
  transition: transform var(--transition-fast);
}

.match-details[open] summary::before {
  transform: rotate(90deg);
}

.match-details summary:hover {
  color: var(--color-primary);
}

.trigger-stats {
  margin-top: var(--spacing-xs);
  padding-top: var(--spacing-xs);
  border-top: 1px solid var(--color-border-dark);
  font-size: var(--font-size-xs);
  width: 100%;
}

.summary {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  word-break: break-word;
  overflow-wrap: break-word;
  font-family: var(--font-family-mono);
}

/* ===================================
   CHANNEL LIST
   =================================== */
.channel-list {
  margin: var(--spacing-xs) 0 0 0;
  padding-left: var(--spacing-md);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  list-style: none;
}

.channel-list li {
  margin: 1px 0;
  padding-left: var(--spacing-sm);
  position: relative;
}

.channel-list li:before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--color-primary);
}

/* ===================================
   CONTRACT ADDRESS
   =================================== */
.contract-address {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  word-break: break-all;
  margin: var(--spacing-xs) 0;
  padding: var(--spacing-xs);
  background: var(--color-bg-input);
  border: 1px solid var(--color-border-dark);
  border-radius: 2px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-xs);
}

.contract-address .address-text {
  flex: 1;
  user-select: all;
}

/* ===================================
   BUTTONS
   =================================== */
.copy-btn, .link-btn {
  background: var(--color-border-mid);
  border: 1px solid var(--color-border-dark);
  color: var(--color-primary);
  padding: var(--spacing-xs) 7px;
  border-radius: 2px;
  cursor: pointer;
  font-size: var(--font-size-xs);
  transition: all var(--transition-fast);
  min-width: 24px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family: inherit;
  line-height: var(--line-height-tight);
}

.copy-btn:hover, .link-btn:hover {
  background: var(--color-border-light);
  border-color: var(--color-primary);
  box-shadow: 0 0 5px rgba(var(--color-primary-rgb), 0.3);
}

.copy-btn.copied {
  background: var(--color-primary);
  color: var(--color-bg-darkest);
}

/* ===================================
   BADGES
   =================================== */
.badge {
  display: inline-block;
  padding: 2px var(--spacing-xs);
  border-radius: 2px;
  font-size: var(--font-size-xs);
  margin-left: var(--spacing-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid;
}

.badge-success {
  background: rgba(var(--color-primary-rgb), 0.15);
  color: var(--color-primary);
  border-color: rgba(var(--color-primary-rgb), 0.3);
  text-shadow: var(--text-shadow-glow-primary);
}

.badge-info {
  background: rgba(0, 136, 255, 0.15);
  color: #0088ff;
  border-color: rgba(0, 136, 255, 0.3);
}

.badge-warning {
  background: rgba(255, 200, 0, 0.15);
  color: #ffc800;
  border-color: rgba(255, 200, 0, 0.3);
}

/* ===================================
   AGE-BASED CARD VARIATIONS
   =================================== */

/* Full styling for tokens with confluence */
.trigger-new {
  background: linear-gradient(145deg, #1a3a2a, #14281f) !important;
  border-color: var(--color-success) #1a5a2a #1a5a2a var(--color-success) !important;
  box-shadow: var(--shadow-glow-success) !important;
}

.trigger-medium {
  background: linear-gradient(145deg, #3a2a1a, #281f14) !important;
  border-color: var(--color-warning) #8c4a00 #8c4a00 var(--color-warning) !important;
  box-shadow: var(--shadow-glow-warning) !important;
}

.trigger-old {
  background: linear-gradient(145deg, #2a1a3a, #1f1428) !important;
  border-color: var(--color-info) #5a2a7a #5a2a7a var(--color-info) !important;
  box-shadow: var(--shadow-glow-info) !important;
}

/* Border-only styles for age indication without confluence */
.trigger-border-new {
  border-color: var(--color-success) #1a5a2a #1a5a2a var(--color-success) !important;
}

.trigger-border-medium {
  border-color: var(--color-warning) #8c4a00 #8c4a00 var(--color-warning) !important;
}

.trigger-border-old {
  border-color: var(--color-info) #5a2a7a #5a2a7a var(--color-info) !important;
}

/* ===================================
   PRICE CHARTS
   =================================== */
.price-chart-container {
  width: 100%;
  height: 50px;
  margin: 2px 0;
  background: var(--color-bg-input);
  border: none;
  border-radius: 0;
  padding: 0;
  position: relative;
  z-index: var(--z-base);
  box-sizing: border-box;
}

.price-chart-container canvas {
  width: 100% !important;
  height: 100% !important;
}

.chart-loading {
  color: var(--color-text-disabled);
  font-size: var(--font-size-xs);
  text-align: center;
  padding: 7px;
  line-height: var(--line-height-tight);
}

/* ===================================
   CRT SCANLINE EFFECT
   =================================== */
.trigger-section::before,
.stopped-token-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.1) 0px,
    rgba(0, 0, 0, 0.1) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
  opacity: 0.3;
  z-index: 0;
}

/* ===================================
   SCROLLBAR STYLING
   =================================== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg-dark);
  border: 1px solid var(--color-border-dark);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border-mid);
  border: 1px solid var(--color-border-dark);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-light);
}

/* ===================================
   RESPONSIVE DESIGN
   Bootstrap-aligned breakpoints
   =================================== */

/* Small devices (576px and up) */
@media (min-width: 576px) {
  body {
    padding: var(--spacing-lg);
  }
}

/* Medium devices (768px and up) */
@media (min-width: 768px) {
  .box-container {
    gap: var(--spacing-md);
  }

  .price-chart-container {
    height: 63px;
  }
}

/* Mobile adjustments (below 576px) */
@media (max-width: 575px) {
  body {
    padding: var(--spacing-sm);
  }

  .box-container {
    gap: var(--spacing-sm);
  }

  .trigger-section,
  .stopped-token-card {
    min-width: 100%;
    max-width: 100%;
    flex: 1 1 100%;
  }

  .token-header {
    width: calc(100% + calc(var(--card-padding) * 2));
    margin: calc(var(--card-padding) * -1) calc(var(--card-padding) * -1) 0 calc(var(--card-padding) * -1);
  }

  .token-banner {
    height: 49px;
  }

  .token-logo {
    width: 34px;
    height: 34px;
    bottom: -11px;
  }

  .token-content-with-header {
    margin-top: 20px;
  }

  .contract-address {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-xs);
  }

  .contract-address .address-text {
    text-align: center;
    padding: var(--spacing-xs) 0;
  }

  .contract-address > div {
    display: flex;
    gap: var(--spacing-xs);
    justify-content: stretch;
  }

  .copy-btn, .link-btn {
    flex: 1;
    padding: var(--spacing-xs);
  }

  .price-chart-container {
    height: 42px;
  }

  /* Stack compact stats vertically on very small screens */
  .stat-row-compact {
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  .stat-row-compact .stat-item {
    flex: 1 1 100%;
    display: flex;
    justify-content: space-between;
    text-align: left;
  }

  .stat-row-compact .stat-label {
    display: inline;
    margin-bottom: 0;
  }

  .stat-row-compact .stat-value {
    display: inline;
  }
}

/* Extra small adjustments (below 400px) */
@media (max-width: 399px) {
  body {
    padding: var(--spacing-xs);
  }

  .box-container {
    gap: var(--spacing-xs);
  }

  .token-banner {
    height: 42px;
  }

  .token-logo {
    width: 28px;
    height: 28px;
    left: var(--spacing-sm);
    bottom: -10px;
  }

  .token-content-with-header {
    margin-top: 17px;
  }

  .price-chart-container {
    height: 35px;
  }

  /* Stack standard stat rows vertically */
  .stat-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
  }

  .stat-label {
    margin-bottom: 1px;
  }
}

/* ===================================
   LEGACY SUPPORT
   Compact stopped token section (if still in use)
   =================================== */
.stopped-token-section {
  background: linear-gradient(145deg, #1f1a1a, #141010);
  border: 1px solid var(--color-border-mid);
  border-radius: var(--radius-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
  transition: all var(--transition-fast);
  width: 100%;
  max-width: 235px;  /* Updated to match 30% reduction (was 335px) */
  opacity: 0.7;
  font-size: var(--font-size-xs);
}

.stopped-token-section:hover {
  border-color: #555;
  opacity: 1;
}

.stopped-token-section h3 {
  color: #888;
  margin: 0 0 var(--spacing-xs) 0;
  font-size: var(--font-size-sm);
  font-weight: 500;
}

/* Additional last-mentioned and price-updated styling */
.last-mentioned,
.price-updated {
  font-size: var(--font-size-xs);
  color: var(--color-text-dim);
  margin: 2px 0;
}