/* ==========================================================================
   النمط للطباعة (Print) - النسخة الشاملة والمحدثة بالكامل
   التحديثات: 
   1. معالجة خروج وقص المعادلات العربية من الأعلى والأسفل.
   2. وزن هوامش المعادلات لمنع التباعد المفرط بين الأسطر.
   3. منع العناوين اليتيمة وإجبار انتقال عناوين الوحدات والأسئلة مع محتواها.
   4. السماح بانقسام البطاقات مع حماية السؤال وخياراته ككتلة واحدة.
   5. فصل الإجابة والتفسير عن السؤال (يمكن أن ينفصل لصفحة جديدة).
   6. ربط شريط رقم السؤال والمفضلة مع السؤال ككتلة واحدة لا تنفصل.
   7. تقليص وضغط الهوامش والحشو الداخلي لمنع الفراغات المهدرة تماماً.
   ========================================================================== */
@media print {
    /* ==========================================================================
       ١. الإعدادات العامة وإجبار الألوان
       ========================================================================== */
    body {
        background: white !important;
        font-family: "AlMohanadLocal", "Sakkal Majalla", serif !important;
        font-size: 16px !important;
        line-height: 1.3 !important;
        margin: 0 !important;
        padding: 0 !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* إجبار طباعة الألوان والخلفيات لعناصر محددة */
    html, body, 
    .question-title, 
    .question-card .question-title,
    #questionsList .question-title, 
    .question-card h4,
    .qa-concept-card h4, 
    .qa-concept-card .question-title-area,
    .question-title-area,
    .question-card [class*="question-title"],
    .katex, .katex-display, .katex .frac-line,
    .whatsapp-link, .option-label, 
    .favorite-btn,
    .favorite-btn i,
    .favorite-btn svg,
    .option-btn.border-green-500 .option-label,
    .option-btn.border-red-300 .option-label,
    #fixedTopBar,
    .qa-concept-card .inline-flex.items-center.justify-center.bg-blue-600,
    .qa-concept-card span[class*="bg-blue-600"],
    th,
    h1, h2, h3, h4, h5 {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* إزالة الظلال من جميع العناصر غير الرياضية */
    *:not(.katex *):not(.katex-display *) {
        box-shadow: none !important;
        text-shadow: none !important;
    }

    @page {
        margin: 1cm 1.5cm 1.5cm 1.5cm !important;
        size: auto !important;
    }

    .container, .content-area, main, #questionsView {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* ==========================================================================
       ٢. نظام التلوين المحدث ومنع العناوين اليتيمة
       ========================================================================== */
    h1, h2, .question-card h2 {
        color: #064e3b !important;
        font-weight: bold !important;
        font-family: "AlMohanadLocal", "Sakkal Majalla", serif !important;
        background-color: transparent !important;
        page-break-after: avoid !important;
        break-after: avoid !important;
    }

    h3, .question-card h3 {
        color: #166534 !important;
        font-weight: bold !important;
        page-break-after: avoid !important;
        break-after: avoid !important;
    }

    h4, .question-card h4, .qa-concept-card h4, .question-title-area h4 {
        color: #047857 !important;
        font-weight: bold !important;
        page-break-after: avoid !important;
        break-after: avoid !important;
    }

    h5, .question-card h5 {
        color: #1a1a1a !important;
        font-weight: bold !important;
        page-break-after: avoid !important;
        break-after: avoid !important;
    }

    /* الحفاظ على تلوين نصوص الأسئلة التقليدية وبطاقات الكويز باللون الأزرق النقي */
    .question-title,
    .question-card .question-title,
    #questionsList .question-title,
    .qa-concept-card .question-title-area,
    .question-title-area,
    .question-card [class*="question-title"],
    #unitTitleTop, .main-unit-header {
        color: #0D47A1 !important;
        font-weight: bold !important;
        font-family: "AlMohanadLocal", "Sakkal Majalla", serif !important;
        page-break-after: avoid !important;
        break-after: avoid !important;
    }

    /* تلوين جميع الفقرات والنصوص الداخلية التابعة لأسئلة الكويز بالأزرق */
    .question-title p,
    .question-title-area p,
    .question-card .question-title p,
    .qa-concept-card .question-title-area p,
    .question-title *,
    .question-title-area *,
    .question-card .question-title *,
    .qa-concept-card .question-title-area * {
        color: #0D47A1 !important;
        font-weight: bold !important;
    }

    /* ==========================================================================
       ٣. الشريط العلوي + تاريخ الطباعة
       ========================================================================== */
    #unitTitleTop {
        font-size: 24px !important;
        font-weight: bold !important;
        color: #0B3D91 !important;
        text-align: right !important;
        margin: 0 0 10px 0 !important;
        padding: 0 !important;
    }

    #fixedTopBar {
        display: block !important;
        visibility: visible !important;
        position: relative !important;
        top: 0 !important;
        padding: 4px 0 !important;
        margin: 0 0 10px 0 !important;
        text-align: right !important;
        background-color: #f7f7f7 !important;
        border-bottom: 1px solid #ccc !important;
        font-family: "AlMohanadLocal", "Sakkal Majalla", serif !important;
        -webkit-print-color-adjust: exact !important;
    }

    #fixedTopBar::after {
        content: "إعداد/ أبو علي | تاريخ الطباعة: " attr(data-print-date) !important;
        display: block !important;
        visibility: visible !important;
        margin-top: 8px !important;
        font-weight: bold !important;
        color: #1A73E8 !important;
        font-size: 16px !important;
        background: none !important;
        text-align: center !important;
    }

    /* ==========================================================================
       ٤. الملاحظة والتوقيع
       ========================================================================== */
    #authorSignature {
        display: block !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        page-break-after: always !important;
        break-after: always !important;
        margin: 10px 0 0 0 !important;
        padding: 10px !important;
        border: 2px solid #0D47A1 !important;
        border-radius: 8px !important;
        background-color: #E3F2FD !important;
        font-family: "AlMohanadLocal", "Sakkal Majalla", serif !important;
    }

    #authorSignature *,
    .main-note-container,
    .author-info-container,
    .note-content-list {
        background-color: transparent !important;
        background: transparent !important;
    }

    /* ==========================================================================
       ٥. بطاقات الأسئلة - السماح بالانقسام المرن مع حماية كتلة السؤال والخيارات
       ========================================================================== */
    
    /* البطاقة ككل: يُسمح لها بالانقسام بين الصفحات */
    .question-card, .qa-concept-card {
        background-color: white !important;
        border: 1px solid #ddd !important;
        border-radius: 6px !important;
        padding: 4px 6px !important;
        margin: 3px 0 !important;
        width: 100% !important;
        
        /* السماح للبطاقة بالانقسام (السؤال في صفحة، والإجابة في صفحة أخرى) */
        page-break-inside: auto !important;
        break-inside: auto !important;
    }

    /* ==========================================================================
       كتلة السؤال مع خياراته: محمية من الانقسام (تبقى معاً دائماً)
       ========================================================================== */
    
    /* 
       ربط شريط رقم السؤال مع عنوان السؤال ككتلة واحدة
       يستهدف الحاوية التي تحمل رقم السؤال وزر المفضلة
    */
    .question-card > div:first-child,
    .qa-concept-card > div:first-child,
    .question-card .flex.items-center.justify-between,
    .qa-concept-card .flex.items-center.justify-between,
    .question-card [class*="flex"][class*="justify-between"],
    .qa-concept-card [class*="flex"][class*="justify-between"] {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        page-break-after: avoid !important;
        break-after: avoid !important;
    }

    /* عنوان السؤال يبقى مع ما بعده */
    .question-title, 
    .question-title-area, 
    .question-card h4, 
    .qa-concept-card h4 {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        page-break-after: avoid !important;
        break-after: avoid !important;
    }

    /* شبكة الخيارات تبقى معاً ككتلة واحدة */
    .options-grid {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    /* 
       ضمان أن شريط رقم السؤال + العنوان + الخيارات يبقون معاً
       نجمعهم في مجموعة واحدة متماسكة
    */
    .question-card > div:first-child,
    .question-card .question-title,
    .question-card .options-grid,
    .qa-concept-card > div:first-child,
    .qa-concept-card .question-title-area,
    .qa-concept-card .options-grid {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    /* ==========================================================================
       الإجابة والتفسير: يُسمح لها بالانفصال عن السؤال
       ========================================================================== */
    
    /* مناطق الإجابة والتفسير يمكن أن تنفصل وتنتقل لصفحة جديدة */
    .qa-concept-card .answer-content, 
    .explanation-area, 
    .result-area,
    .question-card .answer-content,
    .question-card .explanation-area,
    .question-card .result-area {
        page-break-inside: auto !important;
        break-inside: auto !important;
        margin-top: 2px !important;
        padding-top: 0 !important;
        
        /* السماح للإجابة بالانفصال عن السؤال (الانتقال لصفحة جديدة) */
        page-break-before: auto !important;
        break-before: auto !important;
    }

    /* حماية بسيطة: لا تترك سطراً واحداً من الإجابة في صفحة */
    .answer-content p,
    .explanation-area p,
    .result-area p {
        widows: 2 !important;
        orphans: 2 !important;
    }

    .result-area > div {
        margin-top: 0 !important;
        padding-top: 2px !important;
    }

    p, div, span:not(.katex *) {
        margin: 2px 0 !important;
        line-height: 1.25 !important;
    }

    /* ==========================================================================
       ٦. شبكة الخيارات
       ========================================================================== */
    .options-grid {
        display: grid !important;
        gap: 4px !important;
        margin: 2px 0 !important;
    }

    @media (orientation: portrait) {
        .options-grid { grid-template-columns: repeat(2, 1fr) !important; }
    }
    @media (orientation: landscape) {
        .options-grid { grid-template-columns: repeat(4, 1fr) !important; }
    }

    /* نمط الخيارات العامة للطباعة */
    .option-btn {
        padding: 4px 6px !important;
        font-size: 13px !important;
        background: white !important;
        border: 1px solid #aaa !important;
        color: black !important;
        position: relative !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    .option-label {
        min-width: 20px !important;
        min-height: 20px !important;
        font-size: 12px !important;
        background-color: #ccc !important;
        color: black !important;
        border: 1px solid #888 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
    }

    /* تمييز الخيارات الصحيحة بعلامة ✓ */
    .option-btn.border-green-500,
    .option-btn.is-correct {
        border: 1px solid #10b981 !important;
        background-color: #f0fdf4 !important;
        position: relative !important;
    }
    .option-btn.border-green-500 .option-label,
    .option-btn.is-correct .option-label {
        background-color: #10b981 !important;
        color: white !important;
        border: none !important;
        display: inline-flex !important;
        visibility: visible !important;
    }

    .option-btn.border-green-500::after,
    .option-btn.is-correct::after {
        content: " ✓" !important;
        display: inline !important;
        visibility: visible !important;
        color: #10b981 !important;
        font-weight: bold !important;
        font-size: 16px !important;
        position: relative !important;
        top: 2px !important;
        margin-right: 4px !important;
        vertical-align: baseline !important;
    }

    /* تمييز الخيارات الخاطئة بعلامة ✗ */
    .option-btn.border-red-300,
    .option-btn.is-wrong {
        border: 1px solid #ef4444 !important;
        background-color: #fef2f2 !important;
        position: relative !important;
    }
    .option-btn.border-red-300 .option-label,
    .option-btn.is-wrong .option-label {
        background-color: #ef4444 !important;
        color: white !important;
        border: none !important;
        display: inline-flex !important;
        visibility: visible !important;
    }

    .option-btn.border-red-300::after,
    .option-btn.is-wrong::after {
        content: " ✗" !important;
        display: inline !important;
        visibility: visible !important;
        color: #ef4444 !important;
        font-weight: bold !important;
        font-size: 16px !important;
        position: relative !important;
        top: 2px !important;
        margin-right: 4px !important;
        vertical-align: baseline !important;
    }

    /* ==========================================================================
       ٧. المعادلات والرموز الرياضية - الموزونة والمدمجة
       ========================================================================== */
    .katex-display {
        color: #1565C0 !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        max-width: 100% !important;
        text-align: center !important;
        padding: 2px 0 !important;
        margin: 2px 0 !important;
    }

    .katex {
        color: #1565C0 !important;
        max-width: 100% !important;
        font-size: 1.05em !important;
        line-height: 1.2 !important;
    }

    .katex .katex-html {
        max-width: 100% !important;
        display: inline-flex !important; 
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        row-gap: 0.2em !important;
        padding-top: 3px !important;
        padding-bottom: 1px !important;
    }

    .katex .mpunct, 
    .katex .mord + .mpunct, 
    .katex .mpunct + .mord {
        direction: ltr !important;
        unicode-bidi: bidi-override !important;
        display: inline-block !important;
    }

    .katex .mord:not(.text) {
        direction: ltr !important;
        unicode-bidi: embed !important;
        display: inline-block !important;
    }

    .katex .base {
        display: inline-flex !important;
        align-items: center !important;
        padding-top: 1px !important;
        padding-bottom: 1px !important;
    }

    .katex * { 
        color: #1565C0 !important; 
        text-shadow: none !important;
        border-color: #1565C0 !important;
    }

    .katex .frac-line {
        border-bottom-style: solid !important;
        border-bottom-width: 2px !important; 
        border-bottom-color: #1565C0 !important;
        background-color: #1565C0 !important; 
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .katex path {
        stroke: #1565C0 !important;
        fill: #1565C0 !important;
    }

    .katex .katex-mathml, 
    .katex .katex-html {
        font-weight: bold !important;
    }

    /* ==========================================================================
       ٨. الجداول (حدود رشيقة، رأس شفاف، ومحمية من الانقسام)
       ========================================================================== */
    table {
        width: 100% !important;
        max-width: 100% !important;
        border-collapse: collapse !important;
        margin: 1rem auto !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        background-color: white !important;
        border: 1px solid #d1d5db !important;
    }

    thead {
        display: table-header-group !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    th, td {
        border: 1px solid #d1d5db !important;
        word-wrap: break-word !important;
        word-break: break-word !important;
        text-align: center !important;
        vertical-align: middle !important;
    }

    th {
        background-color: rgba(30, 58, 138, 0.08) !important;  
        color: #1a1a1a !important;
        font-weight: bold !important;
        padding: 8px 10px !important;
    }

    td {
        background-color: white !important;
        color: #1a1a1a !important;
        padding: 6px 8px !important;
    }

    tr {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    /* ==========================================================================
       ٩. تلوين رقم السؤال المقالي
       ========================================================================== */
    .qa-concept-card .inline-flex.items-center.justify-center.bg-blue-600,
    .qa-concept-card span[class*="bg-blue-600"] {
        background-color: #1e40af !important;
        color: white !important;
        border-radius: 0.5rem !important;
        padding: 0.25rem 0.75rem !important;
        font-weight: bold !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* ==========================================================================
       ١٠. ألوان الإطارات الجانبية للبطاقات
       ========================================================================== */
    .qa-concept-card.frame-green { border-right: 4px solid #10b981 !important; }
    .qa-concept-card.frame-red { border-right: 4px solid #ef4444 !important; }
    .qa-concept-card.frame-yellow { border-right: 4px solid #f59e0b !important; }
    .qa-concept-card.frame-purple { border-right: 4px solid #8b5cf6 !important; }

    .qa-concept-card .answer-content {
        background-color: white !important;
        color: #1f2937 !important;
        border: none !important;
    }

    /* ==========================================================================
       ١١. إخفاء أزرار الصوت والتعديل والعناصر غير الضرورية
       ========================================================================== */
    .play-qa-question-only,
    .play-qa-answer-only,
    .edit-qa-question-btn,
    .tts-btn,
    .play-single-question,
    header, footer, nav,
    .controls-panel, .action-buttons, .save-button, .print-button,
    .back-button, .next-button, .score-summary, .summary-box,
    .modal-background, .modal-content, .check-btn, .check-multi-btn,
    .alert-box, .notification-box, .hidden-print,
    #toggleSolutionsBtn, #backToUnitsTop, #resetUnitTop,
    #printQuestionsBtn, #solutionsControl, #solutionsTextInProgress,
    #unitProgressTop, #quizCompletionSummary, #menuButton,
    #dropdownMenu, #themeToggle, #mainHeader, #practiceRoundSummary,
    #ttsReadPageBtn, #pauseSpeechBtn, #resumeSpeechBtn, #stopSpeechBtn,
    .tts-controls, .speed-dropdown, .speed-btn, .speed-menu,
    button[onclick*="speakSingleQuestion"], button[onclick*="startReadingFromQuestion"],
    .edit-question-btn, .edit-btn,
    .action-btn.edit-btn, .delete-btn,
    .action-btn.delete-btn, #addNewQuestionBtn, .admin-btn,
    #editNotesBtn, .edit-notes-btn, button[onclick*="showNotesManagementModal"],
    div.mt-3.p-3.bg-purple-50, div[class*="bg-purple-50"],
    textarea, input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input:not([type="checkbox"]):not([type="radio"]),
    .question-card textarea, .question-card input,
    .qa-concept-card textarea {
        display: none !important;
    }

    /* إخفاء أزرار البطاقات عدا المفضلة */
    .question-card button:not(.option-btn):not(.favorite-btn),
    .qa-concept-card button:not(.favorite-btn) {
        display: none !important;
    }

    /* ==========================================================================
       ١٢. إظهار زر المفضلة وضمان وضوح النجمة
       ========================================================================== */
    .favorite-btn {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        height: auto !important;
        background-color: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        margin: 0 4px !important;
        padding: 2px !important;
    }

    .favorite-btn i,
    .favorite-btn svg,
    .fa-star {
        display: inline-block !important;
        visibility: visible !important;
        font-size: 16px !important;
        color: #d1d5db !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    .favorite-btn.active i,
    .favorite-btn.active svg,
    .favorite-btn.active {
        color: #f59e0b !important;
    }

    /* ==========================================================================
       ١٣. زر التواصل (واتساب)
       ========================================================================== */
    .whatsapp-link {
        display: inline-flex !important;
        visibility: visible !important;
        background-color: #25D366 !important;
        color: #0D47A1 !important;
        padding: 6px 12px !important;
        border-radius: 8px !important;
        text-decoration: none !important;
        font-weight: bold !important;
        margin-top: 5px !important;
    }

    /* ==========================================================================
       ١٤. إزالة الخلفيات مع استثناءات دقيقة
       ========================================================================== */
    *:not(#authorSignature):not(#authorSignature *):not(.whatsapp-link):not(.option-label):not(#fixedTopBar):not(th):not(td):not(table):not(.inline-flex.items-center.justify-center.bg-blue-600):not(.katex):not(.katex *) {
        background-color: white !important;
        background-image: none !important;
        background: white !important;
    }

    .option-btn.border-green-500 .option-label,
    .option-btn.is-correct .option-label {
        background-color: #10b981 !important;
        color: white !important;
    }
    .option-btn.border-red-300 .option-label,
    .option-btn.is-wrong .option-label {
        background-color: #ef4444 !important;
        color: white !important;
    }
    #fixedTopBar {
        background-color: #f7f7f7 !important;
    }

    /* ==========================================================================
       ١٥. تحسين تباين النصوص والفقرات
       ========================================================================== */
    body, p, span:not(.katex *), div:not(.katex *), .text-sm, .text-base, .text-lg,
    .result-area, .explanation-area, .feedback-text {
        color: #1a1a1a !important;
    }

    /* ==========================================================================
       ١٦. الضغط المكثف للمسافات والهوامش العامة لمنع الفراغات المهدرة
       ========================================================================== */
    body, .container, main, #questionsView {
        margin: 0 !important;
        padding: 0 !important;
    }
    .question-card .mb-2, .question-card .mb-3, .question-card .mb-4,
    .question-card .mt-2, .question-card .mt-3, .question-card .mt-4,
    .qa-concept-card .mb-2, .qa-concept-card .mb-3, .qa-concept-card .mb-4 {
        margin-bottom: 2px !important;
        margin-top: 2px !important;
    }
    .question-title, .question-card h4, .qa-concept-card h4, .qa-concept-card .question-title-area {
        margin-top: 1px !important;
        margin-bottom: 3px !important;
    }

    /* ==========================================================================
       ١٧. إزالة الخطوط والحدود غير الضرورية
       ========================================================================== */
    .border:not(table):not(th):not(td):not(tr):not(.question-card):not(.qa-concept-card), 
    .border-t:not(table):not(th):not(td):not(tr), 
    .border-b:not(table):not(th):not(td):not(tr), 
    .border-l:not(table):not(th):not(td):not(tr), 
    .hr, hr,
    [class*="border-"]:not(table):not(td):not(th):not(tr):not(.qa-concept-card[class*="border-"]):not(.option-btn) {
        border: none !important;
    }
    .question-title::after, .question-title::before,
    h1::after, h2::after, h3::after, h4::after {
        display: none !important;
    }


/* ==========================================================================
   تنسيق النقاط (•) للطباعة - محاذاة مع خط الأساس ومسافة كافية
   ========================================================================== */
.bullet-item {
    align-items: baseline !important;
    line-height: 1.6 !important;
}

.bullet-dot {
    font-size: 8px !important;
    line-height: inherit !important;
    vertical-align: baseline !important;
    display: inline-block !important;
    width: 14px !important;
    text-align: center !important;
    margin-left: 4px !important;
    margin-right: 10px !important;
    flex-shrink: 0 !important;
    color: #3b82f6 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}

.bullet-text {
    display: inline !important;
    vertical-align: baseline !important;
    padding-right: 4px !important;
}

/* تأكيد إضافي: أي span داخل bullet-item يملك مسافة */
.bullet-item span + span {
    margin-right: 0 !important;
}

/* منع التفاف النقطة وحدها في سطر */
.bullet-dot {
    white-space: nowrap !important;
}


    /* ==========================================================================
       ١٨. رفع المحتوى إلى أعلى الصفحة وتقريب العناصر المستقرة
       ========================================================================== */
    .fixed, .sticky {
        position: relative !important;
    }
}