/* 
 * RTL-aware utilities for Tailwind CDN (no build step)
 * ⚠️ LEGACY: Only add overrides for EXISTING classes that can't be refactored.
 * For NEW code, use CSS logical properties directly.
 */

/* Direction-aware spacing */
[dir="rtl"] .ml-auto { margin-left: 0; margin-right: auto; }
[dir="rtl"] .mr-auto { margin-right: 0; margin-left: auto; }
[dir="rtl"] .ml-2 { margin-left: 0; margin-right: 0.5rem; }
[dir="rtl"] .mr-2 { margin-right: 0; margin-left: 0.5rem; }
[dir="rtl"] .ml-3 { margin-left: 0; margin-right: 0.75rem; }
[dir="rtl"] .mr-3 { margin-right: 0; margin-left: 0.75rem; }
[dir="rtl"] .ml-4 { margin-left: 0; margin-right: 1rem; }
[dir="rtl"] .mr-4 { margin-right: 0; margin-left: 1rem; }
[dir="rtl"] .ml-6 { margin-left: 0; margin-right: 1.5rem; }
[dir="rtl"] .mr-6 { margin-right: 0; margin-left: 1.5rem; }
[dir="rtl"] .ml-8 { margin-left: 0; margin-right: 2rem; }
[dir="rtl"] .mr-8 { margin-right: 0; margin-left: 2rem; }

[dir="rtl"] .pl-2 { padding-left: 0; padding-right: 0.5rem; }
[dir="rtl"] .pr-2 { padding-right: 0; padding-left: 0.5rem; }
[dir="rtl"] .pl-4 { padding-left: 0; padding-right: 1rem; }
[dir="rtl"] .pr-4 { padding-right: 0; padding-left: 1rem; }
[dir="rtl"] .pl-6 { padding-left: 0; padding-right: 1.5rem; }
[dir="rtl"] .pr-6 { padding-right: 0; padding-left: 1.5rem; }
[dir="rtl"] .pl-8 { padding-left: 0; padding-right: 2rem; }
[dir="rtl"] .pr-8 { padding-right: 0; padding-left: 2rem; }

/* Direction-aware positioning */
[dir="rtl"] .left-0 { left: auto; right: 0; }
[dir="rtl"] .right-0 { right: auto; left: 0; }
[dir="rtl"] .left-2 { left: auto; right: 0.5rem; }
[dir="rtl"] .right-2 { right: auto; left: 0.5rem; }
[dir="rtl"] .left-4 { left: auto; right: 1rem; }
[dir="rtl"] .right-4 { right: auto; left: 1rem; }

/* Text alignment */
[dir="rtl"] .text-left { text-align: right; }
[dir="rtl"] .text-right { text-align: left; }

/* Flex direction */
[dir="rtl"] .flex-row { flex-direction: row-reverse; }
[dir="rtl"] .flex-row-reverse { flex-direction: row; }

/* Border radius */
[dir="rtl"] .rounded-l { border-radius: 0 0.25rem 0.25rem 0; }
[dir="rtl"] .rounded-r { border-radius: 0.25rem 0 0 0.25rem; }
[dir="rtl"] .rounded-l-md { border-radius: 0 0.375rem 0.375rem 0; }
[dir="rtl"] .rounded-r-md { border-radius: 0.375rem 0 0 0.375rem; }
[dir="rtl"] .rounded-l-lg { border-radius: 0 0.5rem 0.5rem 0; }
[dir="rtl"] .rounded-r-lg { border-radius: 0.5rem 0 0 0.5rem; }
[dir="rtl"] .rounded-l-xl { border-radius: 0 0.75rem 0.75rem 0; }
[dir="rtl"] .rounded-r-xl { border-radius: 0.75rem 0 0 0.75rem; }

/* Border sides */
[dir="rtl"] .border-l { border-left: 0; border-right-width: 1px; }
[dir="rtl"] .border-r { border-right: 0; border-left-width: 1px; }
[dir="rtl"] .border-l-2 { border-left: 0; border-right-width: 2px; }
[dir="rtl"] .border-r-2 { border-right: 0; border-left-width: 2px; }
[dir="rtl"] .border-l-4 { border-left: 0; border-right-width: 4px; }
[dir="rtl"] .border-r-4 { border-right: 0; border-left-width: 4px; }

/* Icons that should flip */
[dir="rtl"] .rtl-flip {
    transform: scaleX(-1);
}

/* Icons that should NOT flip (logos, checkmarks) */
.rtl-no-flip {
    transform: none !important;
}

