/* EXAMS-ARABIC-DEMO-KIT-1 (27 Oct 2026, WORDS 1168 `go exams-arabic`): the right-to-left layer of the exam app.
 * Linked by resources/views/app.blade.php only when the request's locale is ar (that view also sets <html dir="rtl">).
 * Every rule is scoped to html[dir="rtl"], so an English page is untouched. Rollback: remove the link (and this file). */

/* 1. Teacher / admin layout: the side menu moves to the right, the page makes room on the right. */
html[dir="rtl"] .fixed.top-0.left-0.bg-gray-900.w-60 { left: auto; right: 0; transform-origin: right; }
html[dir="rtl"] .fixed.top-0.left-0.bg-gray-900.w-60.-translate-x-full { --tw-translate-x: 100%; transform: translateX(100%); }
@media (min-width: 768px) {
  html[dir="rtl"] .md\:ml-60 { margin-left: 0; margin-right: 15rem; }
  html[dir="rtl"] .fixed.top-0.left-0.bg-gray-900.w-60.-translate-x-full { --tw-translate-x: 0; transform: none; }
}

/* 2. Physical spacing mirrored (Tailwind ml/mr/pl/pr are left/right, not start/end). */
html[dir="rtl"] .mr-1 { margin-right: 0; margin-left: .25rem; }
html[dir="rtl"] .mr-2 { margin-right: 0; margin-left: .5rem; }
html[dir="rtl"] .mr-3 { margin-right: 0; margin-left: .75rem; }
html[dir="rtl"] .mr-4 { margin-right: 0; margin-left: 1rem; }
html[dir="rtl"] .mr-16 { margin-right: 0; margin-left: 4rem; }
html[dir="rtl"] .ml-1 { margin-left: 0; margin-right: .25rem; }
html[dir="rtl"] .ml-2 { margin-left: 0; margin-right: .5rem; }
html[dir="rtl"] .ml-3 { margin-left: 0; margin-right: .75rem; }
html[dir="rtl"] .ml-4 { margin-left: 0; margin-right: 1rem; }
html[dir="rtl"] .ml-11 { margin-left: 0; margin-right: 2.75rem; }
html[dir="rtl"] .pl-2 { padding-left: 0; padding-right: .5rem; }
html[dir="rtl"] .pr-2 { padding-right: 0; padding-left: .5rem; }
html[dir="rtl"] .pl-3 { padding-left: 0; padding-right: .75rem; }
html[dir="rtl"] .pr-3 { padding-right: 0; padding-left: .75rem; }
html[dir="rtl"] .pl-4 { padding-left: 0; padding-right: 1rem; }
html[dir="rtl"] .pr-4 { padding-right: 0; padding-left: 1rem; }
html[dir="rtl"] .pl-10 { padding-left: 0; padding-right: 2.5rem; }
html[dir="rtl"] .text-left { text-align: right; }
html[dir="rtl"] .text-right { text-align: left; }
html[dir="rtl"] .float-left { float: right; }
html[dir="rtl"] .float-right { float: left; }

/* 3. Arrows point the reading way. */
html[dir="rtl"] .pi.pi-chevron-right, html[dir="rtl"] .pi.pi-chevron-left,
html[dir="rtl"] .pi.pi-angle-right, html[dir="rtl"] .pi.pi-angle-left,
html[dir="rtl"] .pi.pi-arrow-right, html[dir="rtl"] .pi.pi-arrow-left,
html[dir="rtl"] .pi.pi-angle-double-right, html[dir="rtl"] .pi.pi-angle-double-left { display: inline-block; transform: scaleX(-1); }

/* 4. Numbers, clock and dates read left-to-right inside Arabic text ("08:17:51 AM", "27/10/2026"). */
html[dir="rtl"] span.currenttimeIDdata, html[dir="rtl"] span.currentDateIDdata,
html[dir="rtl"] input[type="number"], html[dir="rtl"] .p-inputnumber input { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] input[type="number"], html[dir="rtl"] .p-inputnumber input { text-align: right; }

