/* ============================================================
   School Management System - RTL (Right-to-Left) Overrides
   Default language: Arabic
   ============================================================ */

/* ----------------------------------------------------------
   Base RTL Direction
   ---------------------------------------------------------- */
[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] body {
    font-family: 'Segoe UI', Tahoma, 'Arial', 'Noto Sans Arabic', sans-serif;
}


/* ----------------------------------------------------------
   Sidebar RTL
   ---------------------------------------------------------- */

/* Sidebar on the right side for RTL */
[dir="rtl"] .sidebar {
    left: auto;
    right: 0;
    transform: translateX(100%);
}

[dir="rtl"] .sidebar.active {
    transform: translateX(0);
}

/* Active indicator on the right side */
[dir="rtl"] .sidebar-nav a.active::before,
[dir="rtl"] .sidebar-nav button.active::before {
    left: auto;
    right: 0;
    border-radius: 3px 0 0 3px;
}


/* ----------------------------------------------------------
   Main Content RTL
   ---------------------------------------------------------- */

/* Desktop: sidebar is on the right, so main content margin shifts */
@media (min-width: 1024px) {
    [dir="rtl"] .main-content {
        margin-inline-start: var(--sidebar-width);
        margin-inline-end: 0;
    }

    [dir="rtl"] .sidebar {
        transform: translateX(0);
    }
}


/* ----------------------------------------------------------
   Search Box RTL
   ---------------------------------------------------------- */
[dir="rtl"] .search-box input {
    padding: 0.5rem 2.25rem 0.5rem 0.875rem;
}

[dir="rtl"] .search-box-icon {
    left: auto;
    right: 0.75rem;
}

[dir="rtl"] .filter-search input {
    padding: 0.5rem 2.25rem 0.5rem 0.875rem;
}

[dir="rtl"] .filter-search-icon {
    left: auto;
    right: 0.75rem;
}


/* ----------------------------------------------------------
   Form Select Arrow RTL
   ---------------------------------------------------------- */
[dir="rtl"] .form-select {
    padding: 0.625rem 0.875rem 0.625rem 2.25rem;
    background-position: left 0.75rem center;
}


/* ----------------------------------------------------------
   Input Group RTL
   ---------------------------------------------------------- */
