/* ==========================================================================
   RTL Components - Reusable UI Components for Right-to-Left Languages
   ========================================================================== */

/*
   Reusable component styles for RTL layout
   - Form elements
   - Navigation components
   - UI components (cards, tables, alerts)
   - Icons and graphics
   - Animations
*/

/* ==========================================================================
   1. FORM ELEMENTS
   ========================================================================== */

/* Input fields */
[dir="rtl"] input:not([type="checkbox"]):not([type="radio"]),
[dir="rtl"] textarea,
[dir="rtl"] select {
    text-align: start;
    direction: rtl;
}

/* Labels */
[dir="rtl"] label {
    text-align: start;
}

/* Form groups and containers */
[dir="rtl"] .form-group,
[dir="rtl"] .field {
    text-align: start;
}

/* Checkboxes and radio buttons */
[dir="rtl"] input[type="checkbox"],
[dir="rtl"] input[type="radio"] {
    margin-inline-start: 0.5rem;
    margin-inline-end: 0;
}

/* Language switcher - desktop RTL positioning */
@media (min-width: 768px) {
    [dir="rtl"] .language-switcher select {
        background-position: left 0.5rem center;
        padding-inline-start: 2.5rem;
        padding-inline-end: 1rem;
    }
}

/* ==========================================================================
   2. NAVIGATION & MENUS
   ========================================================================== */

/* Navigation menus */
[dir="rtl"] nav ul {
    margin-inline-start: auto;
    margin-inline-end: 0;
}

[dir="rtl"] nav li {
    margin-inline-start: 1rem;
    margin-inline-end: 0;
}

/* Fix navbar spacing for space-x-4 links */
[dir="rtl"] .ml-10.flex.items-baseline.space-x-4 a {
    margin-inline-start: 1rem;
    margin-inline-end: 0;
}

[dir="rtl"] .ml-10.flex.items-baseline.space-x-4 a:first-child {
    margin-inline-start: 0;
}

/* Dropdown menus */
[dir="rtl"] .dropdown-menu {
    inset-inline-start: auto;
    inset-inline-end: 0;
    text-align: start;
}

[dir="rtl"] .dropdown-item {
    text-align: start;
    padding-inline-start: 1rem;
    padding-inline-end: 1rem;
}

/* Breadcrumbs */
[dir="rtl"] .breadcrumb {
    direction: rtl;
}

[dir="rtl"] .breadcrumb-separator::before {
    content: "\\";
    transform: scaleX(-1);
}

/* ==========================================================================
   3. UI COMPONENTS
   ========================================================================== */

/* Cards */
[dir="rtl"] .card,
[dir="rtl"] .card-header,
[dir="rtl"] .card-body {
    text-align: start;
}

/* Tables */
[dir="rtl"] .table,
[dir="rtl"] table {
    direction: rtl;
}

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

/* Alerts */
[dir="rtl"] .alert {
    text-align: start;
}

[dir="rtl"] .alert .close,
[dir="rtl"] .alert .btn-close {
    inset-inline-start: 0;
    inset-inline-end: auto;
}

/* Buttons with icons */
[dir="rtl"] .btn svg,
[dir="rtl"] button svg {
    margin-inline-start: 0.5rem;
    margin-inline-end: 0;
}

[dir="rtl"] .btn svg:first-child,
[dir="rtl"] button svg:first-child {
    margin-inline-start: 0;
    margin-inline-end: 0.5rem;
}

/* Statistics/Counter sections */
[dir="rtl"] .stat-card {
    text-align: center; /* Stats typically centered */
}

[dir="rtl"] .stat-icon {
    margin-inline: auto; /* Center icons */
}

/* ==========================================================================
   4. ICONS & GRAPHICS
   ========================================================================== */

/* Icon direction utilities */
[dir="rtl"] .icon-flip {
    transform: scaleX(-1);
}

/* Arrow and chevron icons */
[dir="rtl"] .icon-arrow-right::before { content: "\\2190"; } /* Left arrow */
[dir="rtl"] .icon-arrow-left::before { content: "\\2192"; } /* Right arrow */
[dir="rtl"] .icon-chevron-right::before { content: "\\2039"; } /* Left chevron */
[dir="rtl"] .icon-chevron-left::before { content: "\\203A"; } /* Right chevron */

/* SVG icon spacing */
[dir="rtl"] svg.ml-2 {
    margin-inline-start: 0;
    margin-inline-end: 0.5rem;
}

[dir="rtl"] svg.mr-2 {
    margin-inline-start: 0.5rem;
    margin-inline-end: 0;
}

/* ==========================================================================
   5. ANIMATIONS & TRANSFORMS
   ========================================================================== */

/* Slide animations for RTL */
[dir="rtl"] .slide-in-left {
    animation: slideInFromEnd 0.3s ease-out;
}

[dir="rtl"] .slide-in-right {
    animation: slideInFromStart 0.3s ease-out;
}

@keyframes slideInFromStart {
    from { transform: translateX(-20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInFromEnd {
    from { transform: translateX(20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ==========================================================================
   6. RESPONSIVE COMPONENTS
   ========================================================================== */

/* Mobile adjustments */
@media (max-width: 768px) {
    /* Stack buttons vertically on mobile */
    [dir="rtl"] .btn-group-mobile {
        flex-direction: column;
    }

    [dir="rtl"] .btn-group-mobile .btn {
        margin-inline: 0;
        margin-block: 0.25rem;
    }

    /* Mobile dropdowns */
    [dir="rtl"] .dropdown-menu {
        inset-inline-start: 0;
        inset-inline-end: 0;
        width: 100%;
    }
}