/* Text Shuffler Specific Styles */

.text-shuffler-container {
    @apply min-h-screen bg-gradient-to-br from-purple-50 via-blue-50 to-indigo-50;
}

.text-shuffler-header {
    @apply text-center mb-8;
}

.text-shuffler-icon {
    @apply inline-flex items-center justify-center w-16 h-16 bg-gradient-to-r from-purple-600 to-blue-600 rounded-xl mb-4;
}

.text-shuffler-title {
    @apply text-4xl font-bold text-gray-800 mb-2;
}

.text-shuffler-description {
    @apply text-lg text-gray-600 max-w-2xl mx-auto;
}

/* Card Styles */
.text-shuffler-card {
    @apply bg-white rounded-xl shadow-sm border border-gray-200 p-6;
}

.text-shuffler-card-header {
    @apply text-lg font-semibold text-gray-800 mb-4 flex items-center;
}

.text-shuffler-card-icon {
    @apply w-5 h-5 text-purple-600 mr-2;
}

/* Input/Output Styles */
.text-shuffler-textarea {
    @apply w-full p-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent resize-none transition-all duration-200;
}

.text-shuffler-textarea:focus {
    @apply outline-none ring-2 ring-purple-500 border-transparent;
}

.text-shuffler-textarea-readonly {
    @apply bg-gray-50;
}

/* Button Styles */
.text-shuffler-btn-primary {
    @apply bg-gradient-to-r from-purple-600 to-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:from-purple-700 hover:to-blue-700 transform hover:scale-105 transition-all duration-200 flex items-center;
}

.text-shuffler-btn-secondary {
    @apply bg-green-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-green-700 transform hover:scale-105 transition-all duration-200 flex items-center;
}

.text-shuffler-btn-tertiary {
    @apply bg-gray-400 text-white px-6 py-3 rounded-lg font-medium hover:bg-gray-500 transform hover:scale-105 transition-all duration-200 flex items-center disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none;
}

.text-shuffler-btn-icon {
    @apply w-4 h-4 mr-2;
}

/* Preset Styles */
.text-shuffler-preset {
    @apply p-3 text-left border border-gray-200 rounded-lg hover:bg-purple-50 hover:border-purple-300 transition-all duration-200 cursor-pointer;
}

.text-shuffler-preset-active {
    @apply bg-purple-100 border-purple-400;
}

.text-shuffler-preset-title {
    @apply font-medium text-sm text-gray-800;
}

.text-shuffler-preset-description {
    @apply text-xs text-gray-500 mt-1;
}

/* Form Styles */
.text-shuffler-select {
    @apply w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent;
}

.text-shuffler-input {
    @apply w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent;
}

.text-shuffler-checkbox {
    @apply form-checkbox h-4 w-4 text-purple-600 rounded;
}

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

.text-shuffler-label-inline {
    @apply flex items-center;
}

.text-shuffler-label-text {
    @apply ml-2 text-sm text-gray-600;
}

/* Stats Styles */
.text-shuffler-stat-card {
    @apply text-center p-3 rounded-lg;
}

.text-shuffler-stat-blue {
    @apply bg-blue-50;
}

.text-shuffler-stat-green {
    @apply bg-green-50;
}

.text-shuffler-stat-purple {
    @apply bg-purple-50;
}

.text-shuffler-stat-orange {
    @apply bg-orange-50;
}

.text-shuffler-stat-value {
    @apply text-lg font-bold;
}

.text-shuffler-stat-value-blue {
    @apply text-blue-600;
}

.text-shuffler-stat-value-green {
    @apply text-green-600;
}

.text-shuffler-stat-value-purple {
    @apply text-purple-600;
}

.text-shuffler-stat-value-orange {
    @apply text-orange-600;
}

.text-shuffler-stat-label {
    @apply text-xs;
}

.text-shuffler-stat-label-blue {
    @apply text-blue-500;
}

.text-shuffler-stat-label-green {
    @apply text-green-500;
}

.text-shuffler-stat-label-purple {
    @apply text-purple-500;
}

.text-shuffler-stat-label-orange {
    @apply text-orange-500;
}

/* History Styles */
.text-shuffler-history-item {
    @apply p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition-all duration-200;
}

