/* =============================================================================
   RTL (Right-to-Left) Stylesheet for Arabic Language Support
   DuckTools Website
   ============================================================================= */

/* Base direction override */
html[dir="rtl"] {
    direction: rtl;
}

/* Text alignment */
html[dir="rtl"] body,
html[dir="rtl"] p,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] li,
html[dir="rtl"] td,
html[dir="rtl"] th,
html[dir="rtl"] label,
html[dir="rtl"] span {
    text-align: right;
}

/* Navigation */
html[dir="rtl"] .navbar .nav-container {
    flex-direction: row-reverse;
}

html[dir="rtl"] .nav-links {
    flex-direction: row-reverse;
}

html[dir="rtl"] .nav-auth {
    flex-direction: row-reverse;
}

html[dir="rtl"] .logo {
    flex-direction: row-reverse;
}

html[dir="rtl"] .logo-text {
    margin-right: 10px;
    margin-left: 0;
}

/* User menu */
html[dir="rtl"] .user-menu {
    text-align: left;
}

html[dir="rtl"] .user-dropdown {
    left: 0;
    right: auto;
}

html[dir="rtl"] .dropdown-item {
    flex-direction: row-reverse;
    text-align: right;
}

html[dir="rtl"] .dropdown-icon {
    margin-left: 10px;
    margin-right: 0;
}

html[dir="rtl"] .menu-arrow {
    margin-right: 8px;
    margin-left: 0;
}

/* Language switcher */
html[dir="rtl"] .language-switcher {
    margin-left: 0;
    margin-right: 15px;
}

html[dir="rtl"] .language-dropdown {
    left: 0;
    right: auto;
}

html[dir="rtl"] .language-option {
    flex-direction: row-reverse;
    text-align: right;
}

html[dir="rtl"] .language-flag {
    margin-left: 8px;
    margin-right: 0;
}

/* Buttons */
html[dir="rtl"] .btn {
    margin-left: 0;
    margin-right: 10px;
}

html[dir="rtl"] .btn:first-child {
    margin-right: 0;
}

/* Forms */
html[dir="rtl"] .form-group label {
    text-align: right;
}

html[dir="rtl"] input[type="text"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="password"],
html[dir="rtl"] input[type="search"],
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    text-align: right;
    direction: rtl;
}

html[dir="rtl"] .input-icon-left {
    left: auto;
    right: 12px;
}

html[dir="rtl"] .input-icon-right {
    right: auto;
    left: 12px;
}

html[dir="rtl"] .input-with-icon-left {
    padding-left: 15px;
    padding-right: 45px;
}

html[dir="rtl"] .input-with-icon-right {
    padding-right: 15px;
    padding-left: 45px;
}

/* Checkboxes and radio buttons */
html[dir="rtl"] .checkbox-label,
html[dir="rtl"] .radio-label {
    padding-left: 0;
    padding-right: 30px;
}

html[dir="rtl"] .checkbox-label::before,
html[dir="rtl"] .radio-label::before {
    left: auto;
    right: 0;
}

/* Lists */
html[dir="rtl"] ul,
html[dir="rtl"] ol {
    padding-left: 0;
    padding-right: 20px;
}

html[dir="rtl"] li {
    text-align: right;
}

/* Tables */
html[dir="rtl"] table {
    direction: rtl;
}

html[dir="rtl"] th,
html[dir="rtl"] td {
    text-align: right;
}

/* Cards */
html[dir="rtl"] .card {
    text-align: right;
}

html[dir="rtl"] .card-header {
    flex-direction: row-reverse;
}

html[dir="rtl"] .card-icon {
    margin-right: 0;
    margin-left: 15px;
}

/* Footer */
html[dir="rtl"] .footer-content {
    flex-direction: row-reverse;
}

html[dir="rtl"] .footer-section {
    text-align: right;
}

html[dir="rtl"] .footer-section ul {
    padding-right: 0;
}

/* Flash messages */
html[dir="rtl"] .flash-message {
    flex-direction: row-reverse;
    text-align: right;
}

html[dir="rtl"] .flash-close {
    margin-left: 0;
    margin-right: auto;
}

/* Hero section */
html[dir="rtl"] .hero-content {
    text-align: right;
}

html[dir="rtl"] .hero-buttons {
    justify-content: flex-start;
    flex-direction: row-reverse;
}

/* Feature cards */
html[dir="rtl"] .feature-card {
    text-align: right;
}

html[dir="rtl"] .feature-icon {
    margin-left: auto;
    margin-right: 0;
}

/* Tool cards */
html[dir="rtl"] .tool-card {
    text-align: right;
}

html[dir="rtl"] .tool-card-header {
    flex-direction: row-reverse;
}

