/* French Exams App - Modern Focus Theme */

:root {
     /* Colors */
     --primary: #4f46e5;
     --primary-dark: #4338ca;
     --primary-light: #e0e7ff;
     --primary-navy: #1e3a5f;
     --secondary: #64748b;
     --secondary-teal: #0d9488;
     --accent: #f59e0b;
     --success: #10b981;
     --success-emerald: #10b981;
     --danger: #ef4444;
     --error-rose: #ef4444;
     --background: #f8fafc;
     --bg-cool-white: #f8fafc;
     --white: #ffffff;
     --gray-50: #f9fafb;
     --gray-100: #f1f5f9;
     --gray-200: #e2e8f0;
     --gray-300: #cbd5e1;
     --gray-500: #64748b;
     --gray-700: #334155;
     --gray-900: #0f172a;
     --text-muted: #64748b;

     /* Typography */
     --font: 'Cairo', system-ui, -apple-system, sans-serif;

     /* Radius */
     --radius-sm: 0.5rem;
     --radius-md: 0.75rem;
     --radius-lg: 1rem;
     --radius-xl: 1.5rem;

     /* Shadows */
     --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
     --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
     --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}

body {
     font-family: var(--font);
     background: var(--background);
     color: var(--gray-900);
     line-height: 1.6;
     min-height: 100vh;
}

/* Container */
.container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 1rem;
}

/* Header */
header {
     background: var(--white);
     border-bottom: 1px solid var(--gray-200);
     padding: 1rem 0;
     position: sticky;
     top: 0;
     z-index: 50;
     box-shadow: var(--shadow-sm);
}

header .container {
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: 1rem;
}

header h1 {
     font-size: 1.25rem;
     font-weight: 800;
     color: var(--gray-900);
     display: flex;
     align-items: center;
     gap: 0.5rem;
}

.user-info {
     display: flex;
     align-items: center;
     gap: 1rem;
}

.user-avatar {
     width: 40px;
     height: 40px;
     background: var(--primary-light);
     color: var(--primary);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 700;
     font-size: 1.2rem;
}

#userName {
     font-weight: 600;
     font-size: 0.9rem;
}

#examTitle {
     font-size: 0.8rem;
     color: var(--secondary);
     display: block;
}

/* Main Layout */
main {
     padding: 2rem 0;
     min-height: calc(100vh - 140px);
}

/* Exam Container */
.exam-container {
     max-width: 900px;
     margin: 0 auto;
     background: var(--white);
     border-radius: var(--radius-xl);
     box-shadow: var(--shadow-lg);
     padding: 2rem;
     border: 1px solid var(--gray-200);
}

/* Exam Header */
.exam-header {
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
     margin-bottom: 1.5rem;
     flex-wrap: wrap;
     gap: 1rem;
}

.exam-header h2 {
     font-size: 1.5rem;
     color: var(--gray-900);
     line-height: 1.2;
}

#examLevel {
     color: var(--secondary);
     font-size: 0.9rem;
}

.exam-progress {
     text-align: right;
     font-weight: 600;
     color: var(--gray-700);
}

#scoreDisplay {
     display: block;
     font-size: 0.9rem;
     color: var(--primary);
     margin-top: 0.25rem;
}

/* Progress Bar */
.progress-bar {
     width: 100%;
     height: 8px;
     background: var(--gray-200);
     border-radius: 9999px;
     overflow: hidden;
     margin-bottom: 2rem;
}

.progress-fill {
     height: 100%;
     background: var(--primary);
     border-radius: 9999px;
     transition: width 0.3s ease;
}

/* Section Tabs */
.section-tabs {
     display: flex;
     gap: 0.5rem;
     margin-bottom: 2rem;
     overflow-x: auto;
     padding-bottom: 0.5rem;
     scrollbar-width: thin;
     scrollbar-color: var(--gray-300) transparent;
}

.section-tab {
     padding: 0.75rem 1.25rem;
     background: var(--gray-50);
     border: 1px solid var(--gray-200);
     border-radius: var(--radius-md);
     color: var(--secondary);
     font-weight: 600;
     font-family: inherit;
     font-size: 0.9rem;
     cursor: pointer;
     white-space: nowrap;
     transition: all 0.2s;
}

