html[dir="rtl"] .page-content {
    margin-left: 0;
    margin-right: var(--size-side-left, 250px);
}

html[dir="rtl"] .sidebar-container.collapsed~.page-content {
    margin-right: var(--scaled-80, 80px);
}


html[dir="rtl"] .text-left {
    text-align: right !important;
}

html[dir="rtl"] .text-right {
    text-align: left !important;
}

html[dir="rtl"] .border-l-2 {
    border-left-width: 0 !important;
    border-right-width: 2px !important;
}

html[dir="rtl"] .border-l {
    border-left-width: 0 !important;
    border-right-width: 1px !important;
}

html[dir="rtl"] .border-l-4 {
    border-left-width: 0 !important;
    border-right-width: 4px !important;
}

html[dir="rtl"],
html[dir="rtl"] body,
html[dir="rtl"] * {
    font-family: 'Cairo', sans-serif;
}


/* Ensure Material Symbols icons always use the correct font, even in RTL */

html[dir="rtl"] .material-symbols-outlined,
html[dir="rtl"] .material-symbols-outlined *,
html[dir="rtl"] i.material-symbols-outlined,
html[dir="rtl"] span.material-symbols-outlined {
    font-family: 'Material Symbols Outlined' !important;
    direction: ltr;
    font-feature-settings: 'liga' !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}
/* Prevent ONLY check_circle from mirroring in RTL */
html[dir="rtl"] .material-symbols-outlined.check-circle-icon {
    direction: ltr;
    unicode-bidi: bidi-override !important;
    transform: none !important;
    scale: 1 !important;
}

/* Ensure FontAwesome icons always use the correct font, even in RTL */

html[dir="rtl"] .fa,
html[dir="rtl"] .fas,
html[dir="rtl"] .fa-solid,
html[dir="rtl"] i[class*="fa-"],
html[dir="rtl"] i[class^="fas"],
html[dir="rtl"] i[class^="fa-"]:not([class*="fa-brands"]):not([class*="fa-regular"]) {
    font-family: "Font Awesome 6 Free" !important;
    direction: ltr !important;
    font-weight: 900 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: auto !important;
    font-style: normal !important;
    font-variant: normal !important;
    line-height: 1 !important;
}

html[dir="rtl"] .far,
html[dir="rtl"] .fa-regular,
html[dir="rtl"] i[class^="far"] {
    font-family: "Font Awesome 6 Free" !important;
    direction: ltr !important;
    font-weight: 400 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: auto !important;
    font-style: normal !important;
    font-variant: normal !important;
    line-height: 1 !important;
}

html[dir="rtl"] .fab,
html[dir="rtl"] .fa-brands,
html[dir="rtl"] i[class^="fab"],
html[dir="rtl"] i[class*="fa-brands"] {
    font-family: "Font Awesome 6 Brands" !important;
    direction: ltr !important;
    font-weight: 400 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: auto !important;
    font-style: normal !important;
    font-variant: normal !important;
    line-height: 1 !important;
}

/* Tailwind "space-x-*" sets --tw-space-x-reverse on the *children*.
   Flip it in RTL so existing templates keep correct icon/text spacing. */
html[dir="rtl"] .space-x-1 > :not([hidden]) ~ :not([hidden]),
html[dir="rtl"] .space-x-2 > :not([hidden]) ~ :not([hidden]),
html[dir="rtl"] .space-x-3 > :not([hidden]) ~ :not([hidden]),
html[dir="rtl"] .space-x-4 > :not([hidden]) ~ :not([hidden]),
html[dir="rtl"] .space-x-5 > :not([hidden]) ~ :not([hidden]),
html[dir="rtl"] .space-x-6 > :not([hidden]) ~ :not([hidden]),
html[dir="rtl"] .space-x-8 > :not([hidden]) ~ :not([hidden]),
html[dir="rtl"] .space-x-10 > :not([hidden]) ~ :not([hidden]),
html[dir="rtl"] .space-x-12 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 1 !important;
}

/* Back navigation chevrons point forward in RTL */
html[dir="rtl"] .back-to-list-btn svg,
html[dir="rtl"] .builder-back-btn svg {
    transform: rotate(180deg);
}

/* Common inline icon spacing helpers (FontAwesome in templates often uses mr-*). */
html[dir="rtl"] i.mr-1 { margin-right: 0 !important; margin-left: 0.25rem !important; }
html[dir="rtl"] i.mr-2 { margin-right: 0 !important; margin-left: 0.5rem !important; }
html[dir="rtl"] i.mr-3 { margin-right: 0 !important; margin-left: 0.75rem !important; }
html[dir="rtl"] i.mr-4 { margin-right: 0 !important; margin-left: 1rem !important; }

