.status-green {color: #4ade80;}
.status-red {color: #f87171;}
.status-yellow {color: #facc15;}
.cards-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(220px, 1fr));
    gap: 20px;
    width: 100%;
    max-width: 1200px;
}

.card { 
    border: 1px solid #3F51B5;
    border-radius: 12px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-highlight {
  border: 1px solid #fab005;
}

.card-title {
  color: #64748b;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.card-value {
  color: #757575;
  font-size: 2.2rem;
  font-weight: bold;
  font-family: monospace, sans-serif; 
}

.highlight-text {
  color: #fab005; 
}

.card-trend {
  font-size: 0.85rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
}

.trend-up {
  color: #10b981;
}

.trend-down-red {
  color: #f87171; 
}

.trend-down-red .arrow {
  transform: rotate(0deg); 
}

.trend-down-orange {
  color: #f97316; 
}

@media (max-width: 1024px) {
  .dashboard-container {
    grid-template-columns: repeat(2, 1fr);
  }
  .search-action {display: block;}
}

@media (max-width: 778px) {
  .dashboard-container {
    grid-template-columns: 1fr; 
  }
  .cards-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
  .search-action {display: block;}
}