.section-tab:hover {
     background: var(--gray-100);
     color: var(--gray-900);
}

.section-tab.active {
     background: var(--primary);
     color: var(--white);
     border-color: var(--primary);
     box-shadow: var(--shadow-sm);
}

/* Question Content */
.script-box {
     background: var(--gray-50);
     border-left: 4px solid var(--primary);
     padding: 1.5rem;
     border-radius: 0 var(--radius-md) var(--radius-md) 0;
     margin-bottom: 1.5rem;
}

.script-box h4 {
     color: var(--gray-900);
     margin-bottom: 0.5rem;
     font-size: 1rem;
     display: flex;
     align-items: center;
     gap: 0.5rem;
}

.script-box p {
     color: var(--gray-700);
     white-space: pre-line;
     font-size: 1.05rem;
}

/* Question Card */
.question-card {
     animation: fadeIn 0.3s ease-out;
}

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

     to {
          opacity: 1;
          transform: translateY(0);
     }
}

.question-number {
     display: inline-block;
     padding: 0.25rem 0.75rem;
     background: var(--primary-light);
     color: var(--primary-dark);
     border-radius: 9999px;
     font-size: 0.85rem;
     font-weight: 700;
     margin-bottom: 1rem;
}

.question-text {
     font-size: 1.25rem;
     font-weight: 700;
     color: var(--gray-900);
     margin-bottom: 1.5rem;
     line-height: 1.6;
}

/* Options Grid */
.options-grid {
     display: flex;
     flex-direction: column;
     gap: 1rem;
}

.option-item {
     display: flex;
     align-items: center;
     gap: 1rem;
     padding: 1.25rem;
     background: var(--white);
     border: 2px solid var(--gray-200);
     border-radius: var(--radius-lg);
     cursor: pointer;
     transition: all 0.2s ease;
     position: relative;
}

.option-item:hover {
     border-color: var(--primary);
     background: var(--gray-50);
}

.option-item.selected {
     border-color: var(--primary);
     background: var(--primary-light);
}

.option-item input[type="radio"] {
     width: 1.25rem;
     height: 1.25rem;
     accent-color: var(--primary);
     cursor: pointer;
}

.option-item label {
     flex: 1;
     cursor: pointer;
     font-size: 1.1rem;
     font-weight: 500;
     color: var(--gray-700);
}

.option-item.selected label {
     color: var(--primary-dark);
     font-weight: 600;
}

/* Navigation Buttons */
.navigation-buttons {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-top: 3rem;
     padding-top: 2rem;
     border-top: 1px solid var(--gray-200);
     flex-wrap: wrap;
     gap: 1rem;
}

.nav-group {
     display: flex;
     gap: 1rem;
}

/* Buttons */
.btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 0.5rem;
     padding: 0.75rem 1.5rem;
     border-radius: var(--radius-md);
     font-weight: 600;
     font-size: 1rem;
     font-family: inherit;
     cursor: pointer;
     transition: all 0.2s;
     border: none;
     outline: none;
}

.btn:disabled {
     opacity: 0.5;
     cursor: not-allowed;
     pointer-events: none;
}

.btn-primary {
     background: var(--primary);
     color: var(--white);
     box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.2);
}

.btn-primary:hover:not(:disabled) {
     background: var(--primary-dark);
     transform: translateY(-1px);
}

.btn-secondary {
     background: var(--white);
     border: 1px solid var(--gray-300);
     color: var(--gray-700);
}

.btn-secondary:hover:not(:disabled) {
     background: var(--gray-50);
     border-color: var(--gray-400);
}

.btn-success {
     background: var(--success);
     color: var(--white);
     box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.2);
}

.btn-success:hover:not(:disabled) {
     background: #059669;
     transform: translateY(-1px);
}

.btn-outline {
     background: transparent;
     border: 1px solid var(--gray-300);
     color: var(--gray-700);
}

.btn-outline:hover {
     border-color: var(--primary);
     color: var(--primary);
}

