/* Custom styles for LegalDocumentAI */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --primary-color: #3b82f6;
    --primary-hover: #2563eb;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;
    --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;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    color: var(--gray-900);
    background-color: var(--gray-50);
}

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

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

::-webkit-scrollbar-thumb {
    background: var(--gray-400);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gray-500);
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

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

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

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

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Loading states */
.loading {
    position: relative;
    overflow: hidden;
}

.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* Form styles */
.form-input {
    @apply block 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 sm:text-sm;
}

.form-input:disabled {
    @apply bg-gray-100 cursor-not-allowed;
}

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

.form-error {
    @apply mt-1 text-sm text-red-600;
}

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

/* Button styles */
.btn {
    @apply inline-flex items-center justify-center px-4 py-2 border text-sm font-medium rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 transition duration-200;
}

.btn-primary {
    @apply border-transparent text-white bg-blue-600 hover:bg-blue-700 focus:ring-blue-500;
}

.btn-secondary {
    @apply border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:ring-blue-500;
}

.btn-success {
    @apply border-transparent text-white bg-green-600 hover:bg-green-700 focus:ring-green-500;
}

.btn-danger {
    @apply border-transparent text-white bg-red-600 hover:bg-red-700 focus:ring-red-500;
}

.btn-warning {
    @apply border-transparent text-white bg-yellow-600 hover:bg-yellow-700 focus:ring-yellow-500;
}

.btn:disabled {
    @apply opacity-50 cursor-not-allowed;
}

/* Card styles */
.card {
    @apply bg-white rounded-lg shadow-sm border border-gray-200;
}

.card-header {
    @apply px-6 py-4 border-b border-gray-200;
}

.card-body {
    @apply p-6;
}

.card-footer {
    @apply px-6 py-4 border-t border-gray-200 bg-gray-50 rounded-b-lg;
}

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

.badge-primary {
    @apply bg-blue-100 text-blue-800;
}

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

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

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

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

/* Alert styles */
.alert {
    @apply rounded-md p-4;
}

.alert-success {
    @apply bg-green-50 text-green-800 border border-green-200;
}

.alert-warning {
    @apply bg-yellow-50 text-yellow-800 border border-yellow-200;
}

.alert-error {
    @apply bg-red-50 text-red-800 border border-red-200;
}

.alert-info {
    @apply bg-blue-50 text-blue-800 border border-blue-200;
}

/* Table styles */
.table-container {
    @apply overflow-x-auto border border-gray-200 rounded-lg;
}

.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-900;
}

.table tr {
    @apply hover:bg-gray-50 transition-colors duration-150;
}

/* Modal styles */
.modal-backdrop {
    @apply fixed inset-0 bg-black bg-opacity-50 z-40 transition-opacity;
}

.modal-container {
    @apply fixed inset-0 z-50 overflow-y-auto;
}

.modal {
    @apply relative bg-white rounded-lg shadow-xl max-w-lg mx-auto my-8;
}

.modal-header {
    @apply px-6 py-4 border-b border-gray-200;
}

.modal-body {
    @apply px-6 py-4;
}

.modal-footer {
    @apply px-6 py-4 border-t border-gray-200 bg-gray-50 rounded-b-lg;
}

/* Tooltip */
.tooltip {
    @apply absolute z-50 px-2 py-1 text-xs font-medium text-white bg-gray-900 rounded shadow-lg;
}

/* Responsive utilities */
@media (max-width: 640px) {
    .mobile-hidden {
        display: none !important;
    }
    
    .mobile-block {
        display: block !important;
    }
    
    .mobile-flex {
        display: flex !important;
    }
    
    .mobile-grid {
        display: grid !important;
    }
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        color: black;
        background: white;
    }
    
    a {
        color: black;
        text-decoration: none;
    }
}

/* Utility classes */
.shadow-hover {
    @apply transition-shadow duration-200;
}

.shadow-hover:hover {
    @apply shadow-md;
}

.transform-hover {
    @apply transition-transform duration-200;
}

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

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

/* Selection styles */
::selection {
    @apply bg-blue-100 text-blue-900;
}

/* Placeholder styles */
::placeholder {
    @apply text-gray-400;
}

/* File upload styles */
.file-upload {
    @apply relative overflow-hidden inline-block;
}

.file-upload input[type="file"] {
    @apply absolute inset-0 w-full h-full opacity-0 cursor-pointer;
}

/* Custom checkbox and radio */
.custom-checkbox {
    @apply h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500;
}

.custom-radio {
    @apply h-4 w-4 text-blue-600 border-gray-300 focus:ring-blue-500;
}

/* Range slider */
.custom-range {
    @apply w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer;
}

.custom-range::-webkit-slider-thumb {
    @apply appearance-none h-5 w-5 rounded-full bg-blue-600 cursor-pointer;
}

.custom-range::-moz-range-thumb {
    @apply h-5 w-5 rounded-full bg-blue-600 cursor-pointer border-0;
}

/* Progress bar */
.progress-bar {
    @apply w-full bg-gray-200 rounded-full h-2.5;
}

.progress-bar-fill {
    @apply bg-blue-600 h-2.5 rounded-full transition-all duration-300;
}

/* Toggle switch */
.toggle-switch {
    @apply relative inline-flex items-center h-6 rounded-full w-11;
}

.toggle-switch input {
    @apply sr-only;
}

.toggle-switch-slider {
    @apply absolute cursor-pointer inset-0 bg-gray-300 rounded-full transition-colors duration-200;
}

.toggle-switch-slider:before {
    @apply absolute left-1 bottom-1 bg-white rounded-full h-4 w-4 transition-transform duration-200;
}

.toggle-switch input:checked + .toggle-switch-slider {
    @apply bg-blue-600;
}

.toggle-switch input:checked + .toggle-switch-slider:before {
    @apply transform translate-x-5;
}

/* Dropdown menu */
.dropdown-menu {
    @apply absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 py-1 z-50;
}

.dropdown-item {
    @apply block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100;
}

/* Tab navigation */
.tab-nav {
    @apply border-b border-gray-200;
}

.tab-button {
    @apply inline-flex items-center px-4 py-2 border-b-2 font-medium text-sm;
}

.tab-button.active {
    @apply border-blue-500 text-blue-600;
}

.tab-button.inactive {
    @apply border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300;
}

/* Accordion */
.accordion-item {
    @apply border-b border-gray-200;
}

.accordion-header {
    @apply flex justify-between items-center p-4 cursor-pointer hover:bg-gray-50;
}

.accordion-content {
    @apply px-4 pb-4;
}

/* Steps indicator */
.steps {
    @apply flex items-center justify-between;
}

.step {
    @apply flex flex-col items-center relative;
}

.step-number {
    @apply w-8 h-8 rounded-full border-2 flex items-center justify-center text-sm font-medium;
}

.step.active .step-number {
    @apply border-blue-600 bg-blue-600 text-white;
}

.step.completed .step-number {
    @apply border-green-600 bg-green-600 text-white;
}

.step.inactive .step-number {
    @apply border-gray-300 text-gray-500;
}

.step-line {
    @apply absolute top-4 w-full h-0.5 bg-gray-300 -z-10;
}

.step.active .step-line {
    @apply bg-blue-600;
}

.step.completed .step-line {
    @apply bg-green-600;
}