/* RTL overrides — activated when html[dir="rtl"] */
html[dir="rtl"] body
{
    text-align: right;
}

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

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

html[dir="rtl"] .me-1 { margin-right: 0 !important; margin-left: 0.25rem !important; }
html[dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: 0.5rem !important; }
html[dir="rtl"] .me-3 { margin-right: 0 !important; margin-left: 1rem !important; }
html[dir="rtl"] .me-4 { margin-right: 0 !important; margin-left: 1.5rem !important; }

html[dir="rtl"] .ms-1 { margin-left: 0 !important; margin-right: 0.25rem !important; }
html[dir="rtl"] .ms-2 { margin-left: 0 !important; margin-right: 0.5rem !important; }
html[dir="rtl"] .ms-3 { margin-left: 0 !important; margin-right: 1rem !important; }
html[dir="rtl"] .ms-4 { margin-left: 0 !important; margin-right: 1.5rem !important; }

html[dir="rtl"] .pe-1 { padding-right: 0 !important; padding-left: 0.25rem !important; }
html[dir="rtl"] .pe-2 { padding-right: 0 !important; padding-left: 0.5rem !important; }
html[dir="rtl"] .pe-3 { padding-right: 0 !important; padding-left: 1rem !important; }

html[dir="rtl"] .ps-1 { padding-left: 0 !important; padding-right: 0.25rem !important; }
html[dir="rtl"] .ps-2 { padding-left: 0 !important; padding-right: 0.5rem !important; }
html[dir="rtl"] .ps-3 { padding-left: 0 !important; padding-right: 1rem !important; }

html[dir="rtl"] .dropdown-menu-end
{
    --bs-position: start;
}

/* Sidebar slides in from the right in RTL (instead of from the left) */
html[dir="rtl"] .sidebar
{
    left: auto !important;
    right: -100% !important;
    transition: right 0.3s ease-in-out !important;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3) !important;
}

@media (min-width: 769px)
{
    html[dir="rtl"] .sidebar
    {
        right: -280px !important;
    }
}

html[dir="rtl"] .sidebar.mobile-menu-active
{
    left: auto !important;
    right: 0 !important;
}

html[dir="rtl"] .nav-icon
{
    margin-left: 0.5rem;
    margin-right: 0;
}

html[dir="rtl"] .nav-chevron
{
    margin-left: 0;
    margin-right: auto;
    transform: scaleX(-1);
}

html[dir="rtl"] .bi-box-arrow-right::before
{
    content: "\f1c2";
}

html[dir="rtl"] .bi-box-arrow-in-right::before
{
    content: "\f1c4";
}

/* Base placement now lives in app.css beside the rest of the auth-page layout — this file is for
   direction overrides, and a rule every LTR user depends on had no business hiding in it. */
html[dir="rtl"] .auth-language-switcher
{
    right: auto;
    left: 1rem;
}

/* Blazored.Toast spaces its icon and close button with physical padding
   (padding-right on the icon, padding-left on the close). The toast is a flex
   row, so RTL already mirrors the order — but the padding does not follow, and
   the gap ends up on the outer edge with the button crowding the message.
   Position needs no override: TopCenter is left:50% + translate(-50%). */
html[dir="rtl"] .blazored-toast .blazored-toast-close
{
    padding: 0 1rem 0 0;
}

html[dir="rtl"] .blazored-toast-icon
{
    padding: 0 0 0 1rem;
}