/* RTL (Right-to-Left) Support for Arabic and other RTL languages */

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

html[dir="rtl"] body {
    direction: rtl;
}

/* Margin and Padding Flipping - Utility Classes */
html[dir="rtl"] .ml-0 { margin-left: 0 !important; margin-right: 0 !important; }
html[dir="rtl"] .ml-1 { margin-left: 0 !important; margin-right: 0.25rem !important; }
html[dir="rtl"] .ml-2 { margin-left: 0 !important; margin-right: 0.5rem !important; }
html[dir="rtl"] .ml-3 { margin-left: 0 !important; margin-right: 0.75rem !important; }
html[dir="rtl"] .ml-4 { margin-left: 0 !important; margin-right: 1rem !important; }
html[dir="rtl"] .ml-5 { margin-left: 0 !important; margin-right: 1.5rem !important; }
html[dir="rtl"] .ml-6 { margin-left: 0 !important; margin-right: 3rem !important; }

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

html[dir="rtl"] .pl-0 { padding-left: 0 !important; padding-right: 0 !important; }
html[dir="rtl"] .pl-1 { padding-left: 0 !important; padding-right: 0.25rem !important; }
html[dir="rtl"] .pl-2 { padding-left: 0 !important; padding-right: 0.5rem !important; }
html[dir="rtl"] .pl-3 { padding-left: 0 !important; padding-right: 0.75rem !important; }
html[dir="rtl"] .pl-4 { padding-left: 0 !important; padding-right: 1rem !important; }
html[dir="rtl"] .pl-5 { padding-left: 0 !important; padding-right: 1.5rem !important; }
html[dir="rtl"] .pl-6 { padding-left: 0 !important; padding-right: 3rem !important; }

html[dir="rtl"] .pr-0 { padding-right: 0 !important; padding-left: 0 !important; }
html[dir="rtl"] .pr-1 { padding-right: 0 !important; padding-left: 0.25rem !important; }
html[dir="rtl"] .pr-2 { padding-right: 0 !important; padding-left: 0.5rem !important; }
html[dir="rtl"] .pr-3 { padding-right: 0 !important; padding-left: 0.75rem !important; }
html[dir="rtl"] .pr-4 { padding-right: 0 !important; padding-left: 1rem !important; }
html[dir="rtl"] .pr-5 { padding-right: 0 !important; padding-left: 1.5rem !important; }
html[dir="rtl"] .pr-6 { padding-right: 0 !important; padding-left: 3rem !important; }

/* Text Alignment */
html[dir="rtl"] .has-text-left {
    text-align: right !important;
}

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

/* Float */
html[dir="rtl"] .is-pulled-left {
    float: right !important;
}

html[dir="rtl"] .is-pulled-right {
    float: left !important;
}

/* Flexbox - reverse main axis for row layouts */
html[dir="rtl"] .navbar-menu {
    direction: rtl;
}

html[dir="rtl"] .navbar-item {
    text-align: right;
}

html[dir="rtl"] .navbar-dropdown {
    right: auto;
    left: 0;
}

html[dir="rtl"] .navbar-start {
    flex-direction: row-reverse;
}

html[dir="rtl"] .navbar-end {
    flex-direction: row-reverse;
}

/* Select element */
html[dir="rtl"] .select select {
    background-position: left 0.625em;
    padding-left: 4px;
    padding-right: 2.5em;
}

/* Icon positioning */
html[dir="rtl"] .icon {
    margin-left: 0.25rem;
    margin-right: 0;
}

html[dir="rtl"] .icon:first-child:not(:last-child) {
    margin-left: 0;
    margin-right: 0.375rem;
}

html[dir="rtl"] .icon:last-child:not(:first-child) {
    margin-left: 0.375rem;
    margin-right: 0;
}

/* Button */
html[dir="rtl"] .button {
    text-align: center;
}

/* Control with icon */
html[dir="rtl"] .control.has-icons-left .icon,
html[dir="rtl"] .control.has-icons-right .icon {
    pointer-events: none;
    position: absolute;
    top: 0.625em;
    width: 2.5em;
    height: 2.5em;
    display: flex;
    align-items: center;
    justify-content: center;
}