.text-shuffler-history-header {
    @apply flex justify-between items-start mb-2;
}

.text-shuffler-history-method {
    @apply text-xs text-purple-600 font-medium;
}

.text-shuffler-history-time {
    @apply text-xs text-gray-400;
}

.text-shuffler-history-input {
    @apply text-sm text-gray-600 truncate;
}

.text-shuffler-history-output {
    @apply text-xs text-gray-400 mt-1 truncate;
}

/* Loading Styles */
.text-shuffler-loading {
    @apply fixed inset-0 bg-black bg-opacity-50 z-50;
}

.text-shuffler-loading-content {
    @apply flex items-center justify-center h-full;
}

.text-shuffler-loading-card {
    @apply bg-white rounded-xl p-8 flex items-center space-x-4;
}

.text-shuffler-spinner {
    @apply animate-spin rounded-full h-8 w-8 border-b-2 border-purple-600;
}

.text-shuffler-loading-text {
    @apply text-gray-700 font-medium;
}

/* Notification Styles */
.text-shuffler-notification {
    @apply fixed top-4 right-4 p-4 rounded-lg shadow-lg z-50 transition-all duration-300 transform translate-x-full;
}

.text-shuffler-notification-error {
    @apply bg-red-100 text-red-800 border border-red-200;
}

.text-shuffler-notification-success {
    @apply bg-green-100 text-green-800 border border-green-200;
}

.text-shuffler-notification-info {
    @apply bg-blue-100 text-blue-800 border border-blue-200;
}

.text-shuffler-notification-content {
    @apply flex items-center;
}

.text-shuffler-notification-message {
    @apply flex-1;
}

.text-shuffler-notification-close {
    @apply ml-2 text-gray-400 hover:text-gray-600;
}

/* Animation Styles */
.text-shuffler-fade-in {
    animation: textShufflerFadeIn 0.3s ease-in-out;
}

.text-shuffler-slide-up {
    animation: textShufflerSlideUp 0.3s ease-in-out;
}

.text-shuffler-bounce {
    animation: textShufflerBounce 0.6s ease-in-out;
}

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

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

@keyframes textShufflerBounce {
    0%,
    20%,
    53%,
    80%,
    100% {
        transform: scale(1);
    }
    40%,
    43% {
        transform: scale(1.05);
    }
    70% {
        transform: scale(1.02);
    }
    90% {
        transform: scale(1.01);
    }
}

/* Responsive Styles */
@media (max-width: 768px) {
    .text-shuffler-title {
        @apply text-3xl;
    }

    .text-shuffler-description {
        @apply text-base;
    }

    .text-shuffler-card {
        @apply p-4;
    }

    .text-shuffler-btn-primary,
    .text-shuffler-btn-secondary,
    .text-shuffler-btn-tertiary {
        @apply px-4 py-2 text-sm;
    }

    .text-shuffler-textarea {
        @apply p-3;
    }
}

@media (max-width: 640px) {
    .text-shuffler-notification {
        @apply top-2 right-2 left-2 transform-none;
    }

    .text-shuffler-preset {
        @apply p-2;
    }

    .text-shuffler-preset-title {
        @apply text-xs;
    }

    .text-shuffler-preset-description {
        @apply text-xs;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .text-shuffler-container {
        @apply bg-gradient-to-br from-gray-900 via-purple-900 to-blue-900;
    }

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

    .text-shuffler-title {
        @apply text-white;
    }

    .text-shuffler-description {
        @apply text-gray-300;
    }

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

    .text-shuffler-textarea {
        @apply bg-gray-700 border-gray-600 text-white;
    }

    .text-shuffler-textarea-readonly {
        @apply bg-gray-600;
    }
}

/* Print styles */
@media print {
    .text-shuffler-container {
        @apply bg-white;
    }

    .text-shuffler-card {
        @apply border border-gray-300 shadow-none;
    }

    .text-shuffler-btn-primary,
    .text-shuffler-btn-secondary,
    .text-shuffler-btn-tertiary {
        @apply hidden;
    }

    .text-shuffler-notification {
        @apply hidden;
    }

    .text-shuffler-loading {
        @apply hidden;
    }
}