.btn-sm {
     padding: 0.5rem 1rem;
     font-size: 0.875rem;
}

/* Toast */
.toast {
     position: fixed;
     bottom: 2rem;
     right: 2rem;
     padding: 1rem 1.5rem;
     background: var(--gray-900);
     color: var(--white);
     border-radius: var(--radius-md);
     box-shadow: var(--shadow-lg);
     z-index: 100;
     animation: slideIn 0.3s ease-out;
}

.toast.success {
     background: var(--success);
}

.toast.error {
     background: var(--danger);
}

@keyframes slideIn {
     from {
          transform: translateY(100%);
          opacity: 0;
     }

     to {
          transform: translateY(0);
          opacity: 1;
     }
}

/* Mobile Responsive */
@media (max-width: 768px) {
     .exam-container {
          padding: 1.5rem;
          border-radius: 0;
          box-shadow: none;
          border: none;
     }

     .navigation-buttons {
          flex-direction: column-reverse;
          gap: 1rem;
     }

     .nav-group {
          width: 100%;
          justify-content: space-between;
     }

     .btn {
          width: 100%;
     }

     .navigation-buttons .btn-success {
          width: 100%;
     }

     .header-content {
          flex-direction: column;
          align-items: flex-start;
     }
}

/* Utility Classes */
.hidden {
     display: none !important;
}

.text-muted {
     color: var(--secondary);
}

/* Home Page Styles */
.registration-section,
.welcome-section,
.exams-grid,
.exam-history {
     margin-bottom: 3rem;
     animation: fadeIn 0.5s ease-out;
}

.card {
     background: var(--white);
     border-radius: var(--radius-xl);
     box-shadow: var(--shadow-md);
     padding: 2rem;
     border: 1px solid var(--gray-200);
     margin-bottom: 1.5rem;
}

/* Forms */
.form-group {
     margin-bottom: 1.5rem;
}

.form-label {
     display: block;
     margin-bottom: 0.5rem;
     font-weight: 600;
     color: var(--gray-700);
}

.form-input {
     width: 100%;
     padding: 0.875rem 1rem;
     border: 2px solid var(--gray-200);
     border-radius: var(--radius-md);
     font-size: 1rem;
     font-family: inherit;
     transition: all 0.2s;
}

.form-input:focus {
     outline: none;
     border-color: var(--primary);
     box-shadow: 0 0 0 4px var(--primary-light);
}

/* Exam Cards Grid */
.exams-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 1.5rem;
}

.exam-card {
     display: flex;
     flex-direction: column;
     height: 100%;
     transition: all 0.3s;
}

.exam-card:hover {
     transform: translateY(-5px);
     box-shadow: var(--shadow-lg);
     border-color: var(--primary);
}

.exam-card h3 {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     font-size: 1.25rem;
     margin-bottom: 1rem;
     color: var(--gray-900);
}

.exam-number {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 32px;
     height: 32px;
     background: var(--primary-light);
     color: var(--primary);
     border-radius: 50%;
     font-size: 0.9rem;
     font-weight: 700;
}

.exam-info {
     display: flex;
     gap: 1rem;
     margin-bottom: 1rem;
     font-size: 0.9rem;
     color: var(--secondary);
}

.exam-stats {
     margin-top: auto;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding-top: 1rem;
     border-top: 1px solid var(--gray-100);
}

.exam-score {
     font-weight: 600;
     color: var(--secondary);
     font-size: 0.9rem;
}

/* History Section */
.history-list {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 1rem;
}

.history-item {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 1rem;
     background: var(--white);
     border: 1px solid var(--gray-200);
     border-radius: var(--radius-md);
}

.empty-state {
     text-align: center;
     padding: 3rem;
     color: var(--secondary);
}

.empty-icon {
     font-size: 3rem;
     margin-bottom: 1rem;
     opacity: 0.5;
}

/* Writing Section Styles */
.writing-details {
     border: 1px solid var(--gray-200);
     background-color: var(--gray-50);
}

.writing-area textarea {
     font-family: var(--font);
     line-height: 1.6;
     resize: vertical;
     min-height: 200px;
}

.model-answer {
     border-left: 4px solid var(--success);
}