/* Inline SVGs (calendar, cards) */
html[dir="rtl"] svg.mr-1 { margin-right: 0 !important; margin-left: 0.25rem !important; }
html[dir="rtl"] svg.mr-2 { margin-right: 0 !important; margin-left: 0.5rem !important; }
html[dir="rtl"] svg.mr-3 { margin-right: 0 !important; margin-left: 0.75rem !important; }
html[dir="rtl"] svg.mr-4 { margin-right: 0 !important; margin-left: 1rem !important; }

html[dir="rtl"] .material-symbols-outlined.mr-1,
html[dir="rtl"] .material-symbols-outlined.mr-2,
html[dir="rtl"] .material-symbols-outlined.mr-3 {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}

html[dir="rtl"] .material-symbols-outlined.mr-1 { margin-left: 0.25rem !important; }
html[dir="rtl"] .material-symbols-outlined.mr-3 { margin-left: 0.75rem !important; }

/* Stat / icon rows: icon + .ml-4 text block */
html[dir="rtl"] .flex.items-center > .ml-4 {
    margin-left: 0 !important;
    margin-right: 1rem !important;
}

html[dir="rtl"] .flex.items-center > .ml-5 {
    margin-left: 0 !important;
    margin-right: 1.25rem !important;
}

/* Content review dashboard stat cards — keep icons on the left, no mirroring */
.review-page .review-stat-card {
    direction: ltr;
}

