/* ═══════════════════════════════════════════════════════════════
   RTL Overrides for Arabic layout
   ═══════════════════════════════════════════════════════════════ */

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

/* Card borders removed — background color alone indicates state */

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

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

/* Ensure search input adapts to RTL */
[dir="rtl"] .input-search {
    text-align: right;
}

/* ─── Arabic header baseline shift (lift text ~3px) ──────────── */

[dir="rtl"] .nav-greeting,
[dir="rtl"] .nav-link,
[dir="rtl"] .nav-logout {
    position: relative;
    top: -3px;
}

/* ─── Fix code input for Arabic (larger base font-size) ──────── */

[dir="rtl"] .code-input-single {
    max-width: 2.2rem;
    height: 2.8rem;
    font-size: 1.1rem;
}

@media (max-width: 540px) {
    [dir="rtl"] .code-input-single {
        max-width: 1.9rem;
        height: 2.5rem;
        font-size: 1rem;
    }
    [dir="rtl"] .code-input-group {
        gap: 3px;
    }
}

@media (max-width: 370px) {
    [dir="rtl"] .code-input-single {
        max-width: 1.6rem;
        height: 2.2rem;
        font-size: 0.9rem;
    }
    [dir="rtl"] .code-input-group {
        gap: 2px;
    }
}

/* ─── No synthetic italic for Arabic ─────────────────────────
   Browsers fake italic by slanting glyphs rightward — for RTL
   text this looks backwards. Disable everywhere it matters.   */

[dir="rtl"] .meta-label {
    font-style: normal;
}

/* The mobile nav already has this fix inside @media (max-width: 768px).
   Apply it unconditionally for Arabic so desktop nav is covered too.
   Also covers .nav-greeting which sits outside .site-nav in the header. */
[dir="rtl"] .nav-greeting,
[dir="rtl"] .site-nav,
[dir="rtl"] .site-nav * {
    font-style: normal !important;
    font-variation-settings: 'slnt' 0, 'ital' 0 !important;
}