.job-card {
  border: 1px solid var(--border);
  padding: 14px;
  margin-bottom: 16px;
  border-left: 6px solid var(--accent);
  background: #fff;
  border-radius: 10px;
}
.job-card.critical {
  border-left-color: var(--danger);
  animation: flashRed 1s infinite alternate;
}
.job-card.overdue {
  background: #f7e9e6;
}
@keyframes flashRed {
  0% { background: #fff0f0; }
  100% { background: #ffe2e2; }
}

.btn-raise {
  display: block;
  background: #2f6f63;
  color: #fff;
  padding: 10px 20px;
  font-weight: bold;
  text-decoration: none;
  border-radius: 8px;
  margin: 10px auto;
  text-align: center;
  width: fit-content;
}

.btn-raise:hover {
  background: #245b51;
}

.job-details {
  border: 1px solid var(--border);
  padding: 15px;
  background: #fafafa;
  margin-bottom: 20px;
  border-radius: 10px;
}

.job-details.critical {
  border-color: var(--danger);
  animation: flashRed 1s infinite alternate;
}

.job-action-form textarea {
  width: 100%;
}

.action-buttons {
  display: flex;
  gap: 20px;
  margin-top: 10px;
}

.btn-green {
  background-color: #4caf50;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
}

.btn-red {
  background-color: #f44336;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
}

.job-notes {
  border-top: 1px solid #ccc;
  padding-top: 10px;
  margin-top: 20px;
}

.job-notes h3 {
  margin-bottom: 10px;
}

.job-notes ul {
  list-style: none;
  padding: 0;
}

.job-notes li {
  background: #f6f6f6;
  padding: 8px;
  margin-bottom: 6px;
  border-left: 4px solid #999;
}

.job-notes .timestamp {
  display: block;
  font-size: 12px;
  color: #666;
  margin-top: 4px;
}