/* Custom Animations */
.fade-in {
    animation: fadeIn 0.5s ease-in;
}

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

/* Custom Form Styles */
.form-input:focus {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

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

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

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

/* Custom Card Styles */
.card {
    @apply bg-white rounded-lg shadow-md p-6;
}

/* Custom Table Styles */
.table-container {
    @apply overflow-x-auto;
}

.table {
    @apply min-w-full divide-y divide-gray-200;
}

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

.table td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-500;
}

/* Custom Alert Styles */
.alert {
    @apply rounded-md p-4 mb-4;
}

.alert-success {
    @apply bg-green-50 text-green-700;
}

.alert-error {
    @apply bg-red-50 text-red-700;
}

.alert-info {
    @apply bg-blue-50 text-blue-700;
}

/* Custom Badge Styles */
.badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge-success {
    @apply bg-green-100 text-green-800;
}

.badge-warning {
    @apply bg-yellow-100 text-yellow-800;
}

.badge-error {
    @apply bg-red-100 text-red-800;
}

/* Custom Loading Spinner */
.spinner {
    @apply animate-spin h-5 w-5 text-emerald-600;
}

/* Custom Modal Styles */
.modal {
    @apply fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center;
}

.modal-content {
    @apply bg-white rounded-lg shadow-xl max-w-lg w-full mx-4;
}

/* Custom Tooltip */
.tooltip {
    @apply relative inline-block;
}

.tooltip .tooltip-text {
    @apply invisible absolute z-10 px-3 py-2 text-sm text-white bg-gray-900 rounded-lg opacity-0 transition-opacity duration-300;
}

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

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

.pagination-item {
    @apply px-3 py-1 rounded-md text-sm font-medium;
}

.pagination-item.active {
    @apply bg-emerald-600 text-white;
}

.pagination-item:not(.active) {
    @apply text-gray-500 hover:bg-gray-100;
}

/* Custom Search Input */
.search-input {
    @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500;
}

/* Custom Select */
.select-input {
    @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500;
}

/* Custom Checkbox */
.checkbox-input {
    @apply h-4 w-4 text-emerald-600 focus:ring-emerald-500 border-gray-300 rounded;
}

/* Custom Radio */
.radio-input {
    @apply h-4 w-4 text-emerald-600 focus:ring-emerald-500 border-gray-300;
}

/* Custom Textarea */
.textarea-input {
    @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500;
}

/* Custom File Input */
.file-input {
    @apply block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-emerald-50 file:text-emerald-700 hover:file:bg-emerald-100;
} 

/* Responsive safety net for templates that render Django form widgets directly. */
*, *::before, *::after {
    box-sizing: border-box;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
select,
textarea {
    width: 100%;
    max-width: 100%;
}

textarea {
    min-height: 7rem;
}

form p {
    margin-bottom: 1rem;
}

form p label {
    display: block;
    margin-bottom: 0.375rem;
    color: #374151;
    font-size: 0.875rem;
    font-weight: 500;
}

form p input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
form p select,
form p textarea {
    display: block;
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    color: #111827;
}

form p input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):focus,
form p select:focus,
form p textarea:focus {
    border-color: #059669;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.12);
    outline: none;
}

.responsive-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.responsive-scroll table {
    width: 100%;
    min-width: max(48rem, 100%);
}

.break-anywhere {
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 640px) {
    .mobile-full {
        width: 100%;
    }

    .mobile-stack {
        flex-direction: column;
        align-items: stretch;
    }

    .mobile-card-padding {
        padding: 1rem;
    }
}

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