/* نظام الاختبارات الإلكترونية - مدرسة الحصن (ح3) */
:root {
    --hs-primary: #0f4c5c;      /* أزرق بترولي داكن */
    --hs-primary-2: #16697a;
    --hs-accent: #c8963e;       /* رملي ذهبي (لون الحصن) */
    --hs-bg: #f4f6f8;
    --hs-card: #ffffff;
    --hs-text: #1f2a33;
    --hs-muted: #6b7a86;
    --hs-border: #e3e8ec;
    --bs-primary: var(--hs-primary);
    --bs-font-sans-serif: "Tajawal", "Segoe UI", Tahoma, sans-serif;
}

body {
    background: var(--hs-bg);
    color: var(--hs-text);
    font-family: "Tajawal", "Segoe UI", Tahoma, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main { flex: 1; }

/* شريط التنقل */
.hs-navbar {
    background: linear-gradient(90deg, var(--hs-primary), var(--hs-primary-2));
    border-bottom: 3px solid var(--hs-accent);
}
.hs-navbar .navbar-brand { font-weight: 800; letter-spacing: .3px; }
.hs-navbar .navbar-brand .badge { background: var(--hs-accent); color: #fff; font-weight: 700; }
.hs-navbar .nav-link { color: rgba(255,255,255,.85) !important; }
.hs-navbar .nav-link:hover, .hs-navbar .nav-link.active { color: #fff !important; }

/* أزرار وألوان أساسية */
.btn-primary { background: var(--hs-primary); border-color: var(--hs-primary); }
.btn-primary:hover, .btn-primary:focus { background: var(--hs-primary-2); border-color: var(--hs-primary-2); }
.btn-accent { background: var(--hs-accent); border-color: var(--hs-accent); color: #fff; }
.btn-accent:hover { background: #b2832f; color: #fff; }
.text-primary { color: var(--hs-primary) !important; }
.text-accent { color: var(--hs-accent) !important; }

/* البطاقات */
.hs-card {
    background: var(--hs-card);
    border: 1px solid var(--hs-border);
    border-radius: 14px;
    box-shadow: 0 2px 10px rgba(15, 76, 92, .05);
}
.hs-card .card-header {
    background: transparent;
    border-bottom: 1px solid var(--hs-border);
    font-weight: 700;
    padding: 1rem 1.25rem;
}
.page-title { font-weight: 800; color: var(--hs-primary); }
.page-title small { font-weight: 400; color: var(--hs-muted); font-size: .95rem; }

/* بطاقات المؤشرات */
.kpi { padding: 1.1rem 1.25rem; border-radius: 14px; background: #fff; border: 1px solid var(--hs-border); height: 100%; }
.kpi .kpi-value { font-size: 1.9rem; font-weight: 800; color: var(--hs-primary); line-height: 1.1; }
.kpi .kpi-label { color: var(--hs-muted); font-size: .9rem; }
.kpi .kpi-icon { font-size: 1.6rem; color: var(--hs-accent); }

/* الجداول */
.table thead th { background: #eef3f5; color: var(--hs-primary); font-weight: 700; white-space: nowrap; }
.table td { vertical-align: middle; }

/* شريط الإتقان */
.mastery-bar { height: 10px; border-radius: 6px; background: #e9eef1; overflow: hidden; min-width: 120px; }
.mastery-bar > span { display: block; height: 100%; border-radius: 6px; }

/* صفحة الدخول */
.login-wrap { min-height: calc(100vh - 140px); display: flex; align-items: center; justify-content: center; }
.login-card { max-width: 420px; width: 100%; }
.login-logo {
    width: 72px; height: 72px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--hs-primary), var(--hs-primary-2)); color: #fff; font-size: 2rem;
    border-bottom: 4px solid var(--hs-accent);
}

/* واجهة الاختبار */
.test-header {
    position: sticky; top: 0; z-index: 1020; background: #fff; border-bottom: 1px solid var(--hs-border);
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.timer {
    font-variant-numeric: tabular-nums; font-weight: 800; font-size: 1.4rem; padding: .3rem .9rem; border-radius: 10px;
    background: #eef3f5; color: var(--hs-primary); direction: ltr; display: inline-block; min-width: 110px; text-align: center;
}
.timer.warn { background: #fff3cd; color: #8a6100; }
.timer.danger { background: #f8d7da; color: #a11c2a; animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .6; } }

.q-card { border-radius: 14px; border: 1px solid var(--hs-border); background: #fff; margin-bottom: 1rem; }
.q-card .q-num {
    width: 36px; height: 36px; border-radius: 10px; background: var(--hs-primary); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0;
}
.q-card .q-skill { font-size: .8rem; color: var(--hs-muted); }
.q-text { font-size: 1.12rem; font-weight: 600; white-space: pre-wrap; }

.opt { display: block; position: relative; margin-bottom: .55rem; cursor: pointer; }
.opt input { position: absolute; opacity: 0; }
.opt .opt-body {
    display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border: 2px solid var(--hs-border);
    border-radius: 12px; transition: all .15s;
}
.opt .opt-letter {
    width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--hs-border); display: inline-flex;
    align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0;
}
.opt:hover .opt-body { border-color: var(--hs-primary-2); background: #f7fbfc; }
.opt input:checked + .opt-body { border-color: var(--hs-primary); background: #e8f2f4; }
.opt input:checked + .opt-body .opt-letter { background: var(--hs-primary); border-color: var(--hs-primary); color: #fff; }
.opt input:focus-visible + .opt-body { outline: 3px solid var(--hs-accent); outline-offset: 2px; }

.q-nav { display: flex; flex-wrap: wrap; gap: .4rem; }
.q-nav button {
    width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--hs-border); background: #fff; font-weight: 700;
}
.q-nav button.answered { background: var(--hs-primary); color: #fff; border-color: var(--hs-primary); }
.q-nav button.current { outline: 3px solid var(--hs-accent); }

/* التقرير */
.score-ring { width: 150px; height: 150px; position: relative; }
.score-ring svg { transform: rotate(-90deg); }
.score-ring .score-text {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.score-ring .score-text b { font-size: 2rem; color: var(--hs-primary); }
.plan-item { border-inline-start: 5px solid; border-radius: 12px; }
.plan-item.border-danger { border-color: #dc3545 !important; }
.plan-item.border-warning { border-color: #ffc107 !important; }
.plan-item.border-success { border-color: #198754 !important; }

/* اختبار الطالب: بطاقات المواد */
.subject-head { border-inline-start: 5px solid var(--hs-accent); padding-inline-start: .75rem; }
.test-tile { transition: transform .15s, box-shadow .15s; }
.test-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(15,76,92,.10); }

footer.hs-footer { color: var(--hs-muted); font-size: .85rem; }

@media print {
    .no-print, .hs-navbar, footer { display: none !important; }
    body { background: #fff; }
    .hs-card { box-shadow: none; border-color: #ccc; }
}

/* اختيار الشعب كأزرار */
.section-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.section-list input { display: none; }
.section-list label {
    margin: 0; padding: .3rem .75rem; border: 1px solid var(--hs-border); border-radius: 999px;
    cursor: pointer; font-size: .85rem; background: #fff; user-select: none;
}
.section-list input:checked + label { background: var(--hs-primary); border-color: var(--hs-primary); color: #fff; }

/* المعادلات والصور في الأسئلة */
.katex { direction: ltr; unicode-bidi: isolate; font-size: 1.08em; }
.katex-display { margin: .4rem 0; overflow-x: auto; overflow-y: hidden; }
.q-img { display: block; max-width: 100%; max-height: 340px; border-radius: 10px; border: 1px solid var(--hs-border);
         margin: .6rem 0; background: #fff; }
.q-img-sm { max-height: 120px; max-width: 220px; border-radius: 8px; border: 1px solid var(--hs-border); }
.math-toolbar .btn { font-family: "Times New Roman", serif; min-width: 38px; }
.preview-box { border: 1px dashed var(--hs-border); border-radius: 12px; padding: 1rem; background: #fcfdfd; min-height: 120px; }

/* النصوص والمواقف */
.passage-card { background: #fffdf7; border: 1px solid #ecdcb8; border-inline-start: 5px solid var(--hs-accent);
                border-radius: 14px; padding: 1rem 1.25rem; margin-bottom: 1rem; }
.passage-head { font-weight: 800; color: var(--hs-primary); margin-bottom: .5rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.passage-hint { font-weight: 400; font-size: .8rem; color: var(--hs-muted); margin-inline-start: auto; }
.passage-body { max-height: 55vh; overflow: auto; font-size: 1.05rem; line-height: 1.9; }
.passage-body p { margin-bottom: .6rem; text-align: start; }
.passage-badge { font-size: .75rem; background: #fbf0cf; color: #7a5a14; border-radius: 999px; padding: .1rem .55rem; }

/* محاذاة تلقائية للأسئلة والخيارات الإنجليزية داخل الصفحة العربية */
.q-card > .d-flex > div { flex: 1; min-width: 0; }
.q-text, .opt-body > span:last-child { text-align: start; }
.opt-body > span:last-child { flex: 1; }

/* النص الطويل: أدوات وعرض جانبي */
.passage-tools { display: inline-flex; gap: .25rem; }
.passage-tools .btn { padding: .05rem .45rem; font-size: .75rem; line-height: 1.4; }
@media (min-width: 992px) {
    #qArea.split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
    #qArea.split > .passage-card { position: sticky; top: 140px; margin: 0; }
    #qArea.split > .passage-card .passage-body { max-height: calc(100vh - 250px); }
    #qArea.split > .q-card { margin: 0; }
    #qArea.split > #pager { grid-column: 1 / -1; }
}

/* ===== English (LTR) mode ===== */
[dir="ltr"] .bi-arrow-right, [dir="ltr"] .bi-arrow-left, [dir="ltr"] .bi-box-arrow-left { display: inline-block; transform: scaleX(-1); }
.lang-toggle { min-width: 56px; }

/* ===== أسئلة التحدث ===== */
.speak-box { border: 2px dashed #c9d6e3; border-radius: 14px; padding: 14px 16px; background: #f8fbfd; }
.speak-box.recording { border-color: #dc3545; background: #fff5f5; }
.speak-box.recording .speak-time { color: #dc3545; animation: speakPulse 1s infinite; }
.speak-hint { font-size: .92rem; color: #475569; }
.speak-time { font-family: Consolas, monospace; font-weight: 700; font-size: 1.05rem; }
@keyframes speakPulse { 50% { opacity: .45; } }
.badge-speak { background: #6f42c1; color: #fff; }

/* ===== المهام الكتابية ===== */
.write-box { border: 2px dashed #d6cfe8; border-radius: 14px; padding: 14px 16px; background: #fbfaff; }
.write-text { min-height: 220px; line-height: 1.9; }
.badge-write { background: #0d6efd; color: #fff; }
.rubric-view summary, .rubric-edit th { font-weight: 700; color: var(--hs-primary); cursor: pointer; }
.w-up { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; margin: 0 6px 6px 0; }
.w-up a { display: flex; flex-direction: column; align-items: center; text-decoration: none; }
.w-up img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; border: 1px solid #ddd; }
.w-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.w-file-img img { width: 150px; max-height: 200px; object-fit: contain; border-radius: 8px; border: 1px solid #ddd; background: #fff; }
.w-file-doc { padding: 6px 10px; border: 1px solid #ddd; border-radius: 8px; background: #fff; text-decoration: none; }
.w-answer { white-space: pre-wrap; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px 14px; line-height: 1.9; max-height: 480px; overflow: auto; }
.rubric-grade td { vertical-align: middle; }