/* ============================================================
   Lumière Studio — Unfold Admin RTL Surgical Fixes
   Targets only specific broken patterns, does NOT over-ride
   Unfold's core component layout classes globally.
   ============================================================ */

/* ── Base RTL Direction ─────────────────────────────────── */
html[dir="rtl"] {

    /* ── Directional icon mirroring ─────────────────────────
       Only mirrors icons that represent directional movement.
       We use :is() with attribute selectors matching the icon
       text content via aria-label or specific class names.    */
    .material-symbols-outlined[data-icon="arrow_forward"],
    .material-symbols-outlined[data-icon="arrow_back"],
    .material-symbols-outlined[data-icon="chevron_right"],
    .material-symbols-outlined[data-icon="chevron_left"],
    .material-symbols-outlined[data-icon="navigate_next"],
    .material-symbols-outlined[data-icon="navigate_before"],
    .material-symbols-outlined[data-icon="first_page"],
    .material-symbols-outlined[data-icon="last_page"],
    .material-symbols-outlined[data-icon="keyboard_backspace"],
    .material-symbols-outlined[data-icon="arrow_right_alt"],
    .material-symbols-outlined[data-icon="trending_flat"],
    .material-symbols-outlined[data-icon="logout"],
    .material-symbols-outlined[data-icon="login"] {
        transform: scaleX(-1);
    }

    /* ── Table alignment ────────────────────────────────────── */
    /* Scoped to admin content area only */
    #content table th,
    #content table td {
        text-align: right;
    }

    /* ── Select dropdown arrow positioning ──────────────────── */
    select:not([multiple]) {
        background-position: left 0.75rem center;
        padding-right: 0.75rem;
        padding-left: 2.5rem;
    }

    /* ── Search input icon ──────────────────────────────────── */
    input[type="search"] {
        padding-right: 2.5rem;
        padding-left: 0.75rem;
    }

    /* ── Breadcrumb separator ───────────────────────────────── */
    /* Unfold renders breadcrumb separators as a specific span */
    nav[aria-label="Breadcrumb"] .material-symbols-outlined {
        transform: scaleX(-1);
    }

    /* ── Pagination arrows ──────────────────────────────────── */
    .paginator .material-symbols-outlined {
        transform: scaleX(-1);
    }

    /* ── Fix for login page submit arrow ────────────────────── */
    .login .group:hover .translate-x-1 {
        --tw-translate-x: -0.25rem;
    }

    /* ── Sidebar collapse toggle ────────────────────────────── */
    #nav-toggle-icon {
        transform: scaleX(-1);
    }
}

/* ── Global RTL flip utility (opt-in) ──────────────────── */
html[dir="rtl"] .rtl-flip {
    transform: scaleX(-1);
}

/* ── Dark mode enhancements ─────────────────────────────── */
.dark {
    /* Smooth scrollbar for dark mode */
    scrollbar-color: rgb(71 85 105) rgb(15 23 42);
    scrollbar-width: thin;
}

.dark ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.dark ::-webkit-scrollbar-track {
    background: rgb(15 23 42);
}

.dark ::-webkit-scrollbar-thumb {
    background: rgb(71 85 105);
    border-radius: 3px;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: rgb(100 116 139);
}

/*
 * unfold_rtl_fixes.css
 * Pure RTL directional overrides. All other styles live in erp_design_system.css.
 */

[dir="rtl"] .sidebar-nav .nav-icon {
    margin-right: 0 !important;
    margin-left: 0.75rem !important;
}

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

[dir="rtl"] .dropdown-menu {
    right: auto !important;
    left: 0 !important;
}

[dir="rtl"] .ml-auto {
    margin-left: 0 !important;
    margin-right: auto !important;
}

[dir="rtl"] #changelist-actions-wrapper {
    margin-left: 0 !important;
    margin-right: 18rem !important;
}

/* RTL date inputs: calendar icon on left */
[dir="rtl"] input[type="date"],
[dir="rtl"] input[type="datetime-local"],
[dir="rtl"] input[type="time"] {
    padding-right: 0.5rem !important;
    padding-left: 2rem !important;
}

[dir="rtl"] .datetimeshortcuts {
    left: 1px;
}

/* RTL autocomplete dropdown */
[dir="rtl"] .unit-ac-item {
    text-align: right;
}

/* RTL KPI grid & dashboard */
[dir="rtl"] .kpi-card::before {
    /* Keep gradient direction for RTL */
    background: linear-gradient(270deg, var(--gold-400), var(--gold-600));
}

[dir="rtl"] .report-header {
    flex-direction: row-reverse;
}

/* RTL fix for Unfold material symbol dropdown arrows in the filter sidebar */
[dir="rtl"] #changelist-filter .material-symbols-outlined.absolute.right-0 {
    right: auto !important;
    left: 0 !important;
    margin-right: 0 !important;
    margin-left: 12px !important;
    display: none;
}

/* Ensure the text doesn't overlap the newly positioned left arrow */
[dir="rtl"] #changelist-filter select {
    padding-right: 0.75rem !important;
    padding-left: 2.5rem !important;
}