/* Custom CSS for Memleket Sevdalıları Platform */

/* Custom scrollbar for dark mode */
::-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;
}

/* Smooth transitions for theme switching */
* {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Custom gradient backgrounds */
.gradient-primary {
    background: linear-gradient(135deg, #185fa7 0%, #103f6d 100%);
}

.gradient-secondary {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
}

/* Loading spinner */
.spinner {
    border: 3px solid #f3f3f3;
    border-top: 3px solid #3b82f6;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Form focus states */
.form-input:focus {
    @apply ring-2 ring-primary-500 ring-opacity-50 border-primary-500;
}

/* Button hover effects */
.btn-primary {
    @apply bg-primary-600 hover:bg-primary-700 text-white font-medium py-2 px-4 rounded-md transition-colors duration-200;
}

.btn-secondary {
    @apply bg-gray-600 hover:bg-gray-700 text-white font-medium py-2 px-4 rounded-md transition-colors duration-200;
}

.btn-danger {
    @apply bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-4 rounded-md transition-colors duration-200;
}

.btn-success {
    @apply bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-md transition-colors duration-200;
}

/* Card hover effects */
.card-hover {
    @apply transition-all duration-300 ease-in-out;
}

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

/* Poll option selection animation */
.poll-option {
    @apply transition-all duration-200 ease-in-out;
}

.poll-option:hover {
    @apply bg-gray-50 dark:bg-gray-700 transform scale-[1.02];
}

.poll-option input[type="radio"]:checked + .poll-option-content {
    @apply bg-primary-50 dark:bg-primary-900/30 border-primary-500;
}

/* Progress bars for poll results */
.progress-bar {
    @apply bg-gray-200 dark:bg-gray-700 rounded-full h-2 overflow-hidden;
}

.progress-fill {
    @apply bg-primary-600 h-full rounded-full transition-all duration-1000 ease-out;
}

/* Status badges */
.status-active {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300;
}

.status-upcoming {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300;
}

.status-ended {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-300;
}

/* Navigation active states */
.nav-link {
    @apply text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 px-3 py-2 text-sm font-medium transition-colors duration-200;
}

.nav-link.active {
    @apply text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-primary-900/30 rounded-md;
}

/* Flash message animations */
.flash-message {
    @apply animate-slide-down;
}

@keyframes slide-down {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-slide-down {
    animation: slide-down 0.3s ease-out;
}

/* Table responsive improvements */
.table-responsive {
    @apply overflow-x-auto shadow-sm border border-gray-200 dark:border-gray-700 rounded-lg;
}

.table-responsive table {
    @apply min-w-full divide-y divide-gray-200 dark:divide-gray-700;
}

.table-responsive th {
    @apply px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider bg-gray-50 dark:bg-gray-700;
}

.table-responsive td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white;
}

/* Custom tooltip */
.tooltip {
    @apply absolute z-50 px-2 py-1 text-xs text-white bg-gray-900 rounded shadow-lg opacity-0 pointer-events-none transition-opacity duration-200;
}

.tooltip.show {
    @apply opacity-100;
}

/* Chart container improvements */
.chart-container {
    @apply relative w-full h-64 md:h-80;
}

.chart-container canvas {
    @apply max-h-full;
}

/* Profile image placeholder */
.avatar {
    @apply inline-flex items-center justify-center rounded-full bg-gradient-to-br from-primary-500 to-primary-600 text-white font-bold;
}

.avatar-sm {
    @apply w-8 h-8 text-sm;
}

.avatar-md {
    @apply w-12 h-12 text-base;
}

.avatar-lg {
    @apply w-20 h-20 text-xl;
}

.avatar-xl {
    @apply w-32 h-32 text-3xl;
}

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

/* Mobile improvements */
@media (max-width: 640px) {
    .mobile-full {
        @apply w-full;
    }
    
    .mobile-stack {
        @apply flex-col space-y-2 space-x-0;
    }
    
    .mobile-hide {
        @apply hidden;
    }
    
    .mobile-show {
        @apply block;
    }
}

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

.dark .bg-pattern {
    background-image: 
        radial-gradient(circle at 25px 25px, rgba(255,255,255,0.1) 2%, transparent 0%),
        radial-gradient(circle at 75px 75px, rgba(255,255,255,0.1) 2%, transparent 0%);
    background-size: 100px 100px;
}

/* Focus visible improvements for accessibility */
.focus-visible\:ring-primary {
    @apply focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-opacity-50;
}

/* Custom animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

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

.animate-slide-up {
    animation: slideUp 0.5s ease-out;
}

/* Committee member card improvements */
.committee-card {
    @apply bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-in-out;
}

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

/* Responsive text sizing */
.text-responsive {
    @apply text-sm md:text-base lg:text-lg;
}

.text-responsive-small {
    @apply text-xs md:text-sm;
}

/* Custom border styles */
.border-dashed-primary {
    @apply border-2 border-dashed border-primary-300 dark:border-primary-700;
}

/* Loading states */
.loading-skeleton {
    @apply animate-pulse bg-gray-200 dark:bg-gray-700 rounded;
}

.loading-text {
    @apply h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse;
}

/* Success/Error state styles */
.state-success {
    @apply bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 text-green-800 dark:text-green-300;
}

.state-error {
    @apply bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 text-red-800 dark:text-red-300;
}

.state-warning {
    @apply bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 text-yellow-800 dark:text-yellow-300;
}

.state-info {
    @apply bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 text-blue-800 dark:text-blue-300;
}

/* Improved form styling */
.form-group {
    @apply space-y-1;
}

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

.form-input {
    @apply appearance-none block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-primary-500 focus:border-primary-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white;
}

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

.form-help {
    @apply text-gray-500 dark:text-gray-400 text-xs;
}

/* Modal improvements */
.modal-backdrop {
    @apply fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50;
}

.modal-content {
    @apply relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-gray-800;
}

/* Pagination improvements */
.pagination {
    @apply flex items-center space-x-2;
}

.pagination-link {
    @apply px-3 py-2 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-400 dark:hover:bg-gray-700 transition-colors duration-200;
}

.pagination-link.active {
    @apply text-white bg-primary-600 border-primary-600;
}

/* Breadcrumb improvements */
.breadcrumb {
    @apply flex items-center space-x-2 text-sm text-gray-500 dark:text-gray-400;
}

.breadcrumb a {
    @apply hover:text-primary-600 dark:hover:text-primary-400 transition-colors duration-200;
}

.breadcrumb .separator {
    @apply text-gray-300 dark:text-gray-600;
}