html[dir="rtl"] .control.has-icons-left .icon {
    left: auto;
    right: 0;
}

html[dir="rtl"] .control.has-icons-right .icon {
    right: auto;
    left: 0;
}

html[dir="rtl"] .control.has-icons-left > .input,
html[dir="rtl"] .control.has-icons-left > .select select {
    padding-left: 2.5em;
    padding-right: 0.75em;
}

html[dir="rtl"] .control.has-icons-right > .input,
html[dir="rtl"] .control.has-icons-right > .select select {
    padding-left: 0.75em;
    padding-right: 2.5em;
}

/* Field with addons */
html[dir="rtl"] .field.has-addons {
    flex-direction: row-reverse;
}

/* Breadcrumb */
html[dir="rtl"] .breadcrumb {
    flex-direction: row-reverse;
}

html[dir="rtl"] .breadcrumb li + li::before {
    content: "\2044";
}

/* Pagination */
html[dir="rtl"] .pagination {
    flex-direction: row-reverse;
}

html[dir="rtl"] .pagination-previous,
html[dir="rtl"] .pagination-next {
    order: 0;
}

/* Tabs */
html[dir="rtl"] .tabs {
    flex-direction: row-reverse;
}

/* Sidebar layouts */
html[dir="rtl"] .columns {
    flex-direction: row;
}

html[dir="rtl"] .column.is-narrow {
    flex-grow: 0;
    flex-shrink: 0;
}

/* Modal and Dialog */
html[dir="rtl"] .modal-card-head,
html[dir="rtl"] .modal-card-body,
html[dir="rtl"] .modal-card-foot {
    text-align: right;
}

/* Tag */
html[dir="rtl"] .tag.is-delete {
    margin-left: 0.25rem;
    margin-right: 0;
}

html[dir="rtl"] .tags.has-addons .tag:not(:last-child) {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0.25rem;
    border-top-left-radius: 0.25rem;
}

html[dir="rtl"] .tags.has-addons .tag:not(:first-child) {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-bottom-right-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
    margin-left: -1px;
    margin-right: 0;
}

/* Menu */
html[dir="rtl"] .menu {
    text-align: right;
}

html[dir="rtl"] .menu-list a.is-active {
    border-left: 3px solid #3273dc;
    border-right: none;
    padding-left: calc(0.75em - 3px);
    padding-right: 0.75em;
}

/* Dropdown */
html[dir="rtl"] .dropdown-trigger {
    justify-content: flex-start;
}

html[dir="rtl"] .dropdown-menu {
    right: auto;
    left: 0;
}

/* Timeline or list items with left indicator */
html[dir="rtl"] .level-item > *:not(:last-child) {
    margin-left: 0.75rem;
    margin-right: 0;
}

/* Avatar in list */
html[dir="rtl"] .is-user-avatar {
    margin-left: 0.5rem;
    margin-right: 0;
}

/* Title and subtitle in hero/sections */
html[dir="rtl"] .title,
html[dir="rtl"] .subtitle {
    word-break: break-word;
}

/* Scrollbar positioning for RTL (browser dependent) */
html[dir="rtl"] {
    scrollbar-width: auto;
}

/* Additional utility classes for custom spacing */
html[dir="rtl"] .is-marginless {
    margin: 0 !important;
}

html[dir="rtl"] .is-paddingless {
    padding: 0 !important;
}

/* Animations - adjust for RTL if needed */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

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

html[dir="rtl"] .animation-slideInRight {
    animation: slideInLeft 0.3s ease;
}

html[dir="rtl"] .animation-slideInLeft {
    animation: slideInRight 0.3s ease;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    html[dir="rtl"] .navbar-menu {
        text-align: right;
    }
    
    html[dir="rtl"] .navbar-item {
        border-left: none;
        border-right: 1px solid #e0e0e0;
    }
    
    html[dir="rtl"] .mobile-nav-toggle {
        margin-left: auto;
        margin-right: 0;
    }
}