/* FiveM LMS System - Custom Styles */

/* Base styles */
:root {
    --primary-color: #1e40af;
    --secondary-color: #64748b;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --error-color: #ef4444;
    --info-color: #3b82f6;
}

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

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

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

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

/* Organization branding */
.org-branded {
    --primary-color: var(--org-primary, #1e40af);
    --secondary-color: var(--org-secondary, #64748b);
}

/* Button styles */
.btn {
    @apply px-4 py-2 rounded-md font-medium transition duration-150 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.btn-primary {
    @apply bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500;
}

.btn-secondary {
    @apply bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500;
}

.btn-success {
    @apply bg-green-600 text-white hover:bg-green-700 focus:ring-green-500;
}

.btn-warning {
    @apply bg-yellow-600 text-white hover:bg-yellow-700 focus:ring-yellow-500;
}

.btn-danger {
    @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
}

.btn-outline {
    @apply border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:ring-gray-500;
}

/* Form styles */
.form-input {
    @apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm;
}

.form-textarea {
    @apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm resize-vertical;
}

.form-select {
    @apply block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm;
}

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

.form-error {
    @apply text-sm text-red-600 mt-1;
}

.form-help {
    @apply text-sm text-gray-500 mt-1;
}

/* Card styles */
.card {
    @apply bg-white shadow rounded-lg border border-gray-200;
}

.card-header {
    @apply px-6 py-4 border-b border-gray-200;
}

.card-body {
    @apply px-6 py-4;
}

.card-footer {
    @apply px-6 py-4 border-t border-gray-200 bg-gray-50;
}

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

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

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

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

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

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

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

/* Progress bar */
.progress {
    @apply w-full bg-gray-200 rounded-full h-2;
}

.progress-bar {
    @apply bg-blue-600 h-2 rounded-full transition-all duration-300 ease-in-out;
}

.progress-success .progress-bar {
    @apply bg-green-600;
}

.progress-warning .progress-bar {
    @apply bg-yellow-600;
}

.progress-danger .progress-bar {
    @apply bg-red-600;
}

/* Course card styles */
.course-card {
    @apply bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200 border border-gray-200;
}

.course-card:hover {
    transform: translateY(-2px);
}

.course-thumbnail {
    @apply w-full h-48 object-cover rounded-t-lg;
}

.course-category {
    @apply inline-block px-3 py-1 text-xs font-semibold rounded-full text-white mb-2;
}

.course-progress {
    @apply mt-4;
}

.course-stats {
    @apply flex items-center space-x-4 text-sm text-gray-500 mt-2;
}

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

.question-options {
    @apply space-y-3 mt-4;
}

.question-option {
    @apply flex items-center space-x-3;
}

.question-option input[type="radio"],
.question-option input[type="checkbox"] {
    @apply h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300;
}

.question-feedback {
    @apply mt-4 p-3 rounded-md;
}

.question-feedback.correct {
    @apply bg-green-100 border border-green-200 text-green-800;
}

.question-feedback.incorrect {
    @apply bg-red-100 border border-red-200 text-red-800;
}

/* Dashboard styles */
.stat-card {
    @apply bg-white overflow-hidden shadow rounded-lg;
}

.stat-card-body {
    @apply p-5;
}

.stat-icon {
    @apply flex items-center justify-center h-12 w-12 rounded-md text-white;
}

.stat-number {
    @apply mt-2 text-3xl font-extrabold text-gray-900;
}

.stat-label {
    @apply text-sm font-medium text-gray-500 truncate;
}

.stat-change {
    @apply mt-2 text-sm;
}

.stat-change.positive {
    @apply text-green-600;
}

.stat-change.negative {
    @apply text-red-600;
}

/* Course builder styles */
.course-builder {
    @apply space-y-6;
}

.module-item {
    @apply bg-white border border-gray-200 rounded-lg p-4;
}

.module-header {
    @apply flex items-center justify-between cursor-move;
}

.module-content {
    @apply mt-4 space-y-3;
}

.lesson-item {
    @apply bg-gray-50 border border-gray-200 rounded p-3 ml-6;
}

.drag-handle {
    @apply cursor-move text-gray-400 hover:text-gray-600;
}

.sortable-ghost {
    @apply opacity-50;
}

.sortable-chosen {
    @apply transform scale-105;
}

/* Notification styles */
.notification {
    @apply fixed top-4 right-4 max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden z-50;
}

.notification-success {
    @apply border-l-4 border-green-400;
}

.notification-error {
    @apply border-l-4 border-red-400;
}

.notification-warning {
    @apply border-l-4 border-yellow-400;
}

.notification-info {
    @apply border-l-4 border-blue-400;
}

/* Certificate styles */
.certificate {
    @apply bg-white border-2 border-gray-300 p-8 max-w-4xl mx-auto;
    background: linear-gradient(45deg, #f8fafc 25%, transparent 25%),
                linear-gradient(-45deg, #f8fafc 25%, transparent 25%),
                linear-gradient(45deg, transparent 75%, #f8fafc 75%),
                linear-gradient(-45deg, transparent 75%, #f8fafc 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.certificate-border {
    @apply border-4 border-double border-gray-600 p-6;
}

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

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

.certificate-subtitle {
    @apply text-xl text-gray-600;
}

.certificate-body {
    @apply text-center mb-8;
}

.certificate-recipient {
    @apply text-2xl font-semibold text-gray-800 mb-4;
}

.certificate-course {
    @apply text-xl text-gray-700 mb-2;
}

.certificate-date {
    @apply text-lg text-gray-600;
}

.certificate-footer {
    @apply flex justify-between items-end mt-12;
}

.certificate-signature {
    @apply text-center;
}

.certificate-seal {
    @apply w-24 h-24 mx-auto mb-2 rounded-full bg-blue-600 flex items-center justify-center text-white font-bold;
}

/* Leaderboard styles */
.leaderboard {
    @apply bg-white shadow rounded-lg;
}

.leaderboard-header {
    @apply px-6 py-4 border-b border-gray-200;
}

.leaderboard-item {
    @apply flex items-center justify-between px-6 py-4 border-b border-gray-100 last:border-b-0;
}

.leaderboard-rank {
    @apply flex items-center space-x-3;
}

.leaderboard-position {
    @apply flex items-center justify-center w-8 h-8 rounded-full font-bold text-white;
}

.leaderboard-position.first {
    @apply bg-yellow-500;
}

.leaderboard-position.second {
    @apply bg-gray-400;
}

.leaderboard-position.third {
    @apply bg-orange-500;
}

.leaderboard-position.other {
    @apply bg-blue-500;
}

.leaderboard-user {
    @apply flex items-center space-x-3;
}

.leaderboard-avatar {
    @apply w-10 h-10 rounded-full;
}

.leaderboard-info {
    @apply flex-1;
}

.leaderboard-name {
    @apply font-medium text-gray-900;
}

.leaderboard-details {
    @apply text-sm text-gray-500;
}

.leaderboard-score {
    @apply text-right;
}

.leaderboard-points {
    @apply text-lg font-bold text-gray-900;
}

.leaderboard-badges {
    @apply text-sm text-gray-500;
}

/* Mobile responsive adjustments */
@media (max-width: 640px) {
    .course-card {
        @apply mx-2;
    }
    
    .stat-card {
        @apply mx-2 mb-4;
    }
    
    .certificate {
        @apply p-4 mx-2;
    }
    
    .certificate-title {
        @apply text-2xl;
    }
    
    .certificate-recipient {
        @apply text-xl;
    }
    
    .certificate-course {
        @apply text-lg;
    }
}

/* Loading animation */
.loading-spinner {
    @apply inline-block w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin;
}

/* Accessibility */
.sr-only {
    @apply absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0;
}

/* Focus styles for keyboard navigation */
.focus-visible:focus {
    @apply outline-none ring-2 ring-blue-500 ring-offset-2;
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    .certificate {
        @apply shadow-none border-2 border-black;
    }
    
    body {
        @apply text-black bg-white;
    }
}

/* Navigation Dropdown Styles */
.nav-dropdown-menu {
    @apply transition-all duration-200 ease-in-out transform;
    opacity: 1;
    transform: translateY(0);
}

.nav-dropdown-menu.hidden {
    opacity: 0;
    transform: translateY(-10px);
    visibility: hidden;
}

.nav-dropdown-btn:hover .fa-chevron-down {
    @apply transform rotate-180 transition-transform duration-200;
}

.nav-dropdown-menu a:hover {
    @apply bg-gray-50 text-gray-900 transition-colors duration-150;
}

/* Active navigation link */
.nav-link.active,
.nav-dropdown-btn.active {
    @apply text-blue-600 bg-blue-50 border-blue-500;
}

/* Mobile menu improvements */
#mobile-menu {
    @apply transition-all duration-300 ease-in-out;
}

#mobile-menu.hidden {
    @apply transform -translate-y-2 opacity-0;
}

/* Quick search styling */
#quick-search:focus {
    @apply ring-2 ring-blue-500 border-blue-500 bg-white shadow-sm;
}

/* Notification badge animation */
#notification-badge {
    @apply animate-pulse;
}

/* Role-based visibility transitions */
.instructor-only,
.course-admin-only,
.admin-only,
.org-admin-only {
    @apply transition-all duration-300 ease-in-out;
}

/* Improved dropdown shadows */
.nav-dropdown-menu {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Hover effects for navigation */
.nav-link:hover,
.nav-dropdown-btn:hover {
    @apply transform scale-105 transition-transform duration-200;
}

/* Active state indicators */
.nav-link.router-link-active,
.nav-dropdown-btn.router-link-active {
    @apply text-blue-600 bg-blue-50;
}

/* Mobile navigation sections */
.mobile-section {
    @apply border-t border-gray-200 pt-2 mt-2;
}

.mobile-section:first-child {
    @apply border-t-0 pt-0 mt-0;
}

/* Mobile responsive improvements */
@media (max-width: 640px) {
    .nav-dropdown-menu {
        @apply w-full left-0 right-0 mt-1;
    }
    
    #quick-search {
        @apply w-full;
    }
    
    .mobile-section {
        @apply mb-2;
    }
}

/* Course Builder Placeholder Styles */
#course-description.empty[data-placeholder]::before {
    content: attr(data-placeholder);
    color: #9ca3af;
    position: absolute;
    pointer-events: none;
    font-style: italic;
}

#course-description {
    position: relative;
    min-height: 120px;
    padding: 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: white;
}

#course-description:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Course Builder Comprehensive Styles */
.text-editor-btn {
    @apply px-2 py-1 text-gray-600 hover:text-gray-800 hover:bg-gray-100 rounded text-sm border-0 bg-transparent;
}

.text-editor-btn:hover {
    @apply bg-gray-100;
}

.form-input {
    @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
}

.form-select {
    @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
}

.form-textarea {
    @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none;
}

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

.form-radio {
    @apply h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300;
}

.btn {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.btn-primary {
    @apply text-white bg-blue-600 hover:bg-blue-700 focus:ring-blue-500;
}

.btn-outline {
    @apply text-gray-700 bg-white border-gray-300 hover:bg-gray-50 focus:ring-blue-500;
}

.btn-sm {
    @apply px-3 py-1.5 text-xs;
}

.btn-xs {
    @apply px-2 py-1 text-xs;
}

.module-item {
    @apply transition-all duration-200;
}

.module-item:hover {
    @apply shadow-md;
}

.lesson-item {
    @apply transition-all duration-200;
}

.lesson-item:hover {
    @apply bg-gray-100;
}

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

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

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

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

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

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