/* Custom styles for the group meeting presentation */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

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

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

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

/* Animation for cards */
.card-hover {
    @apply transition-all duration-300 ease-in-out;
}

.card-hover:hover {
    @apply transform -translate-y-1 shadow-xl;
}

/* Gradient text */
.gradient-text {
    background: linear-gradient(135deg, #3b82f6, #22c55e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Loading animation */
.loading-dots {
    display: inline-block;
}

.loading-dots::after {
    content: '';
    animation: dots 2s linear infinite;
}

@keyframes dots {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60%, 100% { content: '...'; }
}

/* Pulse animation for active elements */
.pulse-soft {
    animation: pulse-soft 2s infinite;
}

@keyframes pulse-soft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Custom button styles */
.btn-primary {
    @apply bg-primary-500 hover:bg-primary-600 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200;
}

.btn-secondary {
    @apply bg-secondary-500 hover:bg-secondary-600 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200;
}

/* Progress bar */
.progress-bar {
    @apply w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2;
}

.progress-fill {
    @apply bg-gradient-to-r from-primary-500 to-secondary-500 h-2 rounded-full transition-all duration-500;
}

/* Chart container */
.chart-container {
    position: relative;
    height: 300px;
    width: 100%;
}

/* Responsive typography */
@media (max-width: 640px) {
    h1 {
        @apply text-2xl;
    }
    
    h2 {
        @apply text-xl;
    }
    
    h3 {
        @apply text-lg;
    }
}

/* Dark mode specific styles */
.dark {
    color-scheme: dark;
}

/* Focus styles for accessibility */
button:focus,
input:focus,
textarea:focus {
    @apply outline-none ring-2 ring-primary-500 ring-opacity-50;
}

/* Print styles */
@media print {
    body {
        @apply bg-white text-black;
    }
    
    .no-print {
        display: none !important;
    }
    
    .print-break {
        page-break-before: always;
    }
}

/* Custom animations */
.slide-in-up {
    animation: slideInUp 0.6s ease-out;
}

@keyframes slideInUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn 0.8s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Icon animation */
.icon-bounce {
    animation: iconBounce 2s infinite;
}

@keyframes iconBounce {
    0%, 20%, 53%, 80%, 100% { transform: translate3d(0,0,0); }
    40%, 43% { transform: translate3d(0,-8px,0); }
    70% { transform: translate3d(0,-4px,0); }
    90% { transform: translate3d(0,-2px,0); }
}

/* Status indicators */
.status-online {
    @apply w-3 h-3 bg-green-400 rounded-full animate-pulse;
}

.status-offline {
    @apply w-3 h-3 bg-red-400 rounded-full;
}

.status-busy {
    @apply w-3 h-3 bg-yellow-400 rounded-full animate-pulse;
}

/* Custom grid layouts */
.masonry {
    column-count: 1;
    column-gap: 1rem;
}

@media (min-width: 768px) {
    .masonry {
        column-count: 2;
    }
}

@media (min-width: 1024px) {
    .masonry {
        column-count: 3;
    }
}

.masonry-item {
    break-inside: avoid;
    margin-bottom: 1rem;
}

/* Tooltip styles */
.tooltip {
    @apply relative;
}

.tooltip::after {
    content: attr(data-tooltip);
    @apply absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 text-xs text-white bg-gray-900 rounded opacity-0 pointer-events-none transition-opacity duration-200;
}

.tooltip:hover::after {
    @apply opacity-100;
}

/* Custom checkbox and radio styles */
.custom-checkbox {
    @apply appearance-none w-4 h-4 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 checked:bg-primary-500 checked:border-primary-500 focus:ring-2 focus:ring-primary-500 focus:ring-opacity-50;
}

.custom-radio {
    @apply appearance-none w-4 h-4 border border-gray-300 dark:border-gray-600 rounded-full bg-white dark:bg-gray-800 checked:bg-primary-500 checked:border-primary-500 focus:ring-2 focus:ring-primary-500 focus:ring-opacity-50;
}

/* Mobile-first responsive design helpers */
.mobile-hidden {
    @apply hidden;
}

@media (min-width: 768px) {
    .mobile-hidden {
        @apply block;
    }
}

.desktop-hidden {
    @apply block;
}

@media (min-width: 768px) {
    .desktop-hidden {
        @apply hidden;
    }
}