/* Prompt Manager Specific Styles */

/* Enhanced Prompt Card Animations */
.prompt-card-enter {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
}

.prompt-card-enter-active {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.prompt-card-hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(26, 54, 93, 0.15);
}

/* Enhanced Modal Animations */
.modal-overlay {
    backdrop-filter: blur(4px);
    animation: modalFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-content {
    animation: modalSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Copy Button Success Animation */
@keyframes copySuccess {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
        background: linear-gradient(to right, #10b981, #059669);
    }
    100% {
        transform: scale(1);
    }
}

.copy-success {
    animation: copySuccess 0.3s ease-in-out;
}

/* Enhanced Hover Effects */
.card-hover-effect {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover-effect:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(26, 54, 93, 0.12);
}

/* Generate Button Specific Styles */
#generate-prompt-btn {
    display: flex !important;
    width: 100% !important;
    background: linear-gradient(to right, #1a365d, #2d5a87) !important;
    color: white !important;
    padding: 16px 32px !important;
    border-radius: 12px !important;
    font-weight: bold !important;
    font-size: 18px !important;
    transition: all 0.3s ease !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(26, 54, 93, 0.3) !important;
}

#generate-prompt-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(26, 54, 93, 0.4) !important;
    background: linear-gradient(to right, #2d5a87, #1a365d) !important;
}

#generate-prompt-btn:active {
    transform: translateY(0) !important;
    transition-duration: 150ms !important;
}

/* Button Styles */
.btn-primary {
    @apply bg-primary text-white px-6 py-3 rounded-lg font-medium hover:bg-primary-600 transition-all duration-300 inline-block text-center;
    box-shadow: 0 2px 4px rgba(26, 54, 93, 0.1);
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(26, 54, 93, 0.2);
}

.btn-secondary {
    @apply bg-white text-primary border border-primary px-6 py-3 rounded-lg font-medium hover:bg-primary-50 transition-all duration-300 inline-block text-center;
    box-shadow: 0 2px 4px rgba(26, 54, 93, 0.1);
}

.btn-secondary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(26, 54, 93, 0.15);
}

/* Enhanced Copy Button */
.btn-copy {
    @apply bg-gradient-to-r from-accent to-accent-600 text-white px-4 py-2.5 rounded-lg text-sm font-semibold transition-all duration-300 flex items-center space-x-2 border-0;
    box-shadow: 0 3px 8px rgba(37, 99, 235, 0.3);
    position: relative;
    overflow: hidden;
}

.btn-copy:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
    @apply from-accent-600 to-accent-700;
}

.btn-copy:active {
    transform: translateY(-1px) scale(0.98);
    transition-duration: 150ms;
}

.btn-copy::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s;
}

.btn-copy:hover::before {
    left: 100%;
}

.btn-copy-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.btn-copy:hover .btn-copy-icon {
    transform: scale(1.1);
}

/* Enhanced Prompt Card Styles */
.prompt-card {
    @apply bg-white rounded-xl border border-border transition-all duration-300 relative overflow-hidden;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
}

.prompt-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    border-color: #e2e8f0;
}

.prompt-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #1a365d, #2563eb);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.prompt-card:hover::before {
    opacity: 1;
}

.prompt-card-header {
    @apply flex items-start justify-between mb-3;
}

.prompt-card-title {
    @apply text-base font-bold text-primary mb-2 line-clamp-2 leading-tight;
    font-size: 16px;
    line-height: 1.3;
}

.prompt-card-category {
    @apply inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold mb-3 transition-colors;
    font-size: 11px;
    letter-spacing: 0.025em;
}

.prompt-card-content {
    @apply text-text-secondary text-sm line-clamp-3 mb-4 leading-relaxed;
    font-size: 13px;
    line-height: 1.5;
}

.prompt-card-footer {
    @apply flex items-center justify-between pt-3 mt-auto;
}

.prompt-card-tags {
    @apply flex flex-wrap gap-1;
}

.prompt-tag {
    @apply bg-secondary-100 text-secondary-700 px-2 py-1 rounded text-xs;
}

.prompt-source-badge {
    @apply text-xs px-2.5 py-1 rounded-full font-semibold transition-colors;
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.prompt-source-csv {
    @apply bg-blue-100 text-blue-800;
}

.prompt-source-vibeprompts {
    @apply bg-blue-100 text-blue-800;
}

.prompt-source-systemprompts {
    @apply bg-purple-100 text-purple-800;
}

.prompt-source-custom {
    @apply bg-accent-100 text-accent-800;
}

/* Tech Stack Badges */
.tech-stack {
    @apply flex flex-wrap gap-1 mt-2;
}

.tech-badge {
    @apply bg-accent-100 text-accent-800 px-2 py-1 rounded text-xs font-medium;
}

/* Search and Filter Styles */
.filter-section {
    @apply mb-6;
}

.filter-label {
    @apply block text-sm font-medium text-text-primary mb-2;
}

.filter-input {
    @apply w-full px-3 py-2 border border-border rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all;
}

.filter-checkbox {
    @apply rounded border-border text-primary focus:ring-primary focus:ring-2;
}

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

.modal-content {
    max-height: calc(100vh - 8rem);
}

.modal-content pre {
    @apply bg-secondary-50 p-4 rounded-lg overflow-x-auto text-sm;
}

.modal-content code {
    @apply bg-secondary-100 px-2 py-1 rounded text-sm font-mono;
}

/* Loading States */
.loading-spinner {
    @apply inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-primary;
}

/* Toast Styles */
.toast-enter {
    transform: translateY(0);
}

.toast-exit {
    transform: translateY(100%);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .prompt-card {
        @apply p-4;
    }
    
    .prompt-card-title {
        @apply text-base;
    }
    
    .prompt-card-footer {
        @apply flex-col items-start space-y-3;
    }
    
    .btn-copy {
        @apply w-full justify-center;
    }
}

/* Utility Classes */
.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;
}

