/* Reading Time Estimator Tool Specific Styles */

.reading-time-estimator {
    --primary-color: #3b82f6;
    --secondary-color: #10b981;
    --accent-color: #8b5cf6;
    --danger-color: #ef4444;
    --warning-color: #f59e0b;
    --success-color: #059669;
}

/* Operation Selection Buttons */
.operation-btn {
    @apply px-6 py-4 text-center rounded-lg transition-all border-2 cursor-pointer;
    @apply border-gray-200 bg-white text-gray-700 hover:border-blue-300 hover:shadow-md;
}

.operation-btn.active {
    @apply border-blue-500 bg-blue-500 text-white shadow-lg transform scale-105;
}

.operation-btn:hover:not(.active) {
    @apply transform scale-102 border-blue-300 bg-blue-50;
}

/* Live Statistics Bar */
.live-stats {
    @apply bg-gradient-to-r from-blue-50 to-purple-50 border border-blue-200 rounded-lg p-4 mb-6;
}

.stat-item {
    @apply text-center;
}

.stat-value {
    @apply text-2xl font-bold text-gray-900;
}

.stat-label {
    @apply text-sm text-gray-600 mt-1;
}

/* Advanced Options Panels */
.operation-options {
    @apply bg-gray-50 border border-gray-200 rounded-lg p-4 mb-6;
}

.option-group {
    @apply mb-4;
}

.option-group:last-child {
    @apply mb-0;
}

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

.option-input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

.option-checkbox {
    @apply w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 focus:ring-2;
}

/* Sample Text Buttons */
.sample-texts {
    @apply flex flex-wrap gap-2 mb-4;
}

.sample-text {
    @apply px-3 py-1 text-xs bg-blue-100 text-blue-700 rounded-full hover:bg-blue-200 transition-colors duration-200 cursor-pointer;
}

.sample-text:hover {
    @apply transform scale-105;
}

/* Quick Action Buttons */
.quick-actions {
    @apply flex gap-2 mb-4;
}

.quick-action-btn {
    @apply px-3 py-2 text-sm bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors duration-200;
}

/* Process Button */
.process-btn {
    @apply w-full px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white font-semibold rounded-lg hover:from-blue-700 hover:to-purple-700 transition-all duration-200 transform hover:scale-105 shadow-lg;
}

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

/* Results Container */
.results-container {
    @apply mt-8 space-y-6;
}

.result-card {
    @apply bg-white rounded-lg shadow-lg p-6 border border-gray-200;
}

.result-card-header {
    @apply text-xl font-semibold text-gray-900 mb-4 flex items-center;
}

.result-card-header .icon {
    @apply mr-2 text-2xl;
}

/* Reading Time Display */
.reading-time-display {
    @apply text-center bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg p-8 mb-6;
}

.reading-time-main {
    @apply text-5xl font-bold text-blue-600 mb-2;
}

.reading-time-subtitle {
    @apply text-lg text-blue-700;
}

.reading-time-details {
    @apply text-sm text-blue-600 mt-2;
}

/* Statistics Grid */
.stats-grid {
    @apply grid grid-cols-2 md:grid-cols-4 gap-4;
}

.stat-box {
    @apply bg-gray-50 rounded-lg p-4 text-center hover:bg-gray-100 transition-colors duration-200;
}

.stat-icon {
    @apply text-2xl mb-2;
}

.stat-number {
    @apply text-lg font-semibold text-gray-900;
}

.stat-description {
    @apply text-xs text-gray-600;
}

/* Progress Bars */
.progress-container {
    @apply w-full bg-gray-200 rounded-full h-3 mb-2;
}

.progress-bar {
    @apply h-3 rounded-full transition-all duration-300;
}

.progress-bar.complexity-simple {
    @apply bg-gradient-to-r from-green-400 to-green-500;
}

.progress-bar.complexity-moderate {
    @apply bg-gradient-to-r from-yellow-400 to-yellow-500;
}

.progress-bar.complexity-complex {
    @apply bg-gradient-to-r from-orange-400 to-orange-500;
}

.progress-bar.complexity-very-complex {
    @apply bg-gradient-to-r from-red-400 to-red-500;
}

.progress-bar.readability {
    @apply bg-gradient-to-r from-blue-400 to-blue-500;
}

/* Badges and Tags */
.complexity-badge {
    @apply inline-block px-3 py-1 text-sm font-medium rounded-full;
}

.readability-badge {
    @apply inline-block px-3 py-1 text-sm font-medium rounded-full;
}

