/* Project Path: mississippi_business_assistant/app/static/css/main.css */

/* Base Styles */
html {
    scroll-behavior: smooth;
}

body {
    @apply antialiased text-gray-900 tracking-tight;
    min-height: 100vh;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    background-image: linear-gradient(to bottom right, rgba(79, 70, 229, 0.05) 0%, rgba(0, 0, 0, 0) 100%);
}

h1, h2, h3, h4, h5, h6 {
    @apply font-semibold tracking-tight text-gray-900;
}

/* Form Styles */
.form-input {
    @apply block w-full rounded-xl border-gray-300 shadow-sm bg-white/80
           focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm backdrop-blur-sm
           transition-all duration-200 hover:bg-white/90;
}

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

.form-group {
    @apply space-y-1.5 mb-6;
}

.auth-form {
    @apply max-w-md mx-auto bg-white/95 rounded-2xl shadow-lg p-8 border border-gray-200/80 backdrop-blur-sm;
}

.auth-form input,
.auth-form textarea {
    @apply block w-full;
}

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

::-webkit-scrollbar-track {
    background: rgba(241, 241, 241, 0.8);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb {
    background: rgba(203, 213, 225, 0.8);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.8);
}

/* Flash Message Animations */
.flash-message {
    @apply transition-all duration-300 ease-in-out transform;
}

.flash-message.removing {
    @apply opacity-0 -translate-y-2;
}

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

@keyframes typing {
    0% { opacity: 0.4; }
    50% { opacity: 1; }
    100% { opacity: 0.4; }
}

/* Message Input Auto-resize */
textarea {
    box-sizing: border-box;
    resize: none;
    overflow: hidden;
}

/* Message Bubbles */
.message {
    animation: messageIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    @apply mb-6 max-w-3xl mx-auto transform transition-all duration-200;
}

.user-message {
    @apply bg-gradient-to-br from-indigo-50 to-indigo-100/80 p-6 rounded-2xl shadow-sm border border-indigo-100 backdrop-blur-sm;
}

.assistant-message {
    @apply bg-white/95 p-6 rounded-2xl shadow-sm border border-gray-200/80 backdrop-blur-sm;
}

.message:hover {
    @apply shadow-md -translate-y-0.5;
}

/* Typing Indicator */
.typing-indicator {
    @apply flex items-center space-x-1.5 px-4 py-2 bg-white/80 rounded-full shadow-sm border border-gray-200/50 backdrop-blur-sm inline-flex;
}

.typing-indicator span {
    @apply w-2 h-2 bg-gradient-to-br from-indigo-500 to-indigo-600 rounded-full;
    animation: typing 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.3);
}

.typing-indicator span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
    animation-delay: 0.4s;
}

/* Button Styles */
.btn {
    @apply inline-flex items-center justify-center px-4 py-2.5 rounded-xl text-sm font-medium
           focus:outline-none focus:ring-2 focus:ring-offset-2 transition-all duration-200
           disabled:opacity-50 disabled:cursor-not-allowed transform hover:-translate-y-0.5;
}

.btn-primary {
    @apply btn bg-gradient-to-r from-indigo-600 to-indigo-700 text-white shadow-md hover:shadow-lg
           hover:from-indigo-700 hover:to-indigo-800 focus:ring-indigo-500;
}

.btn-secondary {
    @apply btn bg-white text-gray-700 border border-gray-300 shadow-md hover:shadow-lg
           hover:bg-gray-50 focus:ring-indigo-500 backdrop-blur-sm;
}

.btn-danger {
    @apply btn bg-gradient-to-r from-red-600 to-red-700 text-white shadow-md hover:shadow-lg
           hover:from-red-700 hover:to-red-800 focus:ring-red-500;
}

