/* ==========================================================================
   النمط للطباعة (Print) - النسخة الشاملة والمدمجة والموزونة بدقة
   الموازنة: ضبط تسميات الخيارات (A, B, C, D) بحجم وسطي مثالي (لا ضخم ولا مجهري)
   ========================================================================== */
@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;
    }

    /* ==========================================================================
       ٣. الشريط العلوي والعلامات المائية
       ========================================================================== */
    #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;
        print-color-adjust: exact !important;
    }

    #unitTitleTop {
        font-size: 20px !important;
        font-weight: bold !important;
        color: #0B3D91 !important;
        text-align: right !important;
        margin: 0 0 5px 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    #fixedTopBar::before {
        content: "📚 " attr(data-main-title) !important;
        display: block !important;
        visibility: visible !important;
        font-size: 18px !important;
        font-weight: bold !important;
        color: #1e40af !important;
        background: none !important;
        text-align: right !important;
        margin-bottom: 8px !important;
        padding-bottom: 5px !important;
        border-bottom: 2px solid #1e40af !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: 14px !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;
    }

    /* تسميات الخيارات (A, B, C, D) - حجم وسطي متناسق وموزون ومقروء */
    .option-label {
        min-width: 14px !important;      
        min-height: 14px !important;     
        width: 14px !important;          
        height: 14px !important;         
        font-size: 9px !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;
        border-radius: 3px !important;   
        padding: 0 !important;           
        margin: 0 4px 0 2px !important;  
        line-height: 1 !important;       
        vertical-align: middle !important;
        position: relative !important;
        top: -1px !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;
        min-width: 14px !important;
        min-height: 14px !important;
        width: 14px !important;
        height: 14px !important;
        font-size: 9px !important;
        display: inline-flex !important;
        visibility: visible !important;
        vertical-align: middle !important;
        position: relative !important;
        top: -1px !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;
        min-width: 14px !important;
        min-height: 14px !important;
        width: 14px !important;
        height: 14px !important;
        font-size: 9px !important;
        display: inline-flex !important;
        visibility: visible !important;
        vertical-align: middle !important;
        position: relative !important;
        top: -1px !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)
       ========================================================================== */
    .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;
        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;
    }

    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;
        white-space: nowrap !important;
    }

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

    .bullet-item span + span {
        margin-right: 0 !important;
    }

    /* ==========================================================================
       ١٤. إنهاء التموضع الثابت للعناصر المستقرة
       ========================================================================== */
    .fixed, .sticky {
        position: relative !important;
    }
}