/* Custom CSS for Lions Club KL Providence */

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

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

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #003f7f;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #002855;
}

/* Animation classes */
.fade-in {
    animation: fadeIn 0.5s ease-in;
}

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

.slide-in-right {
    animation: slideInRight 0.5s ease-out;
}

@keyframes slideInRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.slide-in-left {
    animation: slideInLeft 0.5s ease-out;
}

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

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

.btn-lions-secondary {
    @apply bg-lions-gold hover:bg-yellow-600 text-lions-navy font-medium py-2 px-4 rounded-lg transition-colors duration-200;
}

.btn-lions-outline {
    @apply border-2 border-lions-blue text-lions-blue hover:bg-lions-blue hover:text-white font-medium py-2 px-4 rounded-lg transition-all duration-200;
}

/* Card styles */
.card-lions {
    @apply bg-white rounded-lg shadow-lg hover:shadow-xl transition-shadow duration-300;
}

.card-lions-header {
    @apply bg-gradient-to-r from-lions-blue to-lions-light-blue text-white p-6 rounded-t-lg;
}

/* Form styles */
.form-input-lions {
    @apply w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-lions-blue focus:border-lions-blue bg-white text-gray-900 placeholder-gray-500 transition-all duration-200;
    min-width: 350px !important; /* Force minimum width for readability */
    width: 100% !important; /* Force full width */
    max-width: 100% !important; /* Ensure it doesn't overflow container */
}

/* Specific styling for datetime inputs to prevent overflow in grid layouts */
.form-input-lions[type="datetime-local"],
.form-datetime-lions {
    min-width: auto !important; /* Remove minimum width for datetime fields */
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Additional specific fix for login form inputs */
input[type="text"], input[type="password"], input[type="email"] {
    min-width: 350px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Override for inputs inside grid containers to prevent overflow */
.grid input[type="text"], 
.grid input[type="password"], 
.grid input[type="email"],
.grid .form-input-lions {
    min-width: auto !important;
    max-width: 100% !important;
}

/* Container width fix for login page */
.max-w-md {
    max-width: 500px !important; /* Increase container width */
}

.form-select-lions {
    @apply w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-lions-blue focus:border-lions-blue bg-white text-gray-900 transition-all duration-200;
    max-width: 100% !important;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Specific styling for fiscal year dropdowns to handle long text */
.form-select-lions[id*="fiscal_year"] {
    min-width: 180px !important;
    font-size: 14px !important;
    position: relative;
    z-index: 10;
}

/* Enhanced dropdown option styling */
.form-select-lions option {
    padding: 8px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.6;
    background: white;
    color: #374151;
    min-width: 200px;
}

/* Fiscal year specific option styling */
.form-select-lions[id*="fiscal_year"] option {
    white-space: normal !important;
    word-wrap: break-word;
    padding: 10px 12px;
    line-height: 1.4;
}

.form-select-lions option:hover,
.form-select-lions option:focus {
    background-color: #f3f4f6 !important;
    color: #111827 !important;
}

.form-select-lions option:checked {
    background-color: #3B82F6 !important;
    color: white !important;
}

.form-textarea-lions {
    @apply w-full px-4 py-3 border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-lions-blue focus:border-lions-blue bg-white text-gray-900 placeholder-gray-500 resize-vertical transition-all duration-200;
}

/* Badge styles */
.badge-success {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800;
}

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

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

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

.badge-lions {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-lions-blue text-white;
}

/* Table styles */
.table-lions {
    @apply min-w-full divide-y divide-gray-200 bg-white shadow-sm rounded-lg overflow-hidden;
}

.table-lions thead {
    @apply bg-gray-50;
}

.table-lions th {
    @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
}

.table-lions td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900 border-b border-gray-200;
}

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

/* Calendar styles */
.calendar-event {
    @apply text-xs p-1 rounded text-white cursor-pointer;
}

.calendar-event-project {
    @apply bg-lions-blue;
}

.calendar-event-event {
    @apply bg-lions-gold text-lions-navy;
}

.calendar-event-meeting {
    @apply bg-green-500;
}

/* Status indicators - Standardized for all activity types */
.status-draft {
    @apply bg-gray-100 text-gray-800;
}

.status-proposed {
    @apply bg-yellow-100 text-yellow-800;
}

.status-pending-approval {
    @apply bg-yellow-100 text-yellow-800;
}

.status-approved {
    @apply bg-green-100 text-green-800;
}

.status-rejected {
    @apply bg-red-100 text-red-800;
}

.status-in-progress {
    @apply bg-blue-100 text-blue-800;
}

.status-completed {
    @apply bg-purple-100 text-purple-800;
}

.status-cancelled {
    @apply bg-gray-100 text-gray-600;
}

.status-agenda-ready {
    @apply bg-indigo-100 text-indigo-800;
}

.status-submitted {
    @apply bg-teal-100 text-teal-800;
}

.status-reviewed {
    @apply bg-cyan-100 text-cyan-800;
}

/* Loading states */
.loading-spinner {
    @apply animate-spin rounded-full h-6 w-6 border-b-2 border-lions-blue;
}

.loading-dots::after {
    content: '';
    animation: loading-dots 1.5s steps(4, end) infinite;
}

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

/* Custom gradient backgrounds */
.bg-lions-gradient {
    background: linear-gradient(135deg, #003f7f 0%, #0066cc 100%);
}

.bg-lions-gold-gradient {
    background: linear-gradient(135deg, #fdb515 0%, #f4a300 100%);
}

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

/* Mobile responsive adjustments */
@media (max-width: 640px) {
    .mobile-stack > * {
        width: 100% !important;
        margin-bottom: 1rem;
    }
    
    .mobile-hide {
        display: none !important;
    }
    
    .mobile-center {
        text-align: center !important;
    }
}

/* HTMX loading states */
.htmx-indicator {
    opacity: 0;
    transition: opacity 200ms ease-in;
}

.htmx-request .htmx-indicator {
    opacity: 1;
}

.htmx-request.htmx-indicator {
    opacity: 1;
}

/* Custom focus styles for accessibility */
.focus-lions:focus {
    @apply outline-none ring-2 ring-lions-blue ring-offset-2;
}

/* Chart and graph styles */
.chart-container {
    position: relative;
    height: 400px;
}

.chart-legend {
    @apply flex flex-wrap justify-center mt-4 gap-4;
}

.chart-legend-item {
    @apply flex items-center gap-2 text-sm;
}

.chart-legend-color {
    @apply w-4 h-4 rounded;
}