[dir="rtl"] .input-group .form-control:first-child {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

[dir="rtl"] .input-group .form-control:last-child {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

[dir="rtl"] .input-group-addon:first-child {
    border-right: 1.5px solid var(--border);
    border-left: none;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

[dir="rtl"] .input-group-addon:last-child {
    border-left: 1.5px solid var(--border);
    border-right: none;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}


/* ----------------------------------------------------------
   Toggle Switch RTL
   ---------------------------------------------------------- */
[dir="rtl"] .form-switch-slider::after {
    left: auto;
    right: 3px;
}

[dir="rtl"] .form-switch input:checked + .form-switch-slider::after {
    transform: translateX(-18px);
}


/* ----------------------------------------------------------
   Checkbox Checkmark RTL
   ---------------------------------------------------------- */
/* The checkmark orientation remains standard - no flip needed */


/* ----------------------------------------------------------
   Button Group RTL
   ---------------------------------------------------------- */
[dir="rtl"] .btn-group .btn:first-child {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

[dir="rtl"] .btn-group .btn:last-child {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

[dir="rtl"] .btn-group .btn {
    margin-inline-start: -1.5px;
}


/* ----------------------------------------------------------
   Modal RTL
   ---------------------------------------------------------- */
[dir="rtl"] .modal-footer {
    justify-content: flex-start;
}


/* ----------------------------------------------------------
   Dropdown RTL
   ---------------------------------------------------------- */
[dir="rtl"] .dropdown-menu {
    right: auto;
    left: 0;
}


/* ----------------------------------------------------------
   Table RTL
   ---------------------------------------------------------- */
[dir="rtl"] .data-table th,
[dir="rtl"] .data-table td {
    text-align: right;
}

[dir="rtl"] .data-table .actions-cell {
    justify-content: flex-start;
}

/* Sorting indicators */
[dir="rtl"] .data-table th.sort-asc::after,
[dir="rtl"] .data-table th.sort-desc::after {
    margin-right: 0.25rem;
    margin-left: 0;
}


/* ----------------------------------------------------------
   Toast / Notifications RTL
   ---------------------------------------------------------- */
[dir="rtl"] .toast-container {
    right: auto;
    left: 1rem;
}

[dir="rtl"] .toast-close {
    right: auto;
    left: 0.5rem;
}

[dir="rtl"] .toast-success { border-inline-start: 4px solid var(--success); }
[dir="rtl"] .toast-danger  { border-inline-start: 4px solid var(--danger); }
[dir="rtl"] .toast-warning { border-inline-start: 4px solid var(--warning); }
[dir="rtl"] .toast-info    { border-inline-start: 4px solid var(--info); }

@keyframes toastSlideInRtl {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

[dir="rtl"] .toast {
    animation: toastSlideInRtl 0.3s ease;
}


/* ----------------------------------------------------------
   Floating Action Button RTL
   ---------------------------------------------------------- */
[dir="rtl"] .fab {
    right: auto;
    left: 1.5rem;
}


/* ----------------------------------------------------------
   Notification Dot RTL
   ---------------------------------------------------------- */
[dir="rtl"] .header-btn .notification-dot {
    right: auto;
    left: 6px;
}


/* ----------------------------------------------------------
   Breadcrumb RTL
   ---------------------------------------------------------- */
[dir="rtl"] .breadcrumb-separator {
    transform: scaleX(-1);
}


/* ----------------------------------------------------------
   Pagination RTL
   ---------------------------------------------------------- */
[dir="rtl"] .page-btn svg,
[dir="rtl"] .page-btn .arrow {
    transform: scaleX(-1);
}


/* ----------------------------------------------------------
   Attendance RTL
   ---------------------------------------------------------- */
[dir="rtl"] .attendance-row {
    flex-direction: row;
}


/* ----------------------------------------------------------
   Transfer Card RTL
   ---------------------------------------------------------- */
/* Transfer cards use logical properties from main CSS, so they
   mostly work out of the box. Just ensure the check aligns. */


/* ----------------------------------------------------------
   Tooltip RTL
   ---------------------------------------------------------- */
[dir="rtl"] [data-tooltip]::after {
    left: 50%;
    transform: translateX(-50%);
}


/* ----------------------------------------------------------
   Progress Bar RTL
   ---------------------------------------------------------- */
[dir="rtl"] .progress-bar {
    /* Progress fills from right in RTL */
    margin-left: auto;
    margin-right: 0;
}


/* ----------------------------------------------------------
   Login Page RTL
   ---------------------------------------------------------- */
[dir="rtl"] .login-page::before {
    right: auto;
    left: -100px;
}

[dir="rtl"] .login-page::after {
    left: auto;
    right: -100px;
}

[dir="rtl"] .login-card {
    text-align: right;
}

[dir="rtl"] .login-logo {
    text-align: center;
}

[dir="rtl"] .login-title,
[dir="rtl"] .login-subtitle {
    text-align: center;
}

[dir="rtl"] .login-footer {
    text-align: center;
}


/* ----------------------------------------------------------
   Sidebar Mobile Animation RTL
   Sidebar slides in from the right on mobile for RTL
   ---------------------------------------------------------- */
@media (max-width: 1023px) {
    [dir="rtl"] .sidebar {
        left: auto;
        right: 0;
        transform: translateX(100%);
    }

    [dir="rtl"] .sidebar.active {
        transform: translateX(0);
    }
}


/* ----------------------------------------------------------
   Stat Card Change Indicator RTL
   ---------------------------------------------------------- */
[dir="rtl"] .stat-card-change .arrow-up::before,
[dir="rtl"] .stat-card-change .arrow-down::before {
    /* Arrow icons remain in the same visual direction */
    display: inline-block;
}


/* ----------------------------------------------------------
   Avatar Group RTL
   ---------------------------------------------------------- */
[dir="rtl"] .avatar-group .avatar {
    margin-inline-start: -0.5rem;
    margin-inline-end: 0;
}

[dir="rtl"] .avatar-group .avatar:first-child {
    margin-inline-start: 0;
}


/* ----------------------------------------------------------
   Tabs RTL
   ---------------------------------------------------------- */
[dir="rtl"] .tabs {
    /* Tabs flow naturally with RTL direction */
}

[dir="rtl"] .tab-btn.active::after {
    left: 0;
    right: 0;
}


/* ----------------------------------------------------------
   Alert RTL
   ---------------------------------------------------------- */
[dir="rtl"] .alert {
    flex-direction: row;
}


/* ----------------------------------------------------------
   Miscellaneous Text Alignment RTL
   ---------------------------------------------------------- */
[dir="rtl"] .text-left {
    text-align: right;
}

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

/* .text-start and .text-end use logical values already */


/* ----------------------------------------------------------
   Card Header Actions RTL
   ---------------------------------------------------------- */
[dir="rtl"] .card-header-actions {
    /* Uses flexbox, naturally reverses in RTL */
}

[dir="rtl"] .page-header-row {
    /* Uses flexbox, naturally reverses in RTL */
}


/* ----------------------------------------------------------
   Form Error Icon RTL
   ---------------------------------------------------------- */
[dir="rtl"] .form-error {
    flex-direction: row;
}


/* ----------------------------------------------------------
   Sidebar Navigation Badge RTL
   ---------------------------------------------------------- */
[dir="rtl"] .nav-badge {
    margin-inline-start: auto;
    margin-inline-end: 0;
}


/* ----------------------------------------------------------
   Print Styles RTL
   ---------------------------------------------------------- */
@media print {
    [dir="rtl"] .main-content {
        margin: 0 !important;
    }

    [dir="rtl"] .data-table th,
    [dir="rtl"] .data-table td {
        text-align: right;
    }
}


/* ----------------------------------------------------------
   Reduced Motion RTL
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    [dir="rtl"] .sidebar,
    [dir="rtl"] .toast {
        animation: none !important;
    }
}