/* Custom styles for Dotfile Dashboard */

/* Case Card Styles */
.case-card {
  @apply bg-white shadow-sm hover:shadow-lg transition-all duration-200 cursor-pointer;
  border-radius: 12px;
  border-color: #e5e7eb;
  border-width: thin;
  padding: 1em;
  margin-bottom: 1em;
}

.case-card:hover {
  @apply border-gray-400 shadow-lg transform translate-y-[-2px];
}

/* Flag Icons Styles */
.flag-icon {
  @apply opacity-75 hover:opacity-100 transition-opacity cursor-help;
  width: 24px;
  height: 24px;
  display: inline-block;
  margin-right: 8px;
}

/* Icons now have native colors - no filters needed */

.flag-icon:last-child {
  margin-right: 0;
}

.flag-icons-container {
  @apply flex items-center mt-3;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}

/* Status indicators */
.status-indicator {
  @apply w-2 h-2 rounded-full inline-block mr-2;
}

.status-draft .status-indicator {
  @apply bg-gray-400;
}

.status-open .status-indicator {
  @apply bg-blue-500;
}

.status-approved .status-indicator {
  @apply bg-green-500;
}

.status-rejected .status-indicator {
  @apply bg-red-500;
}

.status-closed .status-indicator {
  @apply bg-gray-600;
}

/* Column headers */
.column-header-draft {
  @apply bg-gray-50 border-gray-200;
}

.column-header-open {
  @apply bg-blue-50 border-blue-200;
}

.column-header-approved {
  @apply bg-green-50 border-green-200;
}

.column-header-rejected {
  @apply bg-red-50 border-red-200;
}

.column-header-closed {
  @apply bg-gray-50 border-gray-200;
}

/* Loading states */
.loading-pulse {
  @apply animate-pulse;
}

/* Compact company info */
.company-info {
  @apply text-xs text-gray-600 truncate;
}

/* Removed old flag styles - now using flag-icons-container */

/* Notes count badge */
.notes-badge {
  @apply bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full flex items-center;
}

/* Sync status indicator */
.sync-indicator {
  @apply flex items-center space-x-2;
}

.sync-indicator.syncing {
  @apply text-blue-600;
}

.sync-indicator.error {
  @apply text-red-600;
}

.sync-indicator.success {
  @apply text-green-600;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .dashboard-board {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }
}

@media (max-width: 640px) {
  .dashboard-board {
    grid-template-columns: 1fr !important;
  }
}

/* Custom scrollbar for case containers */
.cases-container {
  max-height: 70vh;
  overflow-y: auto;
}

.cases-container::-webkit-scrollbar {
  width: 6px;
}

.cases-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.cases-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.cases-container::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}

/* Empty state */
.empty-state {
  @apply text-gray-500 text-center py-8 text-sm;
}

/* Card hover effects */
.case-card {
  transition: all 0.2s ease-in-out;
}

.case-card:hover {
  transform: translateY(-1px);
}

/* Filter and search styling */
.filter-section {
  @apply bg-white border-b border-gray-200 sticky top-0 z-10;
}

/* Animation for new cases */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.case-card.new {
  animation: slideIn 0.3s ease-out;
}

/* Primary button customization */
.btn-primary {
  @apply bg-primary hover:bg-primary-dark text-white px-4 py-2 rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2;
}