/* 在宅クリニック シフト管理システム カスタムスタイル */

.nav-btn {
  @apply px-3 py-2 rounded-md text-sm font-medium hover:bg-blue-700 transition-colors;
}

.nav-btn.active {
  @apply bg-blue-800;
}

.tab-content {
  @apply transition-opacity duration-200;
}

.table-row {
  @apply border-b border-gray-200 hover:bg-gray-50;
}

.status-badge {
  @apply px-2 py-1 rounded-full text-xs font-medium;
}

.status-scheduled {
  @apply bg-yellow-100 text-yellow-800;
}

.status-confirmed {
  @apply bg-blue-100 text-blue-800;
}

.status-completed {
  @apply bg-green-100 text-green-800;
}

.status-cancelled {
  @apply bg-red-100 text-red-800;
}

.role-badge {
  @apply px-2 py-1 rounded-full text-xs font-medium;
}

.role-doctor {
  @apply bg-purple-100 text-purple-800;
}

.role-nurse {
  @apply bg-blue-100 text-blue-800;
}

.role-coordinator {
  @apply bg-green-100 text-green-800;
}

.role-admin {
  @apply bg-gray-100 text-gray-800;
}

.form-input {
  @apply mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500;
}

.form-select {
  @apply mt-1 block w-full px-3 py-2 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500;
}

.form-textarea {
  @apply mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 resize-vertical;
}

.btn-primary {
  @apply bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors;
}

.btn-secondary {
  @apply bg-gray-600 text-white px-4 py-2 rounded-lg hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 transition-colors;
}

.btn-danger {
  @apply bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 transition-colors;
}

.card {
  @apply bg-white rounded-lg shadow-md p-6;
}

.alert-success {
  @apply bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4;
}

.alert-error {
  @apply bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4;
}