html[dir="rtl"] .tool-badge {
    margin-left: 0;
    margin-right: auto;
}

/* Dashboard */
html[dir="rtl"] .dashboard-sidebar {
    left: auto;
    right: 0;
    border-left: 1px solid var(--border-color);
    border-right: none;
}

html[dir="rtl"] .dashboard-content {
    margin-left: 0;
    margin-right: 250px;
}

html[dir="rtl"] .stat-card {
    text-align: right;
}

html[dir="rtl"] .stat-icon {
    margin-right: 0;
    margin-left: 15px;
}

/* Admin panel */
html[dir="rtl"] .admin-sidebar {
    left: auto;
    right: 0;
}

html[dir="rtl"] .admin-content {
    margin-left: 0;
    margin-right: 250px;
}

html[dir="rtl"] .admin-nav-item {
    text-align: right;
    flex-direction: row-reverse;
}

html[dir="rtl"] .admin-nav-icon {
    margin-right: 0;
    margin-left: 10px;
}

/* Pagination */
html[dir="rtl"] .pagination {
    flex-direction: row-reverse;
}

html[dir="rtl"] .page-prev::before {
    content: '\203A'; /* Right arrow */
}

html[dir="rtl"] .page-next::after {
    content: '\2039'; /* Left arrow */
}

/* Breadcrumbs */
html[dir="rtl"] .breadcrumbs {
    flex-direction: row-reverse;
}

html[dir="rtl"] .breadcrumb-separator {
    transform: rotate(180deg);
}

/* Modals */
html[dir="rtl"] .modal-header {
    flex-direction: row-reverse;
}

html[dir="rtl"] .modal-close {
    margin-left: 0;
    margin-right: auto;
}

html[dir="rtl"] .modal-body {
    text-align: right;
}

html[dir="rtl"] .modal-footer {
    flex-direction: row-reverse;
}

/* Alerts */
html[dir="rtl"] .alert {
    text-align: right;
    flex-direction: row-reverse;
}

html[dir="rtl"] .alert-icon {
    margin-right: 0;
    margin-left: 10px;
}

/* Tooltips */
html[dir="rtl"] .tooltip {
    text-align: right;
}

/* Progress bars */
html[dir="rtl"] .progress-bar {
    direction: rtl;
}

html[dir="rtl"] .progress-fill {
    float: right;
}

/* Search */
html[dir="rtl"] .search-container {
    flex-direction: row-reverse;
}

html[dir="rtl"] .search-icon {
    left: auto;
    right: 15px;
}

html[dir="rtl"] .search-input {
    padding-left: 15px;
    padding-right: 45px;
}

/* Tags and badges */
html[dir="rtl"] .tag,
html[dir="rtl"] .badge {
    margin-left: 5px;
    margin-right: 0;
}

/* Tabs */
html[dir="rtl"] .tabs {
    flex-direction: row-reverse;
}

/* Accordion */
html[dir="rtl"] .accordion-header {
    flex-direction: row-reverse;
    text-align: right;
}

html[dir="rtl"] .accordion-icon {
    margin-left: 0;
    margin-right: auto;
}

/* Grid adjustments */
html[dir="rtl"] .grid {
    direction: rtl;
}

/* Flexbox adjustments */
html[dir="rtl"] .flex-row {
    flex-direction: row-reverse;
}

/* Margins and paddings - swap left/right */
html[dir="rtl"] .ml-auto {
    margin-left: 0;
    margin-right: auto;
}

html[dir="rtl"] .mr-auto {
    margin-right: 0;
    margin-left: auto;
}

html[dir="rtl"] .text-left {
    text-align: right;
}

html[dir="rtl"] .text-right {
    text-align: left;
}

/* Arabic-specific font improvements */
html[dir="rtl"] {
    font-family: 'Segoe UI', Tahoma, 'Noto Sans Arabic', 'Arial', sans-serif;
}

/* Increase line height for Arabic text readability */
html[dir="rtl"] p,
html[dir="rtl"] li,
html[dir="rtl"] td {
    line-height: 1.8;
}

/* Mobile responsiveness for RTL */
@media (max-width: 768px) {
    html[dir="rtl"] .dashboard-sidebar,
    html[dir="rtl"] .admin-sidebar {
        left: auto;
        right: -250px;
    }

    html[dir="rtl"] .dashboard-sidebar.active,
    html[dir="rtl"] .admin-sidebar.active {
        right: 0;
    }

    html[dir="rtl"] .dashboard-content,
    html[dir="rtl"] .admin-content {
        margin-right: 0;
    }

    html[dir="rtl"] .mobile-menu-toggle {
        left: auto;
        right: 15px;
    }
}