html[dir="rtl"] .review-page .review-stat-card-body {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .review-page .review-stat-icon {
    direction: ltr;
    unicode-bidi: isolate;
}

html[dir="rtl"] .review-page .review-stat-icon .material-symbols-outlined {
    font-family: "Material Symbols Outlined" !important;
    direction: ltr;
    transform: none !important;
    scale: 1 !important;
    font-feature-settings: "liga" !important;
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* Organization calendar: mirror 7-column grid (week flows RTL) */
html[dir="rtl"] .calendar-grid {
    direction: rtl;
}

html[dir="rtl"] .calendar-grid > .grid.grid-cols-7 {
    direction: rtl;
}

html[dir="rtl"] .calendar-day > .flex-shrink-0.mb-1 {
    text-align: end;
}

html[dir="rtl"] .calendar-day .day-counter {
    right: auto !important;
    left: 0.25rem !important;
}

/* Calendar nav chevrons: point correctly when month controls swap sides */
html[dir="rtl"] .calendar-month-nav svg {
    transform: scaleX(-1);
}

/* Toasts injected from calendar page scripts */
html[dir="rtl"] .org-calendar-toast {
    right: auto !important;
    left: 1rem !important;
}

html[dir="rtl"] .org-calendar-toast.translate-x-full {
    transform: translateX(-100%) !important;
}

/* All Events search: icon on logical start side */
html[dir="rtl"] .calendar-event-search {
    padding-left: 1rem !important;
    padding-right: 2.5rem !important;
}

html[dir="rtl"] .calendar-event-search-icon {
    left: auto !important;
    right: 0.75rem !important;
}

/* Native date / datetime in filters: show mm/dd/yyyy aligned to the right in RTL */
html[dir="rtl"] input[type="date"],
html[dir="rtl"] input[type="datetime-local"],
html[dir="rtl"] input[type="month"],
html[dir="rtl"] input[type="week"] {
    text-align: end;
    direction: rtl;
}

html[dir="rtl"] input[type="date"]::-webkit-datetime-edit,
html[dir="rtl"] input[type="datetime-local"]::-webkit-datetime-edit {
    text-align: end;
}

html[dir="rtl"] input[type="date"]::-webkit-datetime-edit-fields-wrapper,
html[dir="rtl"] input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper {
    justify-content: flex-end;
}

/* Achievements pages (dashboard, all achievements, leaderboard) */
html[dir="rtl"] .achievement-page,
html[dir="rtl"] .achievement-leaderboard-page {
    direction: rtl;
}

/* Stat cards: flex row mirrors in RTL (text start, icon end) */
.achievement-page .achievement-stat-card,
.achievement-leaderboard-page .achievement-stat-card {
    direction: inherit;
}

.achievement-page .achievement-stat-card-body,
.achievement-leaderboard-page .achievement-stat-card-body {
    text-align: start;
}

html[dir="rtl"] .achievement-page .achievement-stat-icon,
html[dir="rtl"] .achievement-leaderboard-page .achievement-stat-icon {
    direction: ltr;
    unicode-bidi: isolate;
}

html[dir="rtl"] .achievement-page .achievement-stat-icon i,
html[dir="rtl"] .achievement-page .achievement-stat-icon .fas,
html[dir="rtl"] .achievement-leaderboard-page .achievement-stat-icon i,
html[dir="rtl"] .achievement-leaderboard-page .achievement-stat-icon .fas {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    direction: ltr !important;
    transform: none !important;
}

html[dir="rtl"] .achievement-leaderboard-page .achievement-leaderboard-nav .material-symbols-outlined {
    direction: ltr;
    transform: scaleX(-1);
}

/* Leaderboard table */
html[dir="rtl"] .achievement-leaderboard-page .achievement-leaderboard-table {
    direction: rtl;
}

html[dir="rtl"] .achievement-leaderboard-page .achievement-leaderboard-table .achievement-leaderboard-th-start,
html[dir="rtl"] .achievement-leaderboard-page .achievement-leaderboard-table .achievement-leaderboard-cell-start {
    text-align: right;
}

html[dir="rtl"] .achievement-leaderboard-page .achievement-leaderboard-table .achievement-leaderboard-th-center,
html[dir="rtl"] .achievement-leaderboard-page .achievement-leaderboard-table .achievement-leaderboard-cell-center {
    text-align: center;
}

html[dir="rtl"] .achievement-leaderboard-page .achievement-leaderboard-rank-row,
html[dir="rtl"] .achievement-leaderboard-page .achievement-leaderboard-user-row {
    flex-direction: row;
    gap: 0.5rem;
}

html[dir="rtl"] .achievement-leaderboard-page .achievement-leaderboard-user-row {
    gap: 1rem;
}

html[dir="rtl"] .achievement-leaderboard-page .achievement-leaderboard-user-meta {
    text-align: right;
}

html[dir="rtl"] .achievement-leaderboard-page .achievement-leaderboard-table .fas {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    direction: ltr !important;
    transform: none !important;
}

html[dir="rtl"] .achievement-leaderboard-page .achievement-leaderboard-table-title {
    flex-direction: row;
    text-align: right;
}

html[dir="rtl"] .achievement-leaderboard-page .achievement-leaderboard-table-title .fas {
    margin-inline-end: 0.5rem;
    margin-inline-start: 0;
}

html[dir="rtl"] .achievement-leaderboard-page .achievement-leaderboard-header-actions {
    flex-direction: row;
    gap: 0.5rem;
}

html[dir="rtl"] .achievement-leaderboard-page .achievement-leaderboard-header-btn .fas {
    margin-inline-end: 0.35rem;
    margin-inline-start: 0;
}

html[dir="rtl"] .achievement-leaderboard-page .achievement-leaderboard-pagination-info {
    text-align: right;
}

html[dir="rtl"] .achievement-leaderboard-page .achievement-leaderboard-jump-row {
    flex-direction: row;
}

html[dir="rtl"] .achievement-leaderboard-page .achievement-leaderboard-nav {
    flex-direction: row;
    gap: 0.5rem;
}

/* LTR: gap for rank/user rows (rtl: utilities not in compiled CSS) */
.achievement-leaderboard-page .achievement-leaderboard-rank-row {
    gap: 0.5rem;
}

.achievement-leaderboard-page .achievement-leaderboard-user-row {
    gap: 1rem;
}

.achievement-leaderboard-page .achievement-leaderboard-header-actions {
    gap: 0.5rem;
}

.achievement-leaderboard-page .achievement-leaderboard-header-btn .fas {
    margin-inline-end: 0.35rem;
    margin-inline-start: 0;
}

.achievement-leaderboard-page .achievement-leaderboard-table-title .fas {
    margin-inline-end: 0.5rem;
    margin-inline-start: 0;
}

.achievement-leaderboard-page .achievement-leaderboard-nav {
    gap: 0.5rem;
}

/* Achievement progress bars — native RTL fill direction */
.achievement-progress-bar {
    display: flex;
}

.achievement-progress-bar[dir="rtl"] .achievement-progress-bar__fill--gradient {
    background-image: linear-gradient(to left, #6E4FA2, #9C27B0);
}

/* Achievement badge status pin (check / lock) — overlaps icon corner */
.achievement-badge-pin {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    z-index: 1;
    width: 1rem;
    height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    border: 2px solid #fff;
    transform: translate(30%, -30%);
}

html[dir="rtl"] .achievement-badge-pin {
    transform: translate(-30%, -30%);
}

.achievement-badge-pin i {
    font-size: 10px;
    line-height: 1;
}

/* Level range: "Level 15 → 16" / "المستوى 15 ← 16" */
.achievement-level-range {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.achievement-level-range-values {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-variant-numeric: tabular-nums;
}

/* Your Achievements grid — balanced vertical rhythm */
.your-achievements-grid {
    column-gap: 1.5rem;
    row-gap: 2rem;
}

.your-achievement-item {
    padding-block: 0.25rem;
}

.your-achievement-item__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    width: 100%;
    min-height: 2.75rem;
    margin-top: 0.75rem;
}

@media (min-width: 768px) {
    .your-achievements-grid {
        row-gap: 2.25rem;
    }

    .your-achievement-item__body {
        margin-top: 0.875rem;
    }
}

/* Assignments pages: disable hover visual changes */
.assignments-page .btn-primary:hover {
    background-color: rgb(110 79 162) !important;
    border-color: rgb(110 79 162) !important;
    color: #fff !important;
}

.assignments-page .btn-secondary:hover {
    background-color: rgb(75 85 99) !important;
    color: #fff !important;
}

.assignments-page tbody tr:hover {
    background-color: transparent !important;
}

/* Assignments: use full dashboard content width */
.assignments-page .assignments-main {
    width: 100%;
    max-width: none;
    margin-inline: calc(-1 * clamp(0.5rem, 2vw, 1.25rem));
    padding-inline: clamp(0.5rem, 2vw, 1.25rem);
}

.assignments-page .assignments-table {
    table-layout: fixed;
    width: 100%;
    min-width: 100%;
}

.assignments-page .assignments-table th,
.assignments-page .assignments-table td {
    padding: 0.75rem;
    vertical-align: middle;
}

.assignments-page .assignments-col-title {
    width: 20%;
}

.assignments-page .assignments-col-assigned {
    width: 10%;
}

.assignments-page .assignments-col-status {
    width: 8%;
}

.assignments-page .assignments-col-due-type {
    width: 8%;
}

.assignments-page .assignments-col-created {
    width: 10%;
}

.assignments-page .assignments-col-due {
    width: 10%;
}

.assignments-page .assignments-col-completed {
    width: 6%;
    text-align: center;
}

.assignments-page .assignments-col-assignees {
    width: 7%;
    text-align: center;
}

.assignments-page .assignments-col-rate {
    width: 10%;
    text-align: center;
}

.assignments-page .assignments-col-actions {
    width: 10%;
    text-align: center;
}

.assignments-page .assignments-title-text,
.assignments-page .assignments-title-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assignments-page .assignments-table--user {
    table-layout: auto;
}

.assignments-page .assignments-table--user th,
.assignments-page .assignments-table--user td {
    padding: 1rem 1.25rem;
}

/* User Progress & Course Performance — keep icons upright in RTL */
html[dir="rtl"] .user-progress-page .material-symbols-outlined,
html[dir="rtl"] .course-performance-page .material-symbols-outlined,
html[dir="rtl"] .course-catalog-page .material-symbols-outlined {
    direction: ltr !important;
    unicode-bidi: isolate;
    transform: none !important;
}

html[dir="rtl"] .user-progress-page .flex.items-center,
html[dir="rtl"] .course-performance-page .flex.items-center,
html[dir="rtl"] .course-catalog-page .flex.items-center,
html[dir="rtl"] .course-catalog-page .inline-flex.items-center {
    flex-direction: row;
}

/* Course catalog: bookmark, search, card footer icons */
html[dir="rtl"] .course-catalog-page .bookmark-position {
    right: auto !important;
    left: 1rem;
}

html[dir="rtl"] .course-catalog-page .btn .material-symbols-outlined {
    transform: none !important;
}

/* Course catalog toolbar: search, sort, filter (Tailwind rtl:* utilities not in build) */
.course-catalog-page .catalog-search-icon-wrap {
    inset-inline-start: 0;
    padding-inline-start: 0.625rem;
}

.course-catalog-page .catalog-search-icon-wrap .material-symbols-outlined {
    display: block;
    line-height: 1;
}

.course-catalog-page .catalog-search-input {
    padding-inline-start: 2rem;
    padding-inline-end: 0.5rem;
}

html[dir="rtl"] .course-catalog-page .catalog-search-input {
    text-align: right;
}

html[dir="rtl"] .course-catalog-page .catalog-sort-select {
    padding-left: 2rem !important;
    padding-right: 1rem !important;
    text-align: right;
}

html[dir="rtl"] .course-catalog-page .catalog-sort-icon {
    right: auto !important;
    left: 0.75rem !important;
}

html[dir="rtl"] .course-catalog-page .catalog-filter-panel {
    right: auto !important;
    left: 0 !important;
}

/* Pagination: flip only navigational arrows/page icons for RTL flow */
html[dir="rtl"] .user-progress-page .user-progress-pagination .material-symbols-outlined {
    transform: scaleX(-1) !important;
}