/* Animation Classes */
.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

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

.slide-up {
    animation: slideUp 0.3s ease-out;
}

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

/* Focus States */
.focus-visible {
    @apply outline-none ring-2 ring-primary ring-offset-2;
}

/* Hover Effects */
.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

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

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Tab System Styles */
.tab-navigation {
    @apply flex border-b border-border mb-8 bg-white rounded-t-xl overflow-hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.tab-button {
    @apply flex-1 px-6 py-4 text-center font-semibold transition-all duration-300 cursor-pointer relative;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    color: #64748b;
}

.tab-button.active {
    @apply text-primary bg-white;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: inset 0 -3px 0 #1a365d;
}

.tab-button:hover:not(.active) {
    @apply text-primary-600;
    background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
}

.tab-content {
    @apply hidden;
}

.tab-content.active {
    @apply block;
}

/* Prompt Maker Styles */
.prompt-maker-container {
    @apply bg-white rounded-xl p-6 shadow-minimal border border-border;
}

.prompt-maker-grid {
    @apply grid grid-cols-1 lg:grid-cols-2 gap-8;
}

.prompt-input-section {
    @apply space-y-6;
}

.prompt-ai-section {
    @apply bg-gradient-to-br from-primary-50 to-accent-50 rounded-xl p-6 border border-primary-100;
}

.form-group {
    @apply space-y-2;
}

.form-label {
    @apply block text-sm font-semibold text-text-primary;
}

.form-input {
    @apply w-full px-4 py-3 border border-border rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all;
    background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
}

.form-textarea {
    @apply w-full px-4 py-3 border border-border rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all resize-none;
    background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
    min-height: 120px;
}

.character-counter {
    @apply text-xs text-text-secondary text-right mt-1;
}

.character-counter.warning {
    @apply text-warning;
}

.character-counter.error {
    @apply text-error;
}

/* AI Assistant Styles */
.ai-assistant-header {
    @apply flex items-center space-x-3 mb-4;
}

.ai-icon {
    @apply w-8 h-8 text-primary;
}

.ai-assistant-title {
    @apply text-lg font-bold text-primary;
}

.ai-buttons {
    @apply grid grid-cols-2 gap-3 mb-4;
}

.btn-ai {
    @apply bg-gradient-to-r from-primary to-primary-600 text-white px-4 py-3 rounded-lg font-semibold transition-all duration-300 flex items-center justify-center space-x-2;
    box-shadow: 0 3px 8px rgba(26, 54, 93, 0.3);
}

.btn-ai:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(26, 54, 93, 0.4);
}

.btn-ai:disabled {
    @apply opacity-50 cursor-not-allowed;
    transform: none;
    box-shadow: 0 2px 4px rgba(26, 54, 93, 0.2);
}

.ai-loading {
    @apply flex items-center justify-center py-8 text-text-secondary;
}

.ai-result {
    @apply bg-white rounded-lg p-4 border border-border mt-4;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* Templates Section */
.templates-section {
    @apply mt-8 bg-surface rounded-xl p-6 border border-border;
}

.templates-grid {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-4;
}

.template-card {
    @apply bg-white rounded-lg p-4 border border-border cursor-pointer transition-all duration-300 hover:shadow-minimal;
}

.template-card:hover {
    transform: translateY(-1px);
    @apply border-primary-200;
}

.template-title {
    @apply font-semibold text-text-primary mb-2;
}

.template-description {
    @apply text-sm text-text-secondary;
}

/* Enhanced Toast Notification */
.toast-notification {
    @apply fixed bottom-6 right-6 bg-gradient-to-r from-accent to-accent-600 text-white px-6 py-4 rounded-xl shadow-strong transform translate-y-full transition-all duration-500 z-50 flex items-center space-x-3;
    min-width: 300px;
    max-width: 400px;
    opacity: 0;
    visibility: hidden;
}

.toast-notification.show {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.toast-icon {
    @apply w-6 h-6 flex-shrink-0;
}

.toast-icon svg {
    @apply w-full h-full;
}

.toast-content {
    @apply flex-1;
}

.toast-title {
    @apply font-semibold text-sm;
}

.toast-message {
    @apply text-xs opacity-90 mt-1;
}

/* Dark Mode Support (if needed in future) */
@media (prefers-color-scheme: dark) {
    .dark-mode .prompt-card {
        @apply bg-secondary-800 border-secondary-700;
    }

    .dark-mode .prompt-card-title {
        @apply text-primary-300;
    }

    .dark-mode .prompt-card-content {
        @apply text-secondary-300;
    }
}

/* Page Layout Fixes */
body {
    @apply min-h-screen flex flex-col;
}

main {
    @apply flex-1;
}

/* Ensure proper spacing and no overflow issues */
.container {
    @apply max-w-7xl mx-auto px-6;
}

/* Fix any potential SVG sizing issues */
svg {
    @apply block;
}

/* Ensure toast notification doesn't interfere with footer */
.toast-notification {
    bottom: 2rem !important;
    right: 2rem !important;
    max-width: 350px !important;
    z-index: 9999 !important;
}