/* Import Bootstrap RTL CSS */
@import url('../lib/bootstrap/dist/css/bootstrap.rtl.min.css');

/* RTL Support for Farsi */
[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .navbar-nav {
    padding-right: 0;
}

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

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

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

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

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

/* RTL Support for forms and inputs */
[dir="rtl"] .form-label {
    text-align: right;
}

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

[dir="rtl"] .form-check-input {
    margin-right: 0;
    margin-left: 0.5em;
}

[dir="rtl"] .form-check-label {
    margin-right: 0.5em;
    margin-left: 0;
}

/* RTL Support for validation messages */
[dir="rtl"] .validation-message {
    text-align: right;
}

/* RTL Admin Panel Layout - Base Styles */
[dir="rtl"] .page.admin-panel {
    flex-direction: row-reverse;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

[dir="rtl"] .page.admin-panel .sidebar {
    right: 0;
    left: auto;
    order: 2;
    flex-shrink: 0;
    width: 250px;
    height: 100vh;
    position: sticky;
    top: 0;
}

[dir="rtl"] .page.admin-panel main {
    margin-left: 0;
    width: calc(100% - 250px);
    max-width: calc(100% - 250px);
    order: 1;
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Ensure content fills available space in RTL - only for admin panel */
[dir="rtl"] .page.admin-panel .content {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

[dir="rtl"] .page.admin-panel article {
    width: 100%;
    max-width: none;
    margin: 0;
}

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

[dir="rtl"] .dropdown-toggle::after {
    margin-left: 0;
    margin-right: 0.255em;
}

/* RTL Support for flexbox */
[dir="rtl"] .d-flex {
    flex-direction: row-reverse;
}

[dir="rtl"] .justify-content-start {
    justify-content: flex-end !important;
}

[dir="rtl"] .justify-content-end {
    justify-content: flex-start !important;
}

/* RTL Support for top-row and language switcher */
[dir="rtl"] .top-row {
    justify-content: flex-start !important;
}

[dir="rtl"] .top-row .text-secondary {
    margin-left: auto;
    margin-right: 0;
}

[dir="rtl"] .top-row .dropdown {
    margin-right: auto;
    margin-left: 0;
}

/* Ensure language switcher is visible */
[dir="rtl"] .dropdown {
    display: block !important;
    visibility: visible !important;
}

[dir="rtl"] .btn-outline-secondary {
    display: inline-block !important;
    visibility: visible !important;
}

[dir="rtl"] .btn-group > .btn:not(:last-child):not(.dropdown-toggle) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0.375rem;
    border-bottom-right-radius: 0.375rem;
}

[dir="rtl"] .btn-group > .btn:not(:first-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 0.375rem;
    border-bottom-left-radius: 0.375rem;
}

/* Mobile-first responsive design */
@media (max-width: 768px) {
    /* Mobile RTL Admin Panel Layout */
    [dir="rtl"] .page.admin-panel {
        flex-direction: column;
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }
    
    [dir="rtl"] .page.admin-panel .sidebar {
        width: 100%;
        height: auto;
        position: relative;
        order: 1;
        flex-shrink: 0;
        z-index: 1000;
    }
    
    [dir="rtl"] .page.admin-panel main {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        order: 2;
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
    }
    
    [dir="rtl"] .page.admin-panel main .content {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }
    
    [dir="rtl"] .page.admin-panel main .content article {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0.5rem;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    
    /* Ensure all content elements are mobile-friendly */
    [dir="rtl"] .page.admin-panel main .content > * {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    
    /* Fix container-fluid overflow */
    [dir="rtl"] .container-fluid {
        width: 100%;
        max-width: 100%;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        margin: 0;
        overflow-x: hidden;
    }
    
    /* Fix card overflow */
    [dir="rtl"] .card {
        width: 100%;
        max-width: 100%;
        margin: 0;
        overflow-x: hidden;
    }
    
    /* Fix table responsiveness */
    [dir="rtl"] .table-responsive {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Make table cells wrap text */
    [dir="rtl"] .table td,
    [dir="rtl"] .table th {
        white-space: nowrap;
        min-width: 80px;
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Fix button groups on mobile */
    [dir="rtl"] .btn-group {
        flex-wrap: wrap;
    }
    
    [dir="rtl"] .btn-group .btn {
        margin-bottom: 0.25rem;
    }
    
    /* Fix modal responsiveness */
    [dir="rtl"] .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    
    /* Fix top-row spacing */
    [dir="rtl"] .top-row {
        padding: 0.5rem;
    }
}

/* Small tablet breakpoint */
@media (min-width: 641px) and (max-width: 768px) {
    [dir="rtl"] .page.admin-panel {
        flex-direction: row-reverse;
        width: 100%;
        max-width: 100%;
    }
    
    [dir="rtl"] .page.admin-panel .sidebar {
        width: 180px;
        flex-shrink: 0;
        order: 2;
    }
    
    [dir="rtl"] .page.admin-panel main {
        width: calc(100% - 180px);
        max-width: calc(100% - 180px);
        margin-left: 0;
        order: 1;
    }
}

/* Large tablet breakpoint */
@media (min-width: 769px) and (max-width: 1024px) {
    [dir="rtl"] .page.admin-panel {
        flex-direction: row-reverse;
        width: 100%;
        max-width: 100%;
    }
    
    [dir="rtl"] .page.admin-panel .sidebar {
        width: 220px;
        flex-shrink: 0;
        order: 2;
    }
    
    [dir="rtl"] .page.admin-panel main {
        width: calc(100% - 220px);
        max-width: calc(100% - 220px);
        margin-left: 0;
        order: 1;
    }
}

/* Desktop breakpoint */
@media (min-width: 1025px) {
    [dir="rtl"] .page.admin-panel {
        flex-direction: row-reverse;
        width: 100%;
        max-width: 100%;
        height: 100vh;
        overflow: hidden;
    }
    
    [dir="rtl"] .page.admin-panel .sidebar {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
        right: 0;
        left: auto;
        flex-shrink: 0;
        order: 2;
        z-index: 1000;
    }
    
    [dir="rtl"] .page.admin-panel main {
        width: calc(100% - 250px);
        max-width: calc(100% - 250px);
        margin-left: 0;
        order: 1;
        flex: 1;
        min-width: 0;
        overflow-y: auto;
        overflow-x: hidden;
    }
    
    /* Force content to fill available space - only for admin panel */
    [dir="rtl"] .page.admin-panel .content {
        width: 100%;
        max-width: none;
        min-width: 0;
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    
    [dir="rtl"] .page.admin-panel article {
        width: 100%;
        max-width: none;
        min-width: 0;
        flex: 1;
        margin: 0;
        padding: 1rem;
        box-sizing: border-box;
    }
}

/* RTL Navigation Menu Specific Styles */
[dir="rtl"] .page.admin-panel .sidebar {
    direction: ltr; /* Keep sidebar content in LTR for proper icon alignment */
}

[dir="rtl"] .page.admin-panel .sidebar .nav-link {
    text-align: left; /* Keep nav links left-aligned for consistency */
}

/* Ensure proper box-sizing for admin panel RTL elements */
[dir="rtl"] .page.admin-panel * {
    box-sizing: border-box;
}

/* Ensure login form and other non-admin pages work properly in RTL */
[dir="rtl"] .page:not(.admin-panel) {
    width: 100%;
    max-width: 100%;
}

[dir="rtl"] .page:not(.admin-panel) .content {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 1rem;
}

[dir="rtl"] .page:not(.admin-panel) article {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 1rem;
} 
/* Remove conflicting viewport calculations */