/* RTL Custom Styles for LingoScore Arabic Version */
/* 
 * CRITICAL RULE: This file should ONLY affect text direction and font-family.
 * DO NOT add margin, padding, or positioning changes that alter structural layout.
 * The layout must be IDENTICAL between LTR and RTL - only text flow should change.
 */

/* ============================================================================
   BASE RTL SETUP
   ============================================================================ */

/* Dubai Font for Arabic text - This is the ONLY visual change needed */
body[dir="rtl"] {
    font-family: 'Dubai', 'Noto Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ============================================================================
   DIRECTIONAL ICON MIRRORING
   Only swap directional arrows for proper RTL UX
   ============================================================================ */

/* Arrow icons */
body[dir="rtl"] .fa-arrow-right::before {
    content: "\f060"; /* fa-arrow-left */
}

body[dir="rtl"] .fa-arrow-left::before {
    content: "\f061"; /* fa-arrow-right */
}

/* Chevron icons */
body[dir="rtl"] .fa-chevron-right::before {
    content: "\f053"; /* fa-chevron-left */
}

body[dir="rtl"] .fa-chevron-left::before {
    content: "\f054"; /* fa-chevron-right */
}

/* ============================================================================
   TEXT ALIGNMENT (affects text content only, not structure)
   ============================================================================ */

/* Dropdown menus - text alignment only */
body[dir="rtl"] .dropdown-menu {
    text-align: right;
}

/* Tooltip text alignment */
body[dir="rtl"] .tooltip {
    text-align: right;
}

/* ============================================================================
   SPECIAL CASES: Keep LTR for specific elements
   ============================================================================ */

/* Chart.js - Keep LTR for proper data rendering */
body[dir="rtl"] canvas {
    direction: ltr;
}

/* Admin panel - Keep LTR (admin interface remains English) */
body[dir="rtl"] .admin-sidebar,
body[dir="rtl"] .admin-content {
    direction: ltr;
    text-align: left;
}

/* Numeric values - Keep LTR for proper number display without changing structure */
body[dir="rtl"] .numeric,
body[dir="rtl"] .badge.numeric,
body[dir="rtl"] .score-value,
body[dir="rtl"] .badge,
body[dir="rtl"] h1, body[dir="rtl"] h2, body[dir="rtl"] h3 {
    unicode-bidi: plaintext;
}

/* Keep navbar dropdown text aligned left when navbar is explicitly LTR */
body[dir="rtl"] .navbar[dir="ltr"] .dropdown-menu {
    text-align: left !important;
}

/* ============================================================================
   MOBILE NAVBAR LOGO FIX - Keep logo on far left in Arabic mobile view
   ============================================================================ */

/* Force the navbar to maintain LTR direction visually (even in RTL body) */
body[dir="rtl"] .navbar .container-fluid {
    direction: ltr !important;
}

/* Arabic mobile navbar logo positioning is now handled via template conditional classes */

/* Navbar Upgrade Button - Force LTR layout even in RTL body */
body[dir="rtl"] .navbar .navbar-upgrade-btn {
    flex-direction: row !important;
    gap: 0.5rem !important;
}

body[dir="rtl"] .navbar .navbar-upgrade-btn i {
    margin-inline: 0 !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
}

/* ============================================================================
   COSMETIC: Custom scrollbar styling (doesn't affect layout)
   ============================================================================ */

body[dir="rtl"] ::-webkit-scrollbar {
    width: 8px;
}

body[dir="rtl"] ::-webkit-scrollbar-track {
    background: #f1f1f1;
}

body[dir="rtl"] ::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

body[dir="rtl"] ::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* ============================================================================
   END OF RTL STYLES
   
   NOTE: If you need to add RTL-specific styling, ask yourself:
   1. Does this change the POSITION of any element?
   2. Does this add margin/padding that shifts layout?
   3. Would this make the Arabic page look different structurally?
   
   If the answer to any of these is YES, DO NOT add it here.
   Use logical CSS properties (margin-inline-start) in custom.css instead.
   ============================================================================ */

/* Auth page RTL input field alignment */
[dir="rtl"] input.form-control,
[dir="rtl"] input.form-control-lg {
    text-align: right !important;
    direction: rtl !important;
}

[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="password"],
[dir="rtl"] input[type="text"] {
    text-align: right !important;
    direction: rtl !important;
}

/* Make Arabic navbar buttons bold */
[dir="rtl"] .navbar-nav .nav-link {
    font-weight: 700 !important;
}