/* Component Styles for Abbot.app */

/* Card Components */
.card {
    @apply bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700;
}

.card-header {
    @apply p-6 border-b border-gray-200 dark:border-gray-700;
}

.card-body {
    @apply p-6;
}

.card-footer {
    @apply p-6 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/50;
}

/* Button Components */
.btn {
    @apply inline-flex items-center justify-center px-4 py-2 rounded-lg font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.btn-primary {
    @apply bg-helionyx-600 text-white hover:bg-helionyx-700 focus:ring-helionyx-500;
}

.btn-secondary {
    @apply bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500;
}

.btn-success {
    @apply bg-green-600 text-white hover:bg-green-700 focus:ring-green-500;
}

.btn-warning {
    @apply bg-yellow-600 text-white hover:bg-yellow-700 focus:ring-yellow-500;
}
.btn-danger {
    @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
}

.btn-outline {
    @apply border-2 bg-transparent hover:bg-opacity-10;
}

.btn-sm {
    @apply px-3 py-1.5 text-sm;
}

.btn-lg {
    @apply px-6 py-3 text-lg;
}

/* Badge Components */
.badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge-primary {
    @apply bg-helionyx-100 text-helionyx-800 dark:bg-helionyx-900 dark:text-helionyx-200;
}

.badge-success {
    @apply bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200;
}

.badge-warning {
    @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200;
}

.badge-danger {
    @apply bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200;
}

.badge-gray {
    @apply bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200;
}
/* Status Indicators */
.status-indicator {
    @apply flex items-center space-x-2;
}

.status-dot {
    @apply w-2 h-2 rounded-full;
}

.status-online .status-dot {
    @apply bg-green-500 animate-pulse;
}

.status-offline .status-dot {
    @apply bg-red-500;
}

.status-busy .status-dot {
    @apply bg-yellow-500 animate-pulse;
}

.status-maintenance .status-dot {
    @apply bg-blue-500;
}

/* Progress Bars */
.progress {
    @apply w-full bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden;
}

.progress-bar {
    @apply h-full transition-all duration-500 ease-out;
}

.progress-sm {
    @apply h-1;
}
.progress-md {
    @apply h-2;
}

.progress-lg {
    @apply h-3;
}

/* Agent Cards */
.agent-card {
    @apply bg-gray-50 dark:bg-gray-700 rounded-xl p-6 hover:shadow-lg transition-all duration-300 cursor-pointer;
}

.agent-card:hover {
    @apply transform scale-105;
}

.agent-avatar {
    @apply w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center;
}

.agent-status {
    @apply flex items-center justify-center mb-4;
}

/* Metric Cards */
.metric-card {
    @apply text-center p-4 bg-gray-50 dark:bg-gray-700 rounded-lg;
}

.metric-icon {
    @apply text-2xl mb-2;
}

.metric-value {
    @apply text-2xl font-bold text-gray-900 dark:text-white;
}
.metric-label {
    @apply text-sm text-gray-600 dark:text-gray-400;
}

.metric-progress {
    @apply w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2 mt-2;
}

/* Navigation Components */
.nav-link {
    @apply px-3 py-2 text-sm font-medium transition-colors duration-200;
}

.nav-link.active {
    @apply text-helionyx-600 border-b-2 border-helionyx-600;
}

.nav-link:not(.active) {
    @apply text-gray-600 dark:text-gray-300 hover:text-helionyx-600;
}

/* Dropdown Components */
.dropdown {
    @apply relative;
}

.dropdown-menu {
    @apply absolute right-0 mt-2 w-80 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 z-50;
}

.dropdown-header {
    @apply p-4 border-b border-gray-200 dark:border-gray-700;
}

.dropdown-item {
    @apply p-4 border-b border-gray-100 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors;
}
/* Form Components */
.form-group {
    @apply space-y-2;
}

.form-label {
    @apply block text-sm font-medium text-gray-700 dark:text-gray-300;
}

.form-input {
    @apply w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-helionyx-500 focus:border-transparent;
}

.form-select {
    @apply w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-helionyx-500 focus:border-transparent;
}

.form-textarea {
    @apply w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-helionyx-500 focus:border-transparent resize-vertical;
}

/* Toggle Switch */
.toggle {
    @apply relative inline-block w-12 h-6;
}

.toggle input {
    @apply opacity-0 w-0 h-0;
}

.toggle-slider {
    @apply absolute cursor-pointer top-0 left-0 right-0 bottom-0 bg-gray-300 dark:bg-gray-600 rounded-full transition-all duration-300;
}

.toggle-slider:before {
    @apply absolute content-[''] h-5 w-5 left-0.5 bottom-0.5 bg-white rounded-full transition-all duration-300;
}

.toggle input:checked + .toggle-slider {
    @apply bg-helionyx-600;
}

.toggle input:checked + .toggle-slider:before {
    transform: translateX(24px);
}