/* Modern Dark Theme CSS for YAP CMS */

/* Drag and Drop Styling */
.sortable-ghost {
    opacity: 0.4;
    background: rgba(59, 130, 246, 0.1) !important;
    border: 2px dashed rgba(59, 130, 246, 0.5) !important;
    transform: rotate(2deg);
}

.sortable-chosen {
    transform: scale(1.02);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    z-index: 50;
}

.sortable-drag {
    opacity: 0.8;
    transform: rotate(-2deg);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

.drag-handle {
    transition: all 0.2s ease-in-out;
}

.drag-handle:hover {
    transform: scale(1.1);
    color: rgba(156, 163, 175, 1) !important;
}

.group-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.group-card:hover .drag-handle {
    opacity: 1;
}

.lesson-item {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.lesson-item.sortable-ghost {
    opacity: 0.4;
    background: rgba(34, 197, 94, 0.1) !important;
    border: 2px dashed rgba(34, 197, 94, 0.5) !important;
    transform: scale(0.98);
}

.lesson-item.sortable-chosen {
    transform: scale(1.02);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    z-index: 30;
}

.lesson-drag-handle {
    opacity: 0;
    transition: all 0.2s ease-in-out;
}

.lesson-item:hover .lesson-drag-handle {
    opacity: 1;
}

.lesson-drag-handle:hover {
    transform: scale(1.1);
    color: rgba(156, 163, 175, 1) !important;
}

/* Utility classes */
.transition-all {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.transition-colors {
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

/* Modern glassmorphism utilities */
.glass {
    background: rgba(31, 41, 55, 0.8);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(75, 85, 99, 0.3);
}

.glass-light {
    background: rgba(55, 65, 81, 0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(75, 85, 99, 0.2);
}

/* Modern gradient utilities */
.gradient-primary {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
}

.gradient-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.gradient-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.gradient-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

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

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

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

/* Alpine.js cloak */
[x-cloak] {
    display: none !important;
}

/* Loading animations */
.animate-pulse-slow {
    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-bounce-slow {
    animation: bounce 2s infinite;
}

/* Modern button styles */
.btn-primary {
    @apply inline-flex items-center px-6 py-3 border border-transparent text-sm font-semibold rounded-xl text-white bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-blue-500 shadow-lg transition-all duration-200;
}

.btn-secondary {
    @apply inline-flex items-center px-6 py-3 border border-gray-600 text-sm font-semibold rounded-xl text-gray-200 bg-gray-700/50 hover:bg-gray-600/50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-gray-500 transition-all duration-200;
}

.btn-danger {
    @apply inline-flex items-center px-6 py-3 border border-transparent text-sm font-semibold rounded-xl text-white bg-gradient-to-r from-red-600 to-red-700 hover:from-red-700 hover:to-red-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-red-500 shadow-lg transition-all duration-200;
}

.btn-success {
    @apply inline-flex items-center px-6 py-3 border border-transparent text-sm font-semibold rounded-xl text-white bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-900 focus:ring-green-500 shadow-lg transition-all duration-200;
}

/* Modern form styles */
.form-input {
    @apply appearance-none block w-full px-4 py-3 border border-gray-600 rounded-xl text-gray-100 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:ring-offset-gray-900 sm:text-sm transition-all duration-200;
    background-color: rgba(55, 65, 81, 0.5) !important;
color: rgb(243, 244, 246) !important;
}

.form-select {
    @apply block w-full px-4 py-3 border border-gray-600 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:ring-offset-gray-900 sm:text-sm transition-all duration-200;
    background-color: rgba(55, 65, 81, 0.5) !important;
    color: rgb(243, 244, 246) !important;
}

.form-textarea {
    @apply appearance-none block w-full px-4 py-3 border border-gray-600 rounded-xl text-gray-100 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:ring-offset-gray-900 sm:text-sm transition-all duration-200 resize-vertical;
    background-color: rgba(55, 65, 81, 0.5) !important;
    color: rgb(243, 244, 246) !important;
}

/* Style option elements in dark selects */
.form-select option {
    background-color: rgb(55, 65, 81) !important;
    color: rgb(243, 244, 246) !important;
}

/* Additional styling for select elements to ensure dark theme */
select.form-select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%239CA3AF' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E") !important;
    background-position: right 0.75rem center !important;
    background-repeat: no-repeat !important;
    background-size: 1.5em 1.5em !important;
    padding-right: 2.5rem !important;
}

.form-checkbox {
    @apply h-5 w-5 text-blue-600 focus:ring-blue-500 focus:ring-offset-gray-900 border-gray-600 bg-gray-700 rounded transition-all duration-200;
}

.form-radio {
    @apply h-5 w-5 text-blue-600 focus:ring-blue-500 focus:ring-offset-gray-900 border-gray-600 bg-gray-700 transition-all duration-200;
}

/* Modern card styles */
.card {
    @apply bg-gray-800/50 backdrop-blur-sm border border-gray-700/50 overflow-hidden shadow-xl rounded-2xl;
}

.card-header {
    @apply px-6 py-5 sm:px-8 border-b border-gray-700/50;
}

.card-body {
    @apply px-6 py-6 sm:p-8;
}

.card-footer {
    @apply px-6 py-4 sm:px-8 bg-gray-700/20 border-t border-gray-700/50;
}

/* Progress bars */
.progress-bar {
    @apply h-2 bg-indigo-600 rounded-full transition-all duration-300 ease-out;
}

.progress-container {
    @apply w-full bg-gray-200 rounded-full h-2;
}

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

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

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

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

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

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

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

/* Lesson type specific colors */
.lesson-vocabulary {
    @apply bg-blue-50 border-blue-200;
}

.lesson-speaking {
    @apply bg-green-50 border-green-200;
}

.lesson-comprehension {
    @apply bg-purple-50 border-purple-200;
}

.lesson-grammar {
    @apply bg-yellow-50 border-yellow-200;
}

.lesson-comprehensive {
    @apply bg-pink-50 border-pink-200;
}

/* Language level colors */
.level-a1, .level-a2 {
    @apply bg-green-100 text-green-800;
}

.level-b1, .level-b2 {
    @apply bg-yellow-100 text-yellow-800;
}

.level-c1, .level-c2 {
    @apply bg-red-100 text-red-800;
}

/* Job status colors */
.status-pending {
    @apply bg-gray-100 text-gray-800;
}

.status-active {
    @apply bg-blue-100 text-blue-800;
}

.status-completed {
    @apply bg-green-100 text-green-800;
}

.status-failed {
    @apply bg-red-100 text-red-800;
}

.status-cancelled {
    @apply bg-orange-100 text-orange-800;
}

.status-paused {
    @apply bg-yellow-100 text-yellow-800;
}

/* Drag and drop styles */
.drag-over {
    @apply border-2 border-dashed border-indigo-400 bg-indigo-50;
}

.dragging {
    @apply opacity-50 transform rotate-2;
}

/* Modal styles */
.modal {
    @apply fixed inset-0 z-50 overflow-y-auto;
}

.modal-backdrop {
    @apply fixed inset-0 bg-gray-600 bg-opacity-75 transition-opacity;
}

.modal-container {
    @apply flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0;
}

.modal-content {
    @apply inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full;
}

/* Dropdown styles */
.dropdown {
    @apply relative inline-block text-left;
}

.dropdown-menu {
    @apply origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 focus:outline-none z-10;
}

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

/* Tooltip styles */
.tooltip {
    @apply absolute z-10 px-2 py-1 text-xs font-medium text-white bg-gray-900 rounded shadow-lg opacity-0 pointer-events-none transition-opacity duration-200;
}

.tooltip.show {
    @apply opacity-100;
}

/* Search and filter styles */
.search-container {
    @apply relative;
}

.search-icon {
    @apply absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4;
}

.search-input {
    @apply pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors;
}

.filter-chip {
    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-indigo-100 text-indigo-800 mr-2 mb-2;
}

.filter-chip button {
    @apply ml-2 inline-flex items-center justify-center w-4 h-4 rounded-full text-indigo-400 hover:bg-indigo-200 hover:text-indigo-500 focus:outline-none focus:bg-indigo-500 focus:text-white transition-colors;
}

/* Data table styles */
.data-table {
    @apply min-w-full divide-y divide-gray-200;
}

.data-table th {
    @apply px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
}

.data-table td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900;
}

.data-table tbody tr:nth-child(even) {
    @apply bg-gray-50;
}

.data-table tbody tr:hover {
    @apply bg-gray-100;
}

/* Sidebar styles */
.sidebar-nav a.active {
    @apply bg-indigo-100 border-indigo-500 text-indigo-700;
}

.sidebar-nav a:hover {
    @apply bg-gray-50 text-gray-700;
}

/* Mobile responsive adjustments */
@media (max-width: 640px) {
    .card-body {
        @apply px-3 py-4;
    }
    
    .btn-primary,
    .btn-secondary,
    .btn-danger,
    .btn-success {
        @apply text-xs px-3 py-1;
    }
    
    .data-table th,
    .data-table td {
        @apply px-3 py-2;
    }
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-break-before {
        page-break-before: always;
    }
    
    .print-break-after {
        page-break-after: always;
    }
    
    .print-break-inside-avoid {
        page-break-inside: avoid;
    }
}

/* Custom animations */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

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

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

/* Focus states for accessibility */
.focus-visible:focus {
    @apply outline-none ring-2 ring-offset-2 ring-indigo-500;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .card {
        @apply border-2 border-gray-900;
    }
    
    .btn-primary {
        @apply border-2 border-indigo-800;
    }
    
    .form-input,
    .form-select,
    .form-textarea {
        @apply border-2 border-gray-900;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .transition-all,
    .transition-colors,
    .animate-pulse,
    .animate-bounce,
    .animate-spin {
        animation: none;
        transition: none;
    }
}

/* Dark mode support (if needed in future) */
@media (prefers-color-scheme: dark) {
    /* Dark mode styles would go here */
}

/* Custom utility classes */
.text-ellipsis {
    @apply truncate;
}

.shadow-soft {
    box-shadow: 0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04);
}

.shadow-strong {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.gradient-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.gradient-success {
    background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
}

.gradient-danger {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
}

/* Lesson editor specific styles */
.lesson-editor {
    @apply min-h-screen bg-gray-50;
}

.lesson-editor-toolbar {
    @apply sticky top-0 z-10 bg-white border-b border-gray-200 px-4 py-3 flex items-center justify-between;
}

.lesson-editor-content {
    @apply max-w-4xl mx-auto p-6;
}

.vocabulary-item {
    @apply bg-white p-4 rounded-lg shadow-sm border border-gray-200 mb-4;
}

.vocabulary-item:hover {
    @apply shadow-md border-gray-300;
}

.speaking-sentence {
    @apply bg-white p-4 rounded-lg shadow-sm border border-l-4 border-l-green-400 mb-4;
}

.grammar-rule {
    @apply bg-white p-4 rounded-lg shadow-sm border border-l-4 border-l-yellow-400 mb-4;
}

.reading-passage {
    @apply bg-white p-6 rounded-lg shadow-sm border border-gray-200 mb-6;
}

/* Job monitoring styles */
.job-card {
    @apply bg-white p-4 rounded-lg shadow-sm border border-gray-200 mb-4 transition-all hover:shadow-md;
}

.job-progress-bar {
    @apply w-full bg-gray-200 rounded-full h-2 mb-2;
}

.job-progress-fill {
    @apply bg-indigo-600 h-2 rounded-full transition-all duration-500 ease-out;
}

/* Export modal styles */
.export-preview {
    @apply bg-gray-100 p-4 rounded-md font-mono text-sm max-h-64 overflow-y-auto custom-scrollbar;
}

.format-selector {
    @apply grid grid-cols-2 sm:grid-cols-4 gap-3 mb-4;
}

.format-option {
    @apply relative flex items-center justify-center p-3 border-2 border-gray-200 rounded-lg cursor-pointer hover:border-indigo-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-colors;
}

.format-option.selected {
    @apply border-indigo-500 bg-indigo-50;
}

/* Assessment styles */
.question-card {
    @apply bg-white p-4 rounded-lg shadow-sm border border-gray-200 mb-4;
}

.answer-option {
    @apply flex items-center p-2 rounded-md hover:bg-gray-50 cursor-pointer;
}

.answer-option.correct {
    @apply bg-green-50 border border-green-200;
}

.answer-option.incorrect {
    @apply bg-red-50 border border-red-200;
}

/* Sequence builder styles */
.sequence-builder {
    @apply bg-white rounded-lg shadow-sm border border-gray-200 p-6;
}

.sequence-item {
    @apply flex items-center p-3 bg-gray-50 rounded-md border border-gray-200 mb-3 cursor-move;
}

.sequence-item:hover {
    @apply bg-gray-100 border-gray-300;
}

.sequence-connector {
    @apply flex items-center justify-center h-8 text-gray-400;
}

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

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

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

.chart-container {
    @apply bg-white p-6 rounded-lg shadow-sm border border-gray-200;
}

/* Responsive utilities */
.mobile-only {
    @apply block sm:hidden;
}

.desktop-only {
    @apply hidden sm:block;
}

.tablet-up {
    @apply hidden md:block;
}

.mobile-tablet {
    @apply block lg:hidden;
}