/* Custom Styles for RXMG Chatbots */

/* Keyframe Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideIn {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideInFromRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Custom Components with Dark Mode Support */
.btn-primary {
    @apply bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-lg transition duration-150 ease-in-out;
}

.btn-secondary {
    @apply bg-gray-600 hover:bg-gray-700 dark:bg-gray-500 dark:hover:bg-gray-600 text-white font-medium py-2 px-4 rounded-lg transition duration-150 ease-in-out;
}

.btn-danger {
    @apply bg-red-600 hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 text-white font-medium py-2 px-4 rounded-lg transition duration-150 ease-in-out;
}

.card {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 border border-gray-200 dark:border-gray-700;
}

.card-header {
    @apply border-b border-gray-200 dark:border-gray-700 pb-4 mb-4;
}

/* Two-Panel Layout Support */
.two-panel-layout {
    @apply flex h-screen;
}

.sidebar-panel {
    @apply w-64 bg-white dark:bg-gray-800 shadow-lg border-r border-gray-200 dark:border-gray-700 flex-shrink-0;
}

.main-panel {
    @apply flex-1 flex flex-col;
}

.content-area {
    @apply flex-1 overflow-auto;
}

/* Responsive Sidebar with Dark Mode */
@media (max-width: 768px) {
    .sidebar-panel {
        @apply fixed inset-y-0 left-0 z-50 w-64 transform -translate-x-full transition-transform duration-300 ease-in-out;
    }
    
    .sidebar-panel.open {
        @apply translate-x-0;
    }
    
    .sidebar-overlay {
        @apply fixed inset-0 bg-black bg-opacity-50 dark:bg-gray-900 dark:bg-opacity-75 z-40;
    }
}

/* Loading States */
.loading-spinner {
    @apply inline-block w-4 h-4 border-2 border-gray-300 dark:border-gray-600 border-t-blue-600 dark:border-t-blue-400 rounded-full animate-spin;
}

.loading-dots {
    @apply inline-flex space-x-1;
}

.loading-dots > div {
    @apply w-2 h-2 bg-blue-600 dark:bg-blue-400 rounded-full animate-pulse;
}

.loading-dots > div:nth-child(2) {
    animation-delay: 0.1s;
}

.loading-dots > div:nth-child(3) {
    animation-delay: 0.2s;
}

/* Form Styles with Dark Mode */
.form-input {
    @apply block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded-md shadow-sm placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-blue-500 focus:border-blue-500;
}

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

.form-error {
    @apply mt-1 text-sm text-red-600 dark:text-red-400;
}

/* Avatar Styles */
.avatar-sm {
    @apply w-8 h-8 rounded-full;
}

.avatar-md {
    @apply w-12 h-12 rounded-full;
}

.avatar-lg {
    @apply w-16 h-16 rounded-full;
}

/* Status Indicators with Dark Mode */
.status-indicator {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

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

.status-offline {
    @apply bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200;
}

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

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

/* Chatbot Interface Styles with Dark Mode */
.chatbot-container {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 flex flex-col h-full;
}

.chatbot-header {
    @apply px-4 py-3 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 rounded-t-lg;
}

.chatbot-iframe {
    @apply flex-1 w-full border-none;
}

.chatbot-loading {
    @apply flex-1 flex items-center justify-center bg-gray-50 dark:bg-gray-900;
}

/* Navigation Styles with Dark Mode */
.nav-link {
    @apply flex items-center px-3 py-2 text-sm font-medium rounded-md transition duration-150 ease-in-out;
}

.nav-link-active {
    @apply bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-200 border-r-4 border-blue-600 dark:border-blue-400 shadow-md;
}

.nav-link-active .chatbot-icon {
    @apply ring-2 ring-blue-500 dark:ring-blue-400 ring-offset-2 ring-offset-white dark:ring-offset-gray-800;
}

.nav-link-active .chevron-icon {
    @apply opacity-100 text-blue-600 dark:text-blue-400;
}

/* Enhanced active state animations */
.nav-link-active {
    animation: activeGlow 2s ease-in-out;
}

@keyframes activeGlow {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
}

.nav-link-inactive {
    @apply text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-900 dark:hover:text-gray-100;
}

/* Utility Classes */
.text-shadow {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.backdrop-blur-sm {
    backdrop-filter: blur(4px);
}

/* Print Styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-break-before {
        page-break-before: always;
    }
    
    .print-break-after {
        page-break-after: always;
    }
}

/* Focus Styles with Dark Mode */
.focus-ring {
    @apply focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:ring-offset-2 dark:focus:ring-offset-gray-800;
}

/* Accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Scrollbar Styling with Dark Mode */
.scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 #f7fafc;
}

@media (prefers-color-scheme: dark) {
    .scrollbar-thin {
        scrollbar-color: #4b5563 #1f2937;
    }
}

.scrollbar-thin::-webkit-scrollbar {
    width: 6px;
}

.scrollbar-thin::-webkit-scrollbar-track {
    @apply bg-gray-100 dark:bg-gray-800;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
    @apply bg-gray-300 dark:bg-gray-600 rounded;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-400 dark:bg-gray-500;
}

/* Custom Dark Mode Variables */
:root {
    --rxmg-blue: #007bff;
    --rxmg-blue-dark: #4285f4;
}

/* Additional Dark Mode Utilities */
.dark-mode-transition {
    @apply transition-colors duration-200 ease-in-out;
}