.content-tag {
    @apply inline-block px-2 py-1 text-xs bg-gray-100 text-gray-700 rounded-full mr-2 mb-2;
}

/* Scenarios Section */
.scenario-item {
    @apply flex justify-between items-center p-4 bg-gray-50 rounded-lg mb-3 hover:bg-gray-100 transition-colors duration-200;
}

.scenario-type {
    @apply font-medium text-gray-900;
}

.scenario-speed {
    @apply text-sm text-gray-600;
}

.scenario-time {
    @apply text-right;
}

.scenario-time-main {
    @apply text-lg font-semibold text-blue-600;
}

.scenario-time-sub {
    @apply text-xs text-gray-500;
}

/* Recommendations */
.recommendation-item {
    @apply flex items-start p-3 bg-blue-50 border border-blue-200 rounded-lg mb-2;
}

.recommendation-icon {
    @apply text-blue-500 mr-3 mt-0.5;
}

.recommendation-text {
    @apply text-blue-800 text-sm;
}

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

.comparison-table th {
    @apply bg-gray-50 border border-gray-200 px-4 py-3 text-left font-medium text-gray-700;
}

.comparison-table td {
    @apply border border-gray-200 px-4 py-3;
}

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

.comparison-text-preview {
    @apply font-medium text-gray-900 mb-1;
}

.comparison-text-excerpt {
    @apply text-sm text-gray-600 max-w-xs truncate;
}

/* Loading States */
.loading-section {
    @apply text-center py-8;
}

.loading-spinner {
    @apply inline-block w-8 h-8 border-4 border-blue-200 border-t-blue-600 rounded-full animate-spin mb-4;
}

.loading-text {
    @apply text-gray-600;
}

/* Performance Metrics */
.performance-metrics {
    @apply bg-gray-50 rounded-lg p-4 mt-6;
}

.performance-grid {
    @apply grid grid-cols-3 gap-4 text-center;
}

.performance-item {
    @apply;
}

.performance-value {
    @apply text-lg font-semibold text-gray-900;
}

.performance-label {
    @apply text-xs text-gray-600;
}

/* Toast Notifications */
.toast {
    @apply fixed bottom-4 right-4 px-4 py-2 rounded-lg shadow-lg transform transition-transform duration-300 z-50;
    transform: translateY(100%);
}

.toast.show {
    transform: translateY(0);
}

.toast.success {
    @apply bg-green-600 text-white;
}

.toast.error {
    @apply bg-red-600 text-white;
}

.toast.warning {
    @apply bg-yellow-600 text-white;
}

.toast.info {
    @apply bg-gray-900 text-white;
}

/* Responsive Design */
@media (max-width: 768px) {
    .operation-buttons {
        @apply grid grid-cols-1 gap-2;
    }

    .stats-grid {
        @apply grid-cols-2;
    }

    .reading-time-main {
        @apply text-3xl;
    }

    .scenario-item {
        @apply flex-col space-y-2;
    }

    .scenario-time {
        @apply text-left;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .reading-time-estimator {
        --primary-color: #60a5fa;
        --secondary-color: #34d399;
        --accent-color: #a78bfa;
    }

    .result-card {
        @apply bg-gray-800 border-gray-700;
    }

    .result-card-header {
        @apply text-white;
    }

    .operation-btn {
        @apply bg-gray-800 border-gray-600 text-gray-300;
    }

    .operation-btn.active {
        @apply bg-blue-600 border-blue-600;
    }

    .stat-box {
        @apply bg-gray-800;
    }

    .stat-number {
        @apply text-white;
    }

    .scenario-item {
        @apply bg-gray-800;
    }

    .scenario-type {
        @apply text-white;
    }
}

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

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

.scale-in {
    animation: scaleIn 0.2s ease-out;
}

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

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

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Utility Classes */
.text-gradient {
    @apply bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent;
}

.shadow-glow {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

.border-gradient {
    background: linear-gradient(white, white) padding-box, linear-gradient(45deg, #3b82f6, #8b5cf6) border-box;
    border: 2px solid transparent;
}

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

.custom-scrollbar::-webkit-scrollbar-track {
    @apply bg-gray-100 rounded-full;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    @apply bg-gray-400 rounded-full;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-500;
}

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

/* Hover Effects */
.hover-lift:hover {
    @apply transform -translate-y-1 shadow-lg;
    transition: all 0.2s ease-out;
}

.hover-glow:hover {
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.2);
    transition: all 0.3s ease-out;
}