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 !important;
    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 !important;
    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;
}

/* 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;
}

/* 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 leaderboard */
html[dir="rtl"] .achievement-leaderboard-page {
    direction: rtl;
}

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

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

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

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;
}

/* 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;
}