/* Custom CSS for Corlai Geosystems */

/* Line clamp utility for text truncation */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

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

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

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

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

/* Flash message animations */
.flash-message {
    transition: all 0.3s ease-in-out;
}

.flash-message.fade-out {
    opacity: 0;
    transform: translateX(100%);
}

/* Template card hover effects */
.template-card {
    transition: all 0.3s ease;
}

.template-card:hover {
    transform: translateY(-2px);
}

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

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

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

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

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

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

/* Form styles */
.form-input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
}

.form-select {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
}

.form-textarea {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
}

/* Table styles */
.table {
    @apply w-full border-collapse;
}

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

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

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

/* Modal styles */
.modal-overlay {
    backdrop-filter: blur(4px);
}

.modal-content {
    max-height: 90vh;
    overflow-y: auto;
}

/* Responsive utilities */
@media (max-width: 640px) {
    .mobile-hidden {
        display: none;
    }
    
    .mobile-full {
        width: 100%;
    }
}

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

/* Accessibility improvements */
.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 better accessibility */
.focus-visible:focus {
    outline: 2px solid #1e40af;
    outline-offset: 2px;
}

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

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

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

.slide-in {
    animation: slideIn 0.3s ease-in-out;
}

/* File upload styles */
.file-upload-area {
    border: 2px dashed #d1d5db;
    transition: all 0.3s ease;
}

.file-upload-area:hover,
.file-upload-area.dragover {
    border-color: #1e40af;
    background-color: #eff6ff;
}

/* Progress bar */
.progress-bar {
    height: 4px;
    background-color: #e5e7eb;
    border-radius: 2px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background-color: #1e40af;
    transition: width 0.3s ease;
}

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

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

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

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

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

/* Tooltip styles */
.tooltip {
    position: relative;
}

.tooltip:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #1f2937;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
}

.tooltip:hover::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: #1f2937;
    margin-bottom: -4px;
    z-index: 1000;
}