/* Arabic font stack */
[dir="rtl"] body {
    font-family: 'Noto Sans Arabic', 'Segoe UI', 'Arial', sans-serif;
}

/* ============================================
 * LTR INPUT FIELDS - OPT-IN ONLY
 * ============================================
 * 
 * ⚠️ REMOVED GLOBAL RULES: [dir="rtl"] input[type="number/tel"]
 * Those blocked users from typing Arabic digits in quantity fields.
 * 
 * Instead, explicitly mark inputs that need LTR behavior:
 *   - Invoice numbers, Peppol IDs, emails, URLs → .ltr-input
 *   - Quantity/amount fields → keep default (allow Arabic digit typing)
 * 
 * Use: <input class="ltr-input" data-ltr="true" ...>
 * 
 * ─── INPUT FIELD CLASSIFICATION ───────────────────────────────────
 * 
 * LTR-ONLY (always .ltr-input):
 *   - peppol_id: Technical identifier, never Arabic
 *   - invoice_number: Alphanumeric, LTR formatting
 *   - email: RFC5322 requires ASCII
 *   - url: URLs are ASCII/punycode
 *   - iban: Bank codes are LTR
 *   - phone (optional): Some prefer LTR for international format
 * 
 * RTL + ARABIC ALLOWED (no .ltr-input, keep natural):
 *   - description: Free text, Arabic or English
 *   - address: Can be Arabic
 *   - notes: Free text
 *   - company_name: Arabic company names
 * 
 * ARABIC-INDIC DIGITS ALLOWED (call normalizeNumericInput before use):
 *   - quantity: User may type ٥ instead of 5
 *   - unit_price: User may type Arabic digits
 *   - amount: Must normalize to Western before storage
 *   → These fields should NOT have .ltr-input, but must normalize on blur/change
 */
[dir="rtl"] input.ltr-input,
[dir="rtl"] input[data-ltr="true"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"] {
    direction: ltr;
    text-align: left;
    unicode-bidi: isolate;
}

/* For price/amount fields that should stay LTR but allow Arabic spacing */
[dir="rtl"] .ltr-numbers {
    direction: ltr;
    text-align: left;
    unicode-bidi: isolate;
}

/* Also apply to textareas that may contain identifiers */
[dir="rtl"] textarea.ltr-input {
    direction: ltr;
    text-align: left;
    unicode-bidi: isolate;
}

/* ============================================
 * LTR DATA ISLANDS
 * ============================================
 * Always display left-to-right even in RTL context.
 * Use for: invoice numbers, Peppol IDs, emails, URLs, IBANs
 */
.ltr-data {
    unicode-bidi: isolate;
    direction: ltr;
    display: inline-block;  /* Ensures isolation */
}

/**
 * Bidirectional scope container - for sections that need isolated bidi context.
 * 
 * USE ON: Toast bodies, modal content, invoice preview panels where
 * mixed-language content (Arabic + English/IDs) may appear dynamically.
 * Prevents parent RTL from bleeding into child LTR data.
 */
.bidi-scope {
    unicode-bidi: isolate;
}

/* ============================================
 * TABLES IN RTL
 * ============================================
 * Tables need special handling for:
 * 1. Horizontal scrolling (sticky headers + RTL can break in Safari)
 * 2. Numeric columns stay LTR even if table is RTL
 */

/* Scrollable table container - wrap tables in this for overflow handling */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;  /* Smooth scroll on iOS */
}

[dir="rtl"] .table-scroll {
    /* RTL scroll direction is automatic, but we ensure padding is correct */
    text-align: right;
}

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

/* Numeric data columns: always LTR (amounts, quantities, IDs) */
[dir="rtl"] td.ltr-data,
[dir="rtl"] td.amount-col,
[dir="rtl"] td.id-col {
    direction: ltr;
    text-align: left;
    unicode-bidi: isolate;
}

/* Actions column stays left-aligned (buttons, icons) */
[dir="rtl"] .actions-col {
    text-align: left;
}

/* ============================================
 * LANGUAGE SWITCHER
 * ============================================ */
.language-switcher {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.language-switcher button {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 0.25rem;
    transition: background-color 0.15s ease;
}

.language-switcher button:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.language-switcher button.font-bold {
    font-weight: 700;
}

/* Numeral toggle - only shown for Arabic UI */
#numeral-toggle {
    font-size: 0.875rem;
    color: #6b7280;
}

#numeral-toggle.hidden {
    display: none;
}