.model-answer-section button {
     transition: all 0.2s;
}

.whitespace-pre-line {
     white-space: pre-line;
}

.bg-gray-50 {
     background-color: var(--gray-50);
}

.bg-green-50 {
     background-color: #ecfdf5;
}

.border-green-200 {
     border-color: #bbf7d0;
}

.text-green-800 {
     color: #166534;
}

.rounded {
     border-radius: var(--radius-sm);
}

.p-4 {
     padding: 1rem;
}

.p-3 {
     padding: 0.75rem;
}

.mb-2 {
     margin-bottom: 0.5rem;
}

.mb-3 {
     margin-bottom: 0.75rem;
}

.mb-4 {
     margin-bottom: 1rem;
}

.mt-4 {
     margin-top: 1rem;
}

.font-bold {
     font-weight: 700;
}

.w-full {
     width: 100%;
}

.focus\:ring-2:focus {
     box-shadow: 0 0 0 2px var(--primary-light);
     border-color: var(--primary);
     outline: none;
}

.focus\:ring-primary:focus {
     --tw-ring-color: var(--primary);
}

/* Results Page Styles */
.results-container {
     max-width: 900px;
     margin: 0 auto;
}

.results-header {
     background: linear-gradient(135deg, var(--primary), var(--primary-dark));
     color: var(--white);
     padding: 3rem 2rem;
     border-radius: var(--radius-xl);
     text-align: center;
     margin-bottom: 2rem;
     box-shadow: var(--shadow-lg);
}

.results-header h2 {
     font-size: 1.5rem;
     margin-bottom: 0.5rem;
     color: var(--white);
}

.results-header p {
     opacity: 0.9;
     margin-bottom: 1.5rem;
}

.score-display {
     font-size: 4rem;
     font-weight: 800;
     margin: 1rem 0;
}

.score-details {
     font-size: 1.25rem;
}

.percentage {
     font-weight: 700;
     font-size: 1.5rem;
     color: var(--accent);
}

.btn-accent {
     background: var(--accent);
     color: var(--gray-900);
     font-weight: 700;
     box-shadow: 0 4px 6px -1px rgba(245, 158, 11, 0.3);
}

.btn-accent:hover {
     background: #d97706;
     transform: translateY(-1px);
}

/* Question Review Cards */
.question-review {
     background: var(--white);
     border-radius: var(--radius-lg);
     padding: 1.5rem;
     margin-bottom: 1rem;
     border: 2px solid var(--gray-200);
     box-shadow: var(--shadow-sm);
     transition: all 0.2s;
}

.question-review.correct {
     border-color: var(--success);
     background: linear-gradient(to right, rgba(16, 185, 129, 0.05), var(--white));
}

.question-review.incorrect {
     border-color: var(--danger);
     background: linear-gradient(to right, rgba(239, 68, 68, 0.05), var(--white));
}

.review-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 1rem;
}

.review-status {
     font-weight: 700;
     padding: 0.25rem 0.75rem;
     border-radius: 9999px;
     font-size: 0.85rem;
}

.question-review.correct .review-status {
     background: rgba(16, 185, 129, 0.1);
     color: var(--success);
}

.question-review.incorrect .review-status {
     background: rgba(239, 68, 68, 0.1);
     color: var(--danger);
}

.review-answer {
     padding: 0.75rem 1rem;
     background: var(--gray-50);
     border-radius: var(--radius-md);
     margin-bottom: 0.75rem;
     font-size: 1rem;
}

.review-answer strong {
     margin-right: 0.5rem;
}

.review-explanation {
     background: var(--primary-light);
     padding: 1rem;
     border-radius: var(--radius-md);
     margin-top: 1rem;
}

.review-explanation h5 {
     color: var(--primary-dark);
     margin-bottom: 0.5rem;
}

.review-explanation p {
     color: var(--gray-700);
     font-size: 0.95rem;
}

/* Footer */
footer {
     text-align: center;
     padding: 2rem 0;
     margin-top: 3rem;
     border-top: 1px solid var(--gray-200);
     color: var(--secondary);
     font-size: 0.9rem;
}