/* Patient Appointments Tab Styles */

.patient-appointments--container {
  padding: var(--rem-24);
}

.patient-appointments--header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--rem-24);
}

.patient-appointments--header h2 {
  font-size: var(--rem-20);
  font-weight: var(--text-semibold);
  color: var(--neutral-900);
  margin: 0;
}

.patient-appointments--sections {
  display: flex;
  flex-direction: column;
  gap: var(--rem-32);
}

.patient-appointments--section h3 {
  font-size: var(--rem-16);
  font-weight: var(--text-semibold);
  color: var(--neutral-800);
  margin: 0 0 var(--rem-16) 0;
}

.patient-appointments--list {
  display: flex;
  flex-direction: column;
  gap: var(--rem-12);
}

.patient-appointment--card {
  display: flex;
  flex-direction: column;
  gap: var(--rem-12);
  padding: var(--rem-16);
  background-color: white;
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s, border-color 0.2s;
}

.patient-appointment--card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--primary-300);
}

.patient-appointment--card-past {
  opacity: 0.85;
}

.patient-appointment--card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.patient-appointment--date {
  display: flex;
  flex-direction: column;
  gap: var(--rem-2);
}

.patient-appointment--date strong {
  font-size: var(--text-sm);
  font-weight: var(--text-semibold);
  color: var(--neutral-900);
}

.patient-appointment--date span {
  font-size: var(--text-xs);
  color: var(--neutral-600);
}

.patient-appointment--badge {
  padding: var(--rem-4) var(--rem-10);
  border-radius: var(--badge-radius);
  font-size: var(--rem-11);
  font-weight: var(--text-medium);
  text-transform: capitalize;
}

.patient-appointment--badge-new_patient {
  background-color: var(--primary-100);
  color: var(--primary-700);
}

.patient-appointment--badge-follow_up {
  background-color: #DBEAFE;
  color: #1E40AF;
}

.patient-appointment--status {
  padding: var(--rem-4) var(--rem-10);
  border-radius: var(--badge-radius);
  font-size: var(--rem-11);
  font-weight: var(--text-medium);
  text-transform: capitalize;
}

.patient-appointment--status-completed {
  background-color: #D1FAE5;
  color: #065F46;
}

.patient-appointment--status-no_show {
  background-color: #FEF3C7;
  color: #92400E;
}

.patient-appointment--status-cancelled {
  background-color: var(--neutral-100);
  color: var(--neutral-600);
}

.patient-appointment--details {
  display: flex;
  gap: var(--rem-20);
  flex-wrap: wrap;
}

.patient-appointment--detail {
  display: flex;
  align-items: center;
  gap: var(--rem-6);
  font-size: var(--text-xs);
  color: var(--neutral-600);
}

.patient-appointment--detail svg {
  flex-shrink: 0;
  color: var(--neutral-500);
}

.patient-appointment--notes {
  padding: var(--rem-10);
  background-color: var(--neutral-50);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--neutral-700);
  line-height: 1.5;
}

.patient-appointments--empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--rem-48) var(--rem-24);
  text-align: center;
  color: var(--neutral-500);
}

.patient-appointments--empty svg {
  margin-bottom: var(--rem-16);
  stroke: var(--neutral-400);
}

.patient-appointments--empty p {
  font-size: var(--text-sm);
  color: var(--neutral-600);
  margin: 0;
}