/* BJP Blood Connect - Enhanced Styles */

:root {
    --saffron: #FF9933;
    --white: #FFFFFF;
    --green: #138808;
    --red: #DC2626;
    --orange: #EA580C;
    --blue: #1E40AF;
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;
}

/* BJP Theme Colors */
.bg-saffron { background-color: var(--saffron); }
.text-saffron { color: var(--saffron); }
.border-saffron { border-color: var(--saffron); }

.bg-tricolor {
    background: linear-gradient(90deg, var(--saffron) 33.33%, var(--white) 33.33%, var(--white) 66.66%, var(--green) 66.66%);
}

/* Enhanced Animations */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

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

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

@keyframes slide-in {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

@keyframes bounce-in {
    0% { transform: scale(0.3); opacity: 0; }
    50% { transform: scale(1.05); }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); opacity: 1; }
}

.animate-float { animation: float 6s ease-in-out infinite; }
.animate-pulse-slow { animation: pulse-slow 2s ease-in-out infinite; }
.animate-fade-in { animation: fade-in 0.8s ease-out; }
.animate-slide-in { animation: slide-in 0.6s ease-out; }
.animate-bounce-in { animation: bounce-in 0.8s ease-out; }

/* Enhanced Button Styles */
.btn-primary {
    @apply bg-gradient-to-r from-red-600 to-red-700 text-white font-semibold py-3 px-6 rounded-lg shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300;
}

.btn-secondary {
    @apply bg-gradient-to-r from-orange-500 to-orange-600 text-white font-semibold py-3 px-6 rounded-lg shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300;
}

.btn-outline {
    @apply border-2 border-red-600 text-red-600 font-semibold py-3 px-6 rounded-lg hover:bg-red-600 hover:text-white transform hover:scale-105 transition-all duration-300;
}

/* Card Enhancements */
.card-enhanced {
    @apply bg-white rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 border border-gray-100;
}

.card-enhanced:hover {
    transform: translateY(-5px);
}

/* BJP Logo Animation */
.lotus-spin {
    animation: spin 20s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Enhanced Form Styles */
.form-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 transition-all duration-300;
}

.form-input:focus {
    transform: scale(1.02);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.form-label {
    @apply block text-sm font-semibold text-gray-700 mb-2;
}

/* Blood Drop Animation */
.blood-drop {
    position: absolute;
    color: var(--red);
    animation: float 8s ease-in-out infinite;
    opacity: 0.6;
}

.blood-drop:nth-child(odd) {
    animation-delay: -2s;
    animation-duration: 10s;
}

.blood-drop:nth-child(even) {
    animation-delay: -4s;
    animation-duration: 12s;
}

/* Enhanced Hero Section */
.hero-gradient {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.9) 0%, rgba(234, 88, 12, 0.8) 50%, rgba(30, 64, 175, 0.7) 100%);
}