/* Navigation Styles */
.nav-link {
    @apply px-3 py-2 rounded-xl text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Profile Dropdown */
.profile-dropdown {
    transform-origin: top right;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.profile-dropdown.hidden {
    transform: scale(0.95);
    opacity: 0;
}

/* Markdown Styling */
.markdown {
    @apply text-gray-900 leading-relaxed;
}

.markdown h1 {
    @apply text-2xl font-semibold mb-4 mt-6;
}

.markdown h2 {
    @apply text-xl font-semibold mb-3 mt-5;
}

.markdown h3 {
    @apply text-lg font-semibold mb-2 mt-4;
}

.markdown p {
    @apply mb-4 text-gray-600;
}

.markdown ul, .markdown ol {
    @apply mb-4 ml-4 text-gray-600;
}

.markdown li {
    @apply mb-2;
}

.markdown a {
    @apply text-indigo-600 hover:text-indigo-800 underline;
}

.markdown code {
    @apply bg-gray-50/80 rounded-lg px-2 py-1 text-sm font-mono text-gray-800 backdrop-blur-sm;
}

.markdown pre {
    @apply bg-gray-50/80 rounded-xl p-4 mb-4 overflow-x-auto border border-gray-200/80 backdrop-blur-sm;
}

/* Alert/Flash Messages */
.alert {
    @apply rounded-xl p-4 mb-4 flex items-start border shadow-sm backdrop-blur-sm;
}

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

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

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

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

/* Loading States */
.loading {
    @apply opacity-75 cursor-wait pointer-events-none;
}

.loading-spinner {
    @apply animate-spin h-5 w-5;
    filter: drop-shadow(0 0 4px rgba(99, 102, 241, 0.3));
}

/* Modal Styles */
.modal-backdrop {
    @apply fixed inset-0 bg-gray-900/50 backdrop-blur-sm;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal {
    @apply fixed inset-0 flex items-center justify-center p-4 sm:p-6;
    z-index: 50;
}

.modal-content {
    @apply bg-white/95 rounded-2xl shadow-xl max-w-md w-full max-h-[90vh] overflow-y-auto
           border border-gray-200/80 backdrop-blur-sm;
    transform: scale(1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal.removing .modal-content {
    transform: scale(0.95);
    opacity: 0;
}

/* Z-index Layers */
.modal-backdrop {
    z-index: 40;
}

.modal {
    z-index: 50;
}

.dropdown-content {
    z-index: 30;
}

/* Card Styles */
.card {
    @apply bg-white/95 rounded-2xl border border-gray-200/80 shadow-sm overflow-hidden backdrop-blur-sm
           transition-all duration-200 hover:shadow-md hover:-translate-y-0.5;
}

.card-header {
    @apply px-6 py-4 border-b border-gray-200/80 bg-gradient-to-br from-gray-50/50 to-transparent;
}

.card-body {
    @apply p-6 bg-white/50;
}

.card-footer {
    @apply px-6 py-4 border-t border-gray-200/80 bg-gradient-to-br from-gray-50/50 to-transparent;
}

/* Table Styles */
.table-container {
    @apply overflow-x-auto rounded-2xl border border-gray-200/80 shadow-sm bg-white/95 backdrop-blur-sm;
}

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

.table th {
    @apply px-6 py-3.5 bg-gradient-to-br from-gray-50/80 to-transparent 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 bg-white/50;
}

.table tr {
    @apply hover:bg-indigo-50/30 transition-colors;
}

/* List Styles */
.list-item {
    @apply py-4 flex items-center space-x-4 hover:bg-indigo-50/30 transition-colors px-4;
}

.list-item:not(:last-child) {
    @apply border-b border-gray-200/80;
}

/* Responsive Design */
@media (max-width: 640px) {
    .mobile-hidden {
        @apply hidden;
    }
    
    .mobile-stack {
        @apply flex-col space-y-4;
    }
    
    .auth-form {
        @apply px-4 py-6 shadow-none border-0;
    }
    
    .message {
        @apply mx-2;
    }
    
    .user-message,
    .assistant-message {
        @apply p-4;
    }
    
    h1 { @apply text-2xl; }
    h2 { @apply text-xl; }
    h3 { @apply text-lg; }
}

/* Tablet and up */
@media (min-width: 768px) {
    .container {
        @apply px-6;
    }
    
    .auth-form {
        @apply p-8;
    }
    
    .message {
        @apply mx-auto;
    }
}

/* Print Styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-only {
        display: block !important;
    }
    
    body {
        @apply bg-white text-black;
    }
}

/* 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 */
:focus:not(:focus-visible) {
    outline: none;
}

:focus-visible {
    @apply outline-none ring-2 ring-indigo-500 ring-offset-2;
}