/* 5. Tables (vue-good-table) and their pager. */
html[dir="rtl"] .vgt-table th, html[dir="rtl"] .vgt-table td { text-align: right; }
html[dir="rtl"] .vgt-wrap__footer .footer__navigation { float: left; }
html[dir="rtl"] .vgt-wrap__footer .footer__row-count { float: right; }
html[dir="rtl"] .vgt-wrap__footer .footer__navigation__page-btn .chevron.left::after { border-right: none; border-left: 6px solid #606266; }
html[dir="rtl"] .vgt-wrap__footer .footer__navigation__page-btn .chevron.right::after { border-left: none; border-right: 6px solid #606266; }

/* 6. Form widgets: the select arrow and the dropdown text on the reading side. */
html[dir="rtl"] .p-dropdown .p-dropdown-label { text-align: right; }
html[dir="rtl"] .vs__selected-options { direction: rtl; }
html[dir="rtl"] .p-selectbutton { direction: rtl; }
html[dir="rtl"] .p-toast { left: 20px; right: auto; }

/* ==== NIGHT-EXAMS-ARABIC-A-1 begin ==== */
/* -- A/G1-quiz-wizard (2 selectors) -- */
/* G1-quiz-wizard (NIGHT-EXAMS-ARABIC-A-1): RTL rules for the quiz list (3106), quiz details (3254) and quiz settings (7402). */

/* 7402 quiz settings: the divider between the two columns is `border-r` on the first column; in RTL that column
   sits on the right, so the line lands on the page's outer edge instead of between the columns. */
html[dir="rtl"] .md\:w-6\/12.w-full.border-r.border-gray-200 { border-right-width: 0; border-left-width: 1px; }

/* 3106 quiz list: the Code column's copy chip (PrimeVue Tag) shows a Latin quiz code; keep it an LTR island so
   a code with '-' or '_' at either end does not flip its punctuation inside the Arabic table. */
html[dir="rtl"] .vgt-table .p-tag.cursor-pointer .p-tag-value { direction: ltr; unicode-bidi: isolate; }
/* -- A/G2-quiz-questions (6 selectors) -- */
/* G2 (NIGHT-EXAMS-ARABIC-A-1): quiz questions step (/admin/quizzes/<id>/questions) and its nine question preview cards.
 * Every rule sits under html[dir="rtl"]; the LTR page is untouched. Base rules mirrored: public/css/app.css (.questionadd, span.labelname, .qunsordno, .seactiontitle). */

/* The "Create Question" type menu (.questionadd, app.css: left:-10px) opens from the link's right edge into the page on RTL. */
html[dir="rtl"] .questionmenucustom .questionadd { left: auto; right: -10px; }

/* Card header: "Question Order" label, the order input and its Save button float right (app.css) and land before the skill chip on RTL; mirror them to the far (left) side. */
html[dir="rtl"] span.labelname { float: left; margin-left: 0; margin-right: 15px; text-align: left; }
html[dir="rtl"] .qunsordno { float: left; }

/* Section name chip on the card (.seactiontitle: margin-left 30px, icon at left:-22px) keeps its gap and icon on the reading side. */
html[dir="rtl"] .seactiontitle { margin-left: 0; margin-right: 30px; }
html[dir="rtl"] .seactiontitle:after { left: auto; right: -22px; }

/* Correct-answer tick in MSA / MMA / TOF option rows ("absolute right-2") sits on the option number circle on RTL; move it to the row's far end. */
html[dir="rtl"] .q-option .absolute.right-2 { right: auto; left: .5rem; }
/* -- A/G3-schedules (22 selectors) -- */
/* NIGHT-EXAMS-ARABIC-A-1 G3 (schedules): RTL rules for the PrimeVue slide-over (Sidebar), the PrimeVue dialog / confirm dialog,
 * the toast, and the date-time picker of the schedule form. Every rule sits under html[dir="rtl"]: an English page is untouched.
 * Vendor facts (read-only): vendor.js module 5098 = Sidebar CSS (.p-sidebar-right{right:0}, enter/leave translateX(100%),
 * .p-sidebar-close{position:absolute;top:0;right:0}); public/css/app.css forces .p-sidebar-close{top:12px!important;right:12px!important}.
 * All 27 Sidebar uses in app.js (14 pages) are position "right" + p-sidebar-md, so rules 1-2 fix every slide-over in the app. */

/* 1. Marc item (i): the slide-over's close X sat on the panel title at the right edge (app.css pins it right:12px !important).
 *    In RTL the title starts at the right, so the X moves to the left edge, same 12px inset. */
html[dir="rtl"] .p-sidebar .p-sidebar-close { right: auto !important; left: 12px !important; }

/* 2. A right-positioned slide-over opens from the left in RTL: mirror the edge and the enter / leave slide. */
html[dir="rtl"] .p-sidebar-right { right: auto; left: 0; }
html[dir="rtl"] .p-sidebar-right.p-sidebar-enter,
html[dir="rtl"] .p-sidebar-right.p-sidebar-leave-to { transform: translateX(-100%); }

/* 3. Same mirror for a left-positioned slide-over (none in the bundle today; the vendor class exists). */
html[dir="rtl"] .p-sidebar-left { left: auto; right: 0; }
html[dir="rtl"] .p-sidebar-left.p-sidebar-enter,
html[dir="rtl"] .p-sidebar-left.p-sidebar-leave-to { transform: translateX(100%); }

/* 4. Dialog header (ConfirmDialog in AdminLayout 3493 and the student quiz / practice screens): the header is flex
 *    space-between and mirrors by itself (title right, X left); only the gap between header icons is physical (margin-right). */
html[dir="rtl"] .p-dialog .p-dialog-header .p-dialog-header-icon { margin-right: 0; margin-left: .5rem; }
html[dir="rtl"] .p-dialog .p-dialog-header .p-dialog-header-icon:last-child { margin-left: 0; }

/* 5. Dialog footer: the Cancel / Delete buttons sat on the start (right) side with their gap on the wrong side (app.css text-align:right). */
html[dir="rtl"] .p-dialog .p-dialog-footer { text-align: left; }
html[dir="rtl"] .p-dialog .p-dialog-footer button { margin: 0 0 0 .5rem; }

/* 6. Confirm dialog: the gap between the info icon and the question was on the far side (margin-left:1rem). */
html[dir="rtl"] .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 0; margin-right: 1rem; }

/* 7. Toasts (Record deleted / Copied): the text gap and the coloured stripe sat on the left; move them to the reading side. */
html[dir="rtl"] .p-toast .p-toast-message .p-toast-message-content .p-toast-message-text { margin: 0 1rem 0 0; }
html[dir="rtl"] .p-toast .p-toast-message .p-toast-message-content,
html[dir="rtl"] .p-toast .p-toast-message.p-toast-message-success,
html[dir="rtl"] .p-toast .p-toast-message.p-toast-message-info,
html[dir="rtl"] .p-toast .p-toast-message.p-toast-message-warn,
html[dir="rtl"] .p-toast .p-toast-message.p-toast-message-error { border-width: 0 6px 0 0; }

/* 8. Schedule form date / time pickers (VueCtkDateTimePicker): the clear (x) button sat at the right over the right-aligned
 *    value; move the button and its 44px room to the left. no-clear-button inputs keep their own 0 12px padding. */
html[dir="rtl"] .date-time-picker .field-input:not(.no-clear-button) { padding-left: 44px; padding-right: 12px; }
html[dir="rtl"] .date-time-picker .field-clear-button { right: auto; left: 12px; }

/* 9. The picker pop-up is forced to English (locale "en" in the form), so it stays an LTR island: month arrows, weekday
 *    order and the hour / minute columns read as in English; it opens under the field's right edge. */
html[dir="rtl"] .date-time-picker .datetimepicker .datepicker { direction: ltr; left: auto; right: 0; }

/* 10. Multi-select (vue-select, user groups / students): the clear and caret icons' padding mirrored (app.css 4px 6px 0 3px). */
html[dir="rtl"] .v-select:not([dir]) .vs__actions { padding: 4px 3px 0 6px; }
/* -- A/G4-question-wizard (8 selectors) -- */
/* G4 question wizard + HorizontalStepper (module 492, both wizards) + Attachment step (module 4075). Arabic only: every rule under html[dir="rtl"]. */

/* G4-1 Step bar (492, desktop): the ul is `flex justify-end gap-8`; mirrored in RTL the steps huddled at the LEFT end (4 3 2 1 from the left
   edge). Start them at the right edge, so step 1 sits at the right edge and the steps run 1 -> 4 right to left. */
html[dir="rtl"] .xl\:w-full.xl\:mx-0.h-12 > ul.flex.justify-end.gap-8 { justify-content: flex-start; direction: rtl; }

/* G4-2 Step bar (492): each tab is `flex items-center px-8` = [number circle][label.ml-2]; pin the row right-to-left so the number
   circle precedes (is right of) its label, whatever a parent sets; the label's gap goes on the number's side (ml-2 is physical). */
html[dir="rtl"] .xl\:w-full.xl\:mx-0.h-12 > ul.flex.justify-end.gap-8 > li .flex.items-center.px-8.mb-2 { flex-direction: row; direction: rtl; }
html[dir="rtl"] .xl\:w-full.xl\:mx-0.h-12 > ul.flex.justify-end.gap-8 > li .flex.items-center.px-8.mb-2 > span.ml-2 { margin-left: 0; margin-right: .5rem; }

/* G4-3 Step bar (492, phone "Go To" button): the arrow segment is `rounded-r`, which in RTL is the inner edge; round its outer (left) edge. */
html[dir="rtl"] .sm\:hidden.relative.w-full.mx-auto.rounded button > span.py-3.rounded-r { border-radius: .25rem 0 0 .25rem; }

/* G4-4 Attachment step (4075): app.css pushes the Confirm / Confirm Audio button of the upload boxes with margin-left: 45% (under the
   Browse box, the label being 45% wide); in RTL the Browse box sits on the left, so the push goes to the right side. */
html[dir="rtl"] .videouModal button.p-button-label.p-button.p-component,
html[dir="rtl"] .audiouModal button.p-button-label.p-button.p-component { margin-left: 0; margin-right: 45%; }

/* G4-5 Attachment step (4075): the video / audio link fields hold a URL or a video id: an LTR island, so "https://..." and its
   punctuation do not jump around while typing. */
html[dir="rtl"] input#video_link, html[dir="rtl"] input#audio_link { direction: ltr; text-align: left; }
/* -- A/G5-bank-students (3 selectors) -- */
/* G5-bank-students (NIGHT-EXAMS-ARABIC-A-1): extra RTL rules for the question bank, comprehensions, import questions,
   question types and the teacher's students list. Every rule is under html[dir="rtl"]; nothing changes the LTR page. */

/* Row actions (edit / delete / analytics) in the tables: PrimeFlex .p-mr-2 is margin-right !important, so in RTL the gap sits
   on the outer edge and the two round buttons touch. Modules 4594, 984 (Button staticClass "p-button-rounded ... p-mr-2"). */
html[dir="rtl"] .vgt-table .p-button.p-button-rounded.p-mr-2 { margin-right: 0 !important; margin-left: .5rem !important; }

/* Code chips with the copy icon (Tag staticClass "w-full p-mr-2 text-sm cursor-pointer" / "w-28 p-mr-2 text-sm cursor-pointer"):
   the icon's margin-right glues the icon to the code text once the chip is mirrored. Modules 4594, 984, 3668, 9526, 8283. */
html[dir="rtl"] .p-mr-2.cursor-pointer .p-tag-icon { margin-right: 0; margin-left: .25rem; }

/* The question code inside the chip is a Latin code: keep it one LTR island so a trailing digit or dash does not jump. */
html[dir="rtl"] .p-mr-2.cursor-pointer .p-tag-value { direction: ltr; unicode-bidi: isolate; }
/* -- A/G6-header-logo (12 selectors) -- */
/* G6-header-logo (NIGHT-EXAMS-ARABIC-A-1): teacher / admin header and side menu, module 3493. Every rule is under html[dir="rtl"]. */

/* Side menu: the dropdown's sub-items were indented on the left (pl-12) and squeezed on the right; the indent moves to the reading side. */
html[dir="rtl"] nav[aria-label="Main Navigation"] .pl-12.pr-4 { padding-left: 1rem; padding-right: 3rem; }

/* Side menu: a closed dropdown's chevron pointed right (away from its items); it points left while closed. Open (rotate-90) is unchanged. */
html[dir="rtl"] nav[aria-label="Main Navigation"] svg.ml-2.transform:not(.rotate-90) { transform: scaleX(-1); }

/* Header language switch: title, flag and caret were laid out left to right (app.css .lngclsd: text-align left, title float left, caret at right). */
html[dir="rtl"] .languagecls .lngclsd { text-align: right; }
html[dir="rtl"] .languagecls .lngclsd span.langtitle { float: right; }
html[dir="rtl"] .languagecls .lngclsd img.object-cover { margin-left: 0; margin-right: 5px; }
html[dir="rtl"] .languagecls .lngclsd:after { right: auto; left: 10px; }

/* Header clock: the Arabic AM / PM mark (ص / م) printed on the right of the time under the demo sheet's direction:ltr; it reads after the time. The digits stay one LTR run. */
html[dir="rtl"] .tmBox span.currenttimeIDdata { direction: rtl; }

/* Header clock icons: the gap sat on the wrong side of the calendar / clock icons (same values as the app's own arabicapp.css, which loads only after an Inertia visit). */
html[dir="rtl"] .tmBox .pi-calendar:before { margin: 0 0 0 5px; }
html[dir="rtl"] .tmBox .pi-clock:before { margin: 0 5px 0 15px; }

/* Header dropdown panels (language, currency, apps, notifications, profile): aligned to the trigger's right edge, they ran off the left edge of the screen, where the header's icons sit in RTL. */
html[dir="rtl"] .languagecls .right-0.w-48,
html[dir="rtl"] .notificationlistd .right-0.w-48,
html[dir="rtl"] .profileimg .right-0.w-48 { right: auto; left: 0; transform-origin: top left; }
/* -- A/G7-results-practice (5 selectors) -- */
/* G7 (results + practice sets): RTL rules. Every rule sits under html[dir="rtl"]; the LTR page is untouched. */

/* Fault: Quiz/SessionResults and the score tables - the value cells carry text-right, which in RTL glues the
   number to the label cell instead of the far edge. Scope: the emerald report tables only. */
html[dir="rtl"] td.border-emerald-500.text-right {
    text-align: left;
}

/* Fault: Quiz/SessionResults status / accuracy / speed cards - the green accent bar is pinned with left-0,
   so in RTL it sits at the end of the card instead of its start. */
html[dir="rtl"] .absolute.w-2.h-4.bg-green-700.left-0 {
    left: auto;
    right: 0;
}

/* Fault: SessionResults (answers) - the question panel draws its divider with sm:border-l and md:pl-6,
   so in RTL the line and the gap sit on the wrong side of the panel. */
@media (min-width: 640px) {
    html[dir="rtl"] .lg\:w-2\/3.sm\:border-l.border-gray-200 {
        border-left-width: 0;
        border-right-width: 1px;
    }
}
@media (min-width: 768px) {
    html[dir="rtl"] .lg\:w-2\/3.sm\:border-l.border-gray-200 {
        padding-left: 0;
        padding-right: 1.5rem;
    }
    html[dir="rtl"] .lg\:w-1\/3.md\:pr-6 {
        padding-right: 0;
        padding-left: 1.5rem;
    }
}
/* -- A/A0 (2 selectors) -- */
/* ArcDropdown (module 2469, e.g. the bank's "New Question" menu): a menu anchored to the button's right edge opens leftwards and can run off a narrow screen in RTL; anchor it to the left edge instead (and the mirror case) */
html[dir="rtl"] .origin-top-right.right-0 { right: auto; left: 0; transform-origin: top left; }
html[dir="rtl"] .origin-top-left.left-0 { left: auto; right: 0; transform-origin: top right; }
/* ==== NIGHT-EXAMS-ARABIC-A-1 end ==== */

/* ==== NIGHT-EXAMS-ARABIC-B-1 begin ==== */
/* -- B/B (83 selectors) -- */
/* ==== NIGHT-EXAMS-ARABIC-B-1 student pages: begin ==== */
/* -- sitting -- */
/* NIGHT-EXAMS-ARABIC-B-1 · group sitting (User/QuizScreen + QuizLayout + the question widgets, QuizInstructions,
 * QuizScheduleInstructions, QuizThanksScreen). Every rule is under html[dir="rtl"]: an English page is untouched.
 * Needs the spec's QuizLayout change (the sitting no longer strips dir from <html>); without it none of these apply. */

/* S1. Mobile palette drawer (QuizLayout ref "mobileNav"): its hidden state is the inline transform translateX(-320px).
 * In RTL the drawer is anchored at the right edge, so -320px leaves it ON screen over the question. Hidden = push it off
 * to the right. The open state (inline translateX(0px)) does not match this selector and is left alone. */
html[dir="rtl"] .w-80.h-full.z-40.absolute.bg-gray-50[style*="translateX(-320px)"] { transform: translateX(320px) !important; }

/* S2. (scoped to the sitting drawer: PracticeLayout 1868 reuses these ids with another drawer) The drawer's open tab (#openSideBar: right-0 -mr-10 rounded-tr rounded-br) hangs outside the drawer's LEFT edge in RTL. */
html[dir="rtl"] .w-80.h-full.z-40.absolute.bg-gray-50 #openSideBar { right: auto; left: 0; margin-right: 0; margin-left: -2.5rem; border-radius: .25rem 0 0 .25rem; }

/* S3. Its label "Check questions or finish" (app.css .examfinish: absolute, left 17%) must run into the page = leftwards. */
html[dir="rtl"] .w-80.h-full.z-40.absolute.bg-gray-50 #openSideBar .examfinish { left: auto; right: 17%; }

/* S4. The drawer's close button (#closeSideBar: right-0) goes to the drawer's top-left corner (the demo sheet mirrors mr-4). */
html[dir="rtl"] .w-80.h-full.z-40.absolute.bg-gray-50 #closeSideBar { right: auto; left: 0; }

/* S5. Desktop question palette column (w-96 sm:relative border-l): in RTL it sits on the LEFT of the question, so its
 * divider lines (the column, the palette scroller, the actions / legend / finish bars, all border-l) move to its right edge. */
html[dir="rtl"] .w-96.sm\:relative.border-l,
html[dir="rtl"] .w-96.sm\:relative .border-l { border-left-width: 0; border-right-width: 1px; }

/* S6. Exam clock (header h4.hidecountquestion > timer slot span): hh:mm:ss stays a left-to-right island in Arabic. */
html[dir="rtl"] .hidecountquestion > span { direction: ltr; unicode-bidi: isolate; }

/* S7. Audio / video / passage column beside the question (sm:w-1/3 sm:border-r): it is the right-hand column in RTL,
 * so its divider is on its left (pr-4 is already mirrored by the demo sheet). */
@media (min-width: 640px) {
  html[dir="rtl"] .sm\:w-1\/3.sm\:border-r { border-right-width: 0; border-left-width: 1px; }
}

/* S8. Choice, match and order rows (MSA / TOF / MMA / MTF / ORD; app.css .q-option label: text-align left, padding
 * 10/70/10/30, number badge span.o-id pinned left:25px, text margin-left 50px, drag handle span.o-bars right:25px):
 * mirrored, so the number is at the right, the text starts after it and the drag handle is at the left. */
html[dir="rtl"] .q-radio .q-options .q-option label { text-align: right; padding: 10px 30px 10px 70px; }
html[dir="rtl"] .q-radio .q-options .q-option span.o-id { left: auto; right: 25px; }
html[dir="rtl"] .q-radio .q-options .q-option label span.o-text { margin-left: 0; margin-right: 50px; }
html[dir="rtl"] .q-radio .q-options .q-option span.o-bars { right: auto; left: 25px; }

/* S9. Blank and short-answer boxes (FIB / SAQ; app.css .q-input .i-id: badge with border-right, input padding-left 5rem):
 * in RTL the badge sits at the right edge with its border on its left, and the room kept for it moves to the right. */
html[dir="rtl"] .q-inputs .q-input .i-id { right: 0; border-right-width: 0; border-left-width: 1px; }
html[dir="rtl"] .q-inputs .q-input input { padding-left: .75rem; padding-right: 5rem; }

/* S10. Typed answers (FIB / SAQ inputs, LAQ textarea): each line takes its direction from its first letter, so an
 * English answer reads left-to-right with its punctuation in place and an Arabic one right-to-left. CSS only: no dir
 * attribute, the value sent to the server is unchanged. */
html[dir="rtl"] .q-inputs .q-input input,
html[dir="rtl"] .q-textareasaq textarea { unicode-bidi: plaintext; text-align: start; }

/* S11. Finish confirm dialog (PrimeVue ConfirmDialog; app.css: message margin-left 1rem, footer text-align right,
 * buttons margin-right .5rem): the icon gap and the buttons mirror (buttons at the end = left in RTL). */
html[dir="rtl"] .p-dialog.p-confirm-dialog .p-confirm-dialog-message { margin-left: 0; margin-right: 1rem; }
html[dir="rtl"] .p-dialog.p-confirm-dialog .p-dialog-footer { text-align: left; }
html[dir="rtl"] .p-dialog.p-confirm-dialog .p-dialog-footer button { margin: 0 0 0 .5rem; }

/* S12. "Save & Next" / "Previous" arrows (NextButton 823 / PrevButton 4340 draw inline svg paths, not PrimeIcons, so the
 * demo sheet's .pi rule misses them): the arrow points the reading way. Matched by the exact path, nothing else flips. */
html[dir="rtl"] svg path[d="M14 5l7 7m0 0l-7 7m7-7H3"],
html[dir="rtl"] svg path[d="M10 19l-7-7m0 0l7-7m-7 7h18"] { transform: scaleX(-1); transform-box: fill-box; transform-origin: center; }

/* S13. Instructions pages (QuizInstructions / QuizScheduleInstructions): the details column (lg:w-2/3 md:pr-6
 * sm:border-r) has its divider and gap on the left in RTL, the start column (lg:w-1/3 md:pl-6) its gap on the right. */
@media (min-width: 640px) {
  html[dir="rtl"] .lg\:w-2\/3.sm\:border-r { border-right-width: 0; border-left-width: 1px; }
}
@media (min-width: 768px) {
  html[dir="rtl"] .lg\:w-2\/3.md\:pr-6 { padding-right: 0; padding-left: 1.5rem; }
  html[dir="rtl"] .lg\:w-1\/3.md\:pl-6 { padding-left: 0; padding-right: 1.5rem; }
}

/* S14. Thanks screen result tiles (sm:ml-11 inside the green card): the gap between tiles is on the right in RTL. */
@media (min-width: 640px) {
  html[dir="rtl"] .bg-gradient-to-tl .sm\:ml-11 { margin-left: 0; margin-right: 2.75rem; }
}

/* -- lists -- */
/* NIGHT-EXAMS-ARABIC-B-1, group "lists" (student layout 514, dashboard, quiz lists, results, notifications).
 * Every rule is under html[dir="rtl"]; the English page is untouched. The demo sheet already mirrors ml/mr/pl/pr-1..4,
 * text-left/right, floats, pi chevrons, vgt cells + pager, toast side and isolates the header clock / date. */

/* 514 header: the language switch (title floated left, flag margin-left, chevron at right:0) reads left-to-right. */
html[dir="rtl"] .studentheader .lngclsd { text-align: right; }
html[dir="rtl"] .studentheader .lngclsd span.langtitle { float: right; }
html[dir="rtl"] .studentheader .lngclsd img.object-cover { margin-left: 0; margin-right: 5px; }
html[dir="rtl"] .studentheader .lngclsd:after { right: auto; left: 0; }

/* 514 header clock box: the calendar / clock icon gaps sit on the wrong side once the row runs right-to-left
   (the clock icon is scaleX(-1) in app.css, so its logical margins are swapped back here). */
html[dir="rtl"] .studentheader .tmBox .pi-calendar:before,
html[dir="rtl"] .tmBox.mobileviewstudent .pi-calendar:before { margin: 0 0 0 5px; }
html[dir="rtl"] .studentheader .tmBox .pi-clock:before,
html[dir="rtl"] .tmBox.mobileviewstudent .pi-clock:before { margin: 0 5px 0 15px; }

/* 514 bell panel: "See All" link, the unread dot, the date line and the item picture are pinned to the LTR sides. */
html[dir="rtl"] .studentheader .notiInma .xbi_new a { float: left; }
html[dir="rtl"] .studentheader .notiInma ._dot_neimi { right: auto; left: 0; float: left; }
html[dir="rtl"] .studentheader .notiInma .neimi { float: left; }
html[dir="rtl"] .studentheader .notiInma .img_notifi { float: right; }
/* the bell's date comes from the server as "27-10-2026 07:54:12 AM" (HomeController getnotification): keep it one LTR island */
html[dir="rtl"] .studentheader .notiInma .neimi a { direction: ltr; unicode-bidi: isolate; }

/* 6399 My Notification page: text block, picture and the date chip are floated to the LTR sides. */
html[dir="rtl"] .main_notification .main_textimg a { float: right; }
html[dir="rtl"] .main_notification .main_textimg a img { float: right; margin-right: 0; margin-left: 10px; }
html[dir="rtl"] .main_notification .main_textimg span.dat_colr { float: left !important; margin-left: 0; margin-right: 5px; direction: ltr; unicode-bidi: isolate; }

/* 3898 / 8166 / 8167 Homework / Assessment / Exam tabs: icon floated left, title + count block floated right. */
html[dir="rtl"] .tabdesignass a img.tabimg { float: right; }
html[dir="rtl"] .tabdesignass .righttab { float: left; }
html[dir="rtl"] .tabdesignass a span.tabtitle { float: left !important; }
html[dir="rtl"] .tabdesignass .righttab span.nocount { text-align: left; }

/* 3898 / 4323 / 3586 / 5285 "Upcoming ..." heading: the yellow ping dot sits at the heading's start instead of its end. */
html[dir="rtl"] .relative.inline-flex > .flex.absolute.h-3.w-3.top-4.\-right-1 { right: auto; left: -0.25rem; }

/* 8160 / 8166 / 8167 "Filter by session year" menu: opens from the left edge (left:-10px) and the year range
   "2025 - 2026(...)" is reversed to "2026 - 2025" by the bidi algorithm (glossary rule 4: a year range is an LTR island). */
html[dir="rtl"] .newWidthi .questionadd { left: auto; right: -10px; }
html[dir="rtl"] .newWidthi .questionadd a { direction: ltr; unicode-bidi: isolate; }

/* vgt table cells on the result lists: server dates "Oct 27, 2026" / "Tue, Oct 27, 2026 7:00 AM" break into
   reordered pieces in an RTL cell; plaintext gives each cell the direction of its own first letter (an Arabic
   title stays RTL, an English date or "8/10" stays LTR). */
html[dir="rtl"] .vgt-table td > span { unicode-bidi: plaintext; }

/* 2799 schedule card: the start / end lines are English server dates (toDayDateTimeString) - same reordering;
   the timezone line (Arabic label) keeps RTL because plaintext follows its first letter. */
html[dir="rtl"] .bg-yellow-50 p.font-mono.leading-none { unicode-bidi: plaintext; }

/* 597 results: the green accent bar of each summary card is pinned left:0. */
html[dir="rtl"] .absolute.w-2.h-4.bg-green-700.left-0 { left: auto; right: 0; }

/* 597 results, solutions block: question chips column has md:pr-6, the question column md:pl-6 + sm:border-l,
   so the divider and the gutter end up on the outer side in RTL. */
@media (min-width: 640px) {
  html[dir="rtl"] .lg\:w-2\/3.md\:pl-6.sm\:border-l { border-left-width: 0; border-right-width: 1px; }
}
@media (min-width: 768px) {
  html[dir="rtl"] .lg\:w-1\/3.md\:pr-6 { padding-right: 0; padding-left: 1.5rem; }
  html[dir="rtl"] .lg\:w-2\/3.md\:pl-6.sm\:border-l { padding-left: 0; padding-right: 1.5rem; }
}

/* -- practice -- */
/* NIGHT-EXAMS-ARABIC-B-1, group practice: right-to-left rules the demo sheet (exams-rtl-demo.css) does not have.
 * Every selector starts with html[dir="rtl"], so an English page is untouched. */

/* P1. PracticeScreen (1868) mobile side panel: in RTL the panel sits on the right and the JS now hides it with
 * translateX(+320px), so the "open" tab must stick out on its LEFT edge (LTR: right-0 -mr-10, rounded on the right). */
html[dir="rtl"] .w-80.fixed > #openSideBar { right: auto; left: 0; margin-right: 0; margin-left: -2.5rem; border-radius: .25rem 0 0 .25rem; }
/* P2. ...and the "close" button moves to the panel's left corner (the demo sheet already turns its mr-4 into margin-left). */
html[dir="rtl"] .w-80.fixed > #closeSideBar { right: auto; left: 0; }

/* P3. PracticeScreen side-panel footer: previous/next page arrows (circle-arrow SVGs) point the reading way. */
html[dir="rtl"] ul.h-16.justify-between.bg-gray-800 > li.cursor-pointer > svg.w-8.h-8 { transform: scaleX(-1); }

/* P4. (none) The Previous / Next button arrows (4340 / 823) are flipped by the sitting group's S12 (by svg path);
 * a second flip here would turn them back, so practice adds no rule for them. */

/* P5. LivePractice (9323) + PracticeDashboard (2947): the pulsing "live" dot sits after the heading, i.e. on its left in RTL. */
html[dir="rtl"] .relative.inline-flex > .absolute.top-4.-right-1 { right: auto; left: -.25rem; }

/* P6. PracticeAnalysis (2320) solutions block: question chips column on the right, divider + gap on the question side. */
@media (min-width: 640px) {
  html[dir="rtl"] .card-body.flex-wrap > .sm\:border-l { border-left-width: 0; border-right-width: 1px; }
}
@media (min-width: 768px) {
  html[dir="rtl"] .card-body.flex-wrap > .md\:pl-6 { padding-left: 0; padding-right: 1.5rem; }
  html[dir="rtl"] .card-body.flex-wrap > .md\:pr-6 { padding-right: 0; padding-left: 1.5rem; }
}

/* P7. Choice / match / order options (q-options, app.css: o-id absolute left:25px, text margin-left:50px, label
 * text-align:left, padding 10px 70px 10px 30px, drag bars right:25px). Same widget classes in the sitting (4774) and
 * the solution cards: mirror them. */
html[dir="rtl"] .q-options .q-option label { text-align: right; padding: 10px 30px 10px 70px; }
html[dir="rtl"] .q-options .q-option span.o-id { left: auto; right: 25px; margin-right: 0; }
html[dir="rtl"] .q-options .q-option label span.o-text { margin-left: 0; margin-right: 50px; }
html[dir="rtl"] .q-options .q-option span.o-bars { right: auto; left: 25px; }
/* P8. The green/red result ribbon of an answered option: app.css writes it with CSS content "Correct" / "Wrong" (English,
 * not reachable by __()) at the top-right corner, over the option number in RTL. Arabic words + top-left corner. */
html[dir="rtl"] .q-options .q-option label.correct:after,
html[dir="rtl"] .q-options .q-option label.wrong:after { right: auto; left: 0; }
html[dir="rtl"] .q-options .q-option label.correct:after { content: "صحيحة"; }
html[dir="rtl"] .q-options .q-option label.wrong:after { content: "خاطئة"; }

/* P9. Fill-the-blank / short-answer boxes (q-inputs): the number tab sits on the right, its divider faces the text,
 * the input's 5rem gap moves to the right, and the result ribbon (English CSS content) moves left in Arabic. */
html[dir="rtl"] .q-inputs .q-input .i-id { right: 0; border-right-width: 0; border-left-width: 1px; }
html[dir="rtl"] .q-inputs .q-input input { padding-left: .75rem; padding-right: 5rem; }
html[dir="rtl"] .q-inputs .correct:after,
html[dir="rtl"] .q-inputs .wrong:after { right: auto; left: 0; border-top-right-radius: 0; border-top-left-radius: .25rem; }
html[dir="rtl"] .q-inputs .correct:after { content: "صحيحة"; }
html[dir="rtl"] .q-inputs .wrong:after { content: "خاطئة"; }

/* -- account -- */
/* NIGHT-EXAMS-ARABIC-B-1, group account: right-to-left rules the demo sheet (exams-rtl-demo.css) does not have.
 * Every selector starts with html[dir="rtl"], so an English page is untouched. The demo sheet already mirrors ml-2 / ml-4 /
 * mr-3 / text-right, which covers the login "Remember me" gap, the 2FA and confirm-password button gaps and the modal footers. */

/* A1. AuthLayout (7553): the hero caption over the login picture is pinned bottom-LEFT (absolute bottom-10 left-10);
 * in Arabic it belongs bottom-right and right-aligned. */
html[dir="rtl"] .auth-wrap .absolute.bottom-10.left-10 { left: auto; right: 2.5rem; text-align: right; }

/* A2. Login / register / forgot / reset (7553 form side) and the profile form (3483): an e-mail address, a user name
 * (national id / iqama number) and a 2FA code are Latin or digits; typed into a right-to-left box their "@" / "." /
 * order jump around. Keep the field LTR, aligned to the reading side (glossary 6.4: e-mails and codes are LTR islands). */
html[dir="rtl"] input[type="email"],
html[dir="rtl"] .auth-wrap ~ div input#email,
html[dir="rtl"] .auth-wrap ~ div input#user_name,
html[dir="rtl"] .sm\:max-w-md input#code,
html[dir="rtl"] .sm\:max-w-md input#recovery_code { direction: ltr; text-align: right; }

/* A3. The Jet / Arc buttons (9881 ArcButton, 7414 SecondaryButton, 9584 DangerButton: "uppercase tracking-widest")
 * space every letter 0.1em apart: Arabic letters then stop joining ("ت س ج ي ل"). No letter-spacing in Arabic. */
html[dir="rtl"] .tracking-widest,
html[dir="rtl"] .tracking-wider { letter-spacing: 0; }
/* ==== NIGHT-EXAMS-ARABIC-B-1 student pages: end ==== */
/* ==== NIGHT-EXAMS-ARABIC-B-1 end ==== */

/* ==== NIGHT-EXAMS-ARABIC-C-1 begin ==== */
/* -- C/C (1 selectors) -- */
/* -- C/G1-taxonomy -- */
/* G1-taxonomy (NIGHT-EXAMS-ARABIC-C-1): the label next to a checkbox in the "Map Sections" slide-over (module 6254, SectionMapForm:
   div.p-field-checkbox > label.ml-2) keeps its margin on the left, so in RTL it touches the checkbox and leaves a gap on the far side. */
html[dir="rtl"] .p-field-checkbox > label.ml-2 { margin-left: 0; margin-right: .5rem; }
/* ==== NIGHT-EXAMS-ARABIC-C-1 end ==== */