/* ===================================
   Engadina Now - Alert Cards
   =================================== */

.alerts-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.alert-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  border-left: 3px solid;
  transition: all var(--duration-normal) var(--ease-smooth);
}

/* ===== Severity Colors ===== */
.severity-low {
  border-left-color: var(--status-info);
}

.severity-medium {
  border-left-color: var(--status-attention);
}

.severity-high {
  border-left-color: var(--status-warning);
}

.alert-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* ===== Alert Icon ===== */
.alert-icon {
  font-size: 24px;
  margin-bottom: var(--space-md);
  opacity: 0.8;
}

/* ===== Alert Header ===== */
.alert-header {
  display: flex;
  gap: var(--space-sm);
  font-size: var(--text-xsmall);
  color: var(--text-tertiary);
  margin-bottom: var(--space-md);
  font-weight: var(--weight-medium);
}

.alert-date,
.alert-time {
  white-space: nowrap;
}

.alert-date::after {
  content: '·';
  margin: 0 var(--space-xs);
  opacity: 0.5;
}

/* ===== Alert Title ===== */
.alert-title {
  font-size: var(--text-large);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-md) 0;
}

/* ===== Alert Message ===== */
.alert-message {
  font-size: var(--text-body);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-lg);
}

/* ===== Alert Details Link ===== */
.alert-details-link {
  font-size: var(--text-small);
  color: var(--lake-blue);
  text-decoration: none;
  font-weight: var(--weight-medium);
  transition: color var(--duration-fast) var(--ease-smooth);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.alert-details-link:hover {
  color: var(--forest-dark);
}

.alert-details-link::after {
  content: '→';
  transition: transform var(--duration-fast) var(--ease-smooth);
}

.alert-details-link:hover::after {
  transform: translateX(4px);
}

/* ===== No Alerts State ===== */
.no-alerts {
  background: linear-gradient(135deg,
    rgba(82, 166, 117, 0.05) 0%,
    rgba(82, 166, 117, 0.02) 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-3xl);
  text-align: center;
}

.no-alerts-icon {
  font-size: 48px;
  color: var(--status-ok);
  opacity: 0.6;
  margin-bottom: var(--space-md);
}

.no-alerts-text {
  font-size: var(--text-large);
  color: var(--text-primary);
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-xs);
}

.no-alerts-subtext {
  font-size: var(--text-small);
  color: var(--text-secondary);
  display: block;
}

/* ===== Alert Categories ===== */
.alert-category-badge {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  font-size: var(--text-xsmall);
  font-weight: var(--weight-medium);
  background: var(--bg-overlay);
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
}

/* ===== Responsive Adjustments ===== */
@media (max-width: 374px) {
  .alert-card {
    padding: var(--space-lg);
  }
}