.hero-text {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* BJP Flag Colors */
.flag-saffron { background-color: var(--saffron); }
.flag-white { background-color: var(--white); }
.flag-green { background-color: var(--green); }

/* Enhanced Statistics Cards */
.stat-card {
    @apply bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 text-center;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}

.stat-card:hover {
    transform: translateY(-5px) scale(1.02);
}

.stat-number {
    @apply text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-red-600 to-orange-600;
}

/* Enhanced Navigation */
.nav-link {
    @apply text-gray-700 hover:text-red-600 font-medium transition-colors duration-300 relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background: linear-gradient(90deg, var(--red), var(--orange));
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

/* Enhanced Modal */
.modal-overlay {
    @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50;
    backdrop-filter: blur(4px);
}

.modal-content {
    @apply bg-white rounded-2xl p-8 max-w-md w-full mx-4 shadow-2xl;
    animation: bounce-in 0.5s ease-out;
}

/* Enhanced Badge Styles */
.badge-urgency-emergency {
    @apply bg-red-100 text-red-800 border border-red-200 px-3 py-1 rounded-full text-sm font-semibold;
}

.badge-urgency-high {
    @apply bg-orange-100 text-orange-800 border border-orange-200 px-3 py-1 rounded-full text-sm font-semibold;
}

.badge-urgency-medium {
    @apply bg-yellow-100 text-yellow-800 border border-yellow-200 px-3 py-1 rounded-full text-sm font-semibold;
}

.badge-urgency-low {
    @apply bg-green-100 text-green-800 border border-green-200 px-3 py-1 rounded-full text-sm font-semibold;
}

.badge-blood-group {
    @apply bg-red-600 text-white px-3 py-1 rounded-full text-sm font-bold;
}

/* Enhanced Table Styles */
.table-enhanced {
    @apply w-full bg-white rounded-xl shadow-lg overflow-hidden;
}

.table-enhanced th {
    @apply bg-gradient-to-r from-red-600 to-red-700 text-white px-6 py-4 text-left font-semibold;
}

.table-enhanced td {
    @apply px-6 py-4 border-b border-gray-200;
}

.table-enhanced tr:hover {
    @apply bg-gray-50;
}

/* Enhanced Progress Bar */
.progress-bar {
    @apply w-full bg-gray-200 rounded-full h-3 overflow-hidden;
}

.progress-fill {
    @apply h-full bg-gradient-to-r from-red-600 to-orange-600 rounded-full transition-all duration-500;
}

/* Enhanced Alert Styles */
.alert-success {
    @apply bg-green-50 border border-green-200 text-green-800 px-4 py-3 rounded-lg flex items-center;
}

.alert-error {
    @apply bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded-lg flex items-center;
}

.alert-warning {
    @apply bg-yellow-50 border border-yellow-200 text-yellow-800 px-4 py-3 rounded-lg flex items-center;
}

.alert-info {
    @apply bg-blue-50 border border-blue-200 text-blue-800 px-4 py-3 rounded-lg flex items-center;
}

/* Enhanced Loading Spinner */
.spinner {
    @apply inline-block w-8 h-8 border-4 border-gray-200 border-t-red-600 rounded-full animate-spin;
}

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

.pagination a {
    @apply px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors duration-300;
}

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

/* Enhanced Search Input */
.search-input {
    @apply w-full pl-12 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 transition-all duration-300;
}

.search-icon {
    @apply absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400;
}

/* Enhanced Mobile Responsiveness */
@media (max-width: 768px) {
    .hero-text {
        font-size: 2rem;
    }
    
    .stat-number {
        font-size: 2rem;
    }
    
    .card-enhanced {
        margin-bottom: 1rem;
    }
}

/* Enhanced Print Styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-break {
        page-break-before: always;
    }
    
    .print-header {
        text-align: center;
        margin-bottom: 2rem;
        border-bottom: 2px solid var(--red);
        padding-bottom: 1rem;
    }
}

/* Enhanced 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;
}

/* Focus styles for accessibility */
.focus-visible:focus {
    outline: 2px solid var(--red);
    outline-offset: 2px;
}

/* Enhanced Hover Effects */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Enhanced Gradient Backgrounds */
.bg-gradient-bjp {
    background: linear-gradient(135deg, var(--saffron) 0%, var(--white) 50%, var(--green) 100%);
}

.bg-gradient-red-orange {
    background: linear-gradient(135deg, var(--red) 0%, var(--orange) 100%);
}

.bg-gradient-blue-indigo {
    background: linear-gradient(135deg, var(--blue) 0%, #4F46E5 100%);
}

/* Enhanced Text Gradients */
.text-gradient-red-orange {
    background: linear-gradient(135deg, var(--red) 0%, var(--orange) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-bjp {
    background: linear-gradient(135deg, var(--saffron) 0%, var(--green) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Enhanced Certificate Styles */
.certificate-border {
    border: 8px solid var(--saffron);
    border-image: linear-gradient(45deg, var(--saffron), var(--white), var(--green)) 1;
}

.certificate-header {
    background: linear-gradient(90deg, var(--saffron) 33.33%, var(--white) 33.33%, var(--white) 66.66%, var(--green) 66.66%);
    height: 20px;
}

/* Enhanced Admin Panel Styles */
.admin-sidebar {
    background: linear-gradient(180deg, var(--gray-900) 0%, var(--gray-800) 100%);
}

.admin-content {
    background: var(--gray-50);
    min-height: 100vh;
}

/* Enhanced Dashboard Cards */
.dashboard-card {
    @apply bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition-all duration-300;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}

.dashboard-card:hover {
    transform: translateY(-3px);
}

/* Enhanced Form Validation */
.form-error {
    @apply text-red-600 text-sm mt-1;
}

.form-success {
    @apply text-green-600 text-sm mt-1;
}

/* Enhanced Loading States */
.skeleton {
    @apply animate-pulse bg-gray-200 rounded;
}

.skeleton-text {
    @apply h-4 bg-gray-200 rounded w-3/4;
}

.skeleton-avatar {
    @apply w-16 h-16 bg-gray-200 rounded-full;
}

/* Enhanced Toast Notifications */
.toast {
    @apply fixed top-4 right-4 z-50 max-w-sm w-full bg-white rounded-lg shadow-lg border-l-4 p-4 transform transition-all duration-300;
}

.toast-success {
    @apply border-green-500;
}

.toast-error {
    @apply border-red-500;
}

.toast-warning {
    @apply border-yellow-500;
}

.toast-info {
    @apply border-blue-500;
}

/* Enhanced Mobile Menu */
.mobile-menu {
    @apply fixed inset-0 z-50 bg-white transform transition-transform duration-300;
}

.mobile-menu.open {
    @apply translate-x-0;
}

.mobile-menu.closed {
    @apply -translate-x-full;
}

/* Enhanced Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: var(--gray-100);
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: var(--red);
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--orange);
}

/* Enhanced Focus States */
.focus-ring {
    @apply focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2;
}

/* Enhanced Button Groups */
.btn-group {
    @apply inline-flex rounded-lg shadow-sm;
}

.btn-group button:first-child {
    @apply rounded-l-lg rounded-r-none;
}

.btn-group button:last-child {
    @apply rounded-r-lg rounded-l-none;
}

.btn-group button:not(:first-child):not(:last-child) {
    @apply rounded-none;
}

/* Enhanced Data Tables */
.data-table {
    @apply w-full bg-white rounded-xl shadow-lg overflow-hidden;
}

.data-table thead {
    @apply bg-gradient-to-r from-red-600 to-red-700;
}

.data-table th {
    @apply px-6 py-4 text-left text-white font-semibold;
}

.data-table td {
    @apply px-6 py-4 border-b border-gray-200;
}

.data-table tbody tr:hover {
    @apply bg-gray-50;
}

/* Enhanced Status Indicators */
.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;
}

.status-inactive {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800;
}

.status-pending {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800;
}

/* Enhanced Card Variants */
.card-primary {
    @apply bg-gradient-to-br from-red-50 to-orange-50 border border-red-200;
}

.card-secondary {
    @apply bg-gradient-to-br from-blue-50 to-indigo-50 border border-blue-200;
}

.card-success {
    @apply bg-gradient-to-br from-green-50 to-emerald-50 border border-green-200;
}

.card-warning {
    @apply bg-gradient-to-br from-yellow-50 to-orange-50 border border-yellow-200;
}

/* Enhanced Typography */
.heading-1 {
    @apply text-4xl font-bold text-gray-900 mb-4;
}

.heading-2 {
    @apply text-3xl font-bold text-gray-900 mb-3;
}

.heading-3 {
    @apply text-2xl font-semibold text-gray-900 mb-2;
}

.heading-4 {
    @apply text-xl font-semibold text-gray-900 mb-2;
}

.text-muted {
    @apply text-gray-500;
}

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

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

.text-warning {
    @apply text-yellow-600;
}

.text-info {
    @apply text-blue-600;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .container {
        padding: 0 1rem;
    }
    
    /* Hero image mobile optimization */
    .hero-image {
        max-height: 200px;
        object-fit: cover;
        width: 100%;
    }
    
    /* Action buttons mobile layout */
    .action-buttons {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .action-buttons .btn-primary,
    .action-buttons .btn-outline,
    .action-buttons .btn-secondary {
        width: 100%;
        justify-content: center;
    }
    
    /* Stats cards mobile layout */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .stat-card {
        padding: 1rem;
        text-align: center;
    }
    
    .stat-number {
        font-size: 1.5rem;
    }
    
    /* Form improvements for mobile */
    .form-input,
    .form-select,
    .form-textarea {
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    /* Modal improvements for mobile */
    .modal-content {
        margin: 1rem;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
    }
    
    /* Table responsive */
    .table-responsive {
        overflow-x: auto;
    }
    
    .table-responsive table {
        min-width: 600px;
    }
    
    /* Text size adjustments for mobile */
    .text-4xl { font-size: 2rem; }
    .text-5xl { font-size: 2.5rem; }
    .text-6xl { font-size: 3rem; }
    .text-7xl { font-size: 3.5rem; }
    
    /* Padding adjustments */
    .py-20 { padding-top: 3rem; padding-bottom: 3rem; }
    .py-16 { padding-top: 2rem; padding-bottom: 2rem; }
    .py-12 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
    
    /* Grid adjustments for mobile */
    .grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-cols-3 {
        grid-template-columns: 1fr;
    }
    
    /* Button groups mobile */
    .flex-wrap {
        flex-direction: column;
    }
    
    .flex-wrap .btn-primary,
    .flex-wrap .btn-outline,
    .flex-wrap .btn-secondary {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}