/**
 * ═══════════════════════════════════════════════════════════════
 * 📱 Paper Exam Responsive Stylesheet (اختباراتي - منصة الامتحانات الورقية)
 * يضمن ظهور ورقة الاختبار بشكل احترافي ومتجاوب بالكامل على الموبايل والتابلت
 * مع الحفاظ بنسبة 100% على تنسيق الطباعة الرسمي A4 عند استخدام زر الطباعة
 * ═══════════════════════════════════════════════════════════════
 */

/* ── شاشات التابلت والأجهزة المتوسطة (أقل من 900px) ── */
@media screen and (max-width: 900px) {
    body {
        padding: 10px 8px;
    }

    .exam-sheet {
        padding: 16px 18px;
        outline: none;
        max-width: 100%;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
    }

    .print-controls {
        max-width: 100%;
    }
}

/* ── شاشات الهواتف والموبايل (أقل من 680px) ── */
@media screen and (max-width: 680px) {
    body {
        padding: 6px 4px !important;
        font-size: 14.5px !important;
        line-height: 1.65 !important;
        background-color: #f1f5f9 !important;
        -webkit-text-size-adjust: 100%;
    }

    /* أزرار التحكم والطباعة */
    .print-controls {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 8px auto !important;
        display: flex !important;
        gap: 6px !important;
    }

    .print-btn,
    .back-btn {
        flex: 1 !important;
        justify-content: center !important;
        padding: 8px 10px !important;
        font-size: 0.88rem !important;
        border-radius: 8px !important;
        min-height: 38px !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    }

    /* ورقة الامتحان الرئيسية */
    .exam-sheet {
        padding: 12px 10px !important;
        border: 2px solid var(--primary-color, #0f2b48) !important;
        outline: none !important;
        border-radius: 10px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* ── رأس الاختبار (الهيدر) ── */
    .header {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: stretch !important;
        gap: 8px !important;
        padding-bottom: 10px !important;
        margin-bottom: 10px !important;
        border-bottom: 2px solid var(--primary-color, #0f2b48) !important;
    }

    /* لوجو الاختبار في اللغات */
    .header-logo {
        order: 0 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        border: none !important;
        padding: 0 !important;
        margin-bottom: 2px !important;
    }

    .header-logo img {
        height: 46px !important;
        width: auto !important;
        max-width: 100px !important;
        margin: 0 auto !important;
    }

    /* العمود الأوسط (العنوان والشعار) */
    .header-column.center {
        order: 1 !important;
        width: 100% !important;
        text-align: center !important;
        flex: none !important;
    }

    .sticker {
        max-height: 46px !important;
        width: auto !important;
        margin: 0 auto 4px auto !important;
        display: block !important;
    }

    .exam-title {
        font-size: 1.18rem !important;
        font-weight: 800 !important;
        line-height: 1.35 !important;
        margin-top: 2px !important;
    }

    .exam-subtitle {
        font-size: 0.9rem !important;
        margin-top: 2px !important;
        line-height: 1.3 !important;
    }

    /* بيانات الاختبار الجانبية: تتحول لكارتين أنيقين جنب بعض */
    .header-column:not(.center) {
        order: 2 !important;
        flex: 1 1 calc(50% - 6px) !important;
        min-width: 115px !important;
        background: var(--bg-light, #f8fafc) !important;
        padding: 6px 8px !important;
        border-radius: 6px !important;
        border: 1px solid var(--border-color, #cbd5e1) !important;
        font-size: 0.78rem !important;
        line-height: 1.45 !important;
        text-align: start !important;
    }

    .header-column:not(.center) p {
        margin: 2px 0 !important;
    }

    /* ── شريط بيانات الطالب ── */
    .student-bar {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 6px 8px !important;
        padding: 7px 9px !important;
        font-size: 0.82rem !important;
        border-radius: 6px !important;
        margin-bottom: 10px !important;
        background: #f8fafc !important;
        border: 1px solid var(--border-color, #cbd5e1) !important;
    }

    /* اسم الطالب يأخذ السطر الأول كاملاً */
    .student-bar > div:first-child {
        flex: 1 1 100% !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
    }

    /* باقي البيانات تتوزع 50% بالتساوي */
    .student-bar > div:not(:first-child) {
        flex: 1 1 calc(50% - 6px) !important;
        min-width: 110px !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        white-space: nowrap !important;
    }

    .student-bar .dots-line {
        min-width: 25px !important;
        flex: 1 !important;
        display: inline-block !important;
    }

    /* ── عناوين الأقسام والدرجات ── */
    .section-title {
        font-size: 0.95rem !important;
        padding: 5px 10px !important;
        border-radius: 6px !important;
        margin-bottom: 8px !important;
        gap: 6px !important;
    }

    .marks-badge {
        font-size: 0.75rem !important;
        padding: 2px 7px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    .sub-section {
        font-size: 0.92rem !important;
        margin-top: 8px !important;
        margin-bottom: 6px !important;
    }

    /* ── صناديق النصوص والقراءة والشعر والاستماع ── */
    .passage-box,
    .poetry-box,
    .listening-box,
    .reading-text,
    .story-box,
    .dialogue-box {
        padding: 9px 11px !important;
        font-size: 0.92rem !important;
        line-height: 1.8 !important;
        border-radius: 8px !important;
        margin-bottom: 8px !important;
        border-width: 1.5px !important;
    }

    .poetry-box {
        font-size: 0.9rem !important;
        line-height: 2 !important;
        padding: 8px 6px !important;
    }

    .listening-box .label {
        font-size: 0.75rem !important;
        padding: 2px 8px !important;
        margin-bottom: 4px !important;
    }

    .ordering-box {
        padding: 9px 12px !important;
        font-size: 1rem !important;
        border-radius: 8px !important;
    }

    /* ── قائمة الأسئلة ── */
    .question-block {
        margin-bottom: 10px !important;
    }

    .q-list {
        padding-inline-start: 0 !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .q-list > li,
    .q-list li {
        font-size: 0.92rem !important;
        line-height: 1.62 !important;
        padding: 6px 8px !important;
        margin-bottom: 6px !important;
        border-radius: 4px !important;
        word-break: break-word !important;
    }

    .q-num {
        margin-inline-end: 4px !important;
    }

    /* ── خطوط الإجابة وحمايتها من التمدد الأفقي ── */
    .answer-line {
        min-width: 45px !important;
        max-width: 100% !important;
        display: inline-block !important;
        vertical-align: baseline !important;
    }

    .answer-block,
    .answer-lines .line,
    .writing-lines .line {
        height: 18px !important;
        margin-top: 4px !important;
        max-width: 100% !important;
    }

    .answer-area {
        min-height: 40px !important;
        padding: 6px 10px !important;
        font-size: 0.92rem !important;
    }

    .rewrite-answer-line {
        font-size: 0.9rem !important;
        min-height: 22px !important;
    }

    /* ── الاختيار من متعدد (يدعم options-box و mcq-options) ── */
    .options-box,
    .mcq-options {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
        gap: 5px 6px !important;
        padding-inline-start: 0 !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        margin-top: 6px !important;
    }

    .options-box span,
    .mcq-options span {
        font-size: 0.85rem !important;
        padding: 5px 6px !important;
        min-width: 0 !important;
        text-align: center !important;
        border-radius: 6px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1.3 !important;
        word-break: break-word !important;
    }

    /* ── صح وخطأ ── */
    .tf-item {
        font-size: 0.9rem !important;
        gap: 6px !important;
        margin-bottom: 5px !important;
        align-items: center !important;
    }

    .tf-box {
        width: 36px !important;
        height: 22px !important;
        font-size: 0.76rem !important;
        border-radius: 4px !important;
        flex-shrink: 0 !important;
    }

    /* ── المقارنات والتصنيف (الرياضيات والدراسات) ── */
    .compare-item {
        font-size: 0.95rem !important;
        padding: 6px 8px !important;
        gap: 8px !important;
    }

    .compare-circle {
        width: 30px !important;
        height: 30px !important;
        font-size: 0.88rem !important;
    }

    .classify-box {
        width: 75px !important;
        height: 26px !important;
        font-size: 0.82rem !important;
    }

    /* ── شبكة أكمل (Fill-in) ── */
    .fill-grid {
        grid-template-columns: 1fr !important;
        gap: 5px !important;
        padding-inline-start: 0 !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    .fill-grid .item {
        font-size: 0.9rem !important;
        padding: 3px 4px !important;
    }

    /* ── الجداول (مثل جدول الإعراب) ── */
    .irab-table,
    table.exam-table {
        font-size: 0.82rem !important;
        width: 100% !important;
    }

    .irab-table th,
    .irab-table td {
        padding: 4px 5px !important;
    }

    .irab-table td {
        height: 28px !important;
    }

    /* ── مساحة التعبير والكتابة ── */
    .writing-box {
        padding: 8px 10px !important;
        border-radius: 8px !important;
    }

    .writing-box .line {
        margin-top: 6px !important;
        height: 16px !important;
    }

    /* ── الفوتر ── */
    .footer {
        margin-top: 10px !important;
        padding-top: 6px !important;
    }

    .footer-title {
        font-size: 0.84rem !important;
        line-height: 1.4 !important;
    }

    .promo-text {
        font-size: 0.78rem !important;
    }
}