/* Panel RTL overrides — loads AFTER theme.css and custom.css */

/* ─── Global ─── */
html[dir="rtl"] body {
    text-align: right;
    font-family: 'Noto Sans Arabic', Poppins, Arial, sans-serif;
}

/* ─── Sidebar (desktop — fixed layout only) ─── */
/* NOTE: For flexbox/table layout RTL already places sidebar on the right
         via the browser's built-in RTL flex/table ordering.
         Only "fixed" layout needs explicit left/right swap. */
html[dir="rtl"].fixed .sidebar-left {
    left: auto;
    right: 0;
}

html[dir="rtl"].fixed .content-body {
    margin-left: 0;
    margin-right: 300px;
}

html[dir="rtl"].fixed.sidebar-left-collapsed .content-body {
    margin-right: 73px;
}

html[dir="rtl"].fixed .page-header {
    left: 0;
    right: 300px;
}

html[dir="rtl"].fixed.sidebar-left-collapsed .page-header {
    right: 73px;
}

html[dir="rtl"].fixed.sidebar-right-opened .page-header {
    right: 0;
    margin-left: 300px;
    margin-right: 0;
}

html[dir="rtl"].fixed.sidebar-right-opened .sidebar-left {
    right: -300px;
    left: auto;
}

@media (min-width: 768px) {
    html[dir="rtl"] .sidebar-left .sidebar-header .sidebar-toggle {
        right: auto;
        left: 0;
        border-radius: 0 0 5px 0;
    }
}

/* ─── Inner wrapper ─── */
html[dir="rtl"] .inner-wrapper {
    padding-top: 0;
}

/* ─── Page header ─── */
html[dir="rtl"] .page-header {
    border-left: none;
    border-right: 1px solid #3a3a3a;
}

/* ─── Header ─── */
html[dir="rtl"] .nav-main .nav-link i {
    margin-right: 0;
    margin-left: 0.5rem;
}

html[dir="rtl"] .dropdown-menu {
    text-align: right;
}

/* ─── Forms ─── */
html[dir="rtl"] .form-check {
    padding-right: 1.5em;
    padding-left: 0;
}

html[dir="rtl"] .form-check-input {
    float: right;
    margin-right: -1.5em;
    margin-left: 0;
}

/* ─── Cards ─── */
html[dir="rtl"] .card-featured-left {
    border-left: 0;
    border-right: 3px solid #ccc;
}

html[dir="rtl"] .card-featured-right {
    border-right: 0;
    border-left: 3px solid #ccc;
}

/* ─── Login page ─── */
html[dir="rtl"] .body-sign .logo.float-left {
    float: right !important;
}

/* ─── DataTables ─── */
html[dir="rtl"] .dataTables_filter {
    right: auto;
    left: 0;
}

html[dir="rtl"] div.dataTables_wrapper div.dataTables_filter input {
    margin-right: 0.5em;
    margin-left: 0;
}

/* ─── Custom / referral components ─── */
html[dir="rtl"] .referral-status-badge {
    left: auto;
    right: 16px;
}

html[dir="rtl"] .referral-contact {
    text-align: right;
}

html[dir="rtl"] .referral-filter-input-wrap i {
    left: auto;
    right: 12px;
}

html[dir="rtl"] .referral-filter-input {
    padding: 8px 34px 8px 14px;
}

html[dir="rtl"] .d-language-col .dropdown-language img {
    margin-right: 0;
    margin-left: 3px;
}

html[dir="rtl"] .d-language-col .dropdown-language i {
    margin-left: 0;
    margin-right: 3px;
}

/* ─── Header dropdown z-index ─── */
/* Mobile'da .header position:static → z-index çalışmaz.
   Header'a position:relative + yüksek z-index vererek tüm header içeriğini
   sidebar (z-index:98) ve logo-container (z-index:99) üstüne çıkar.
   Dropdown override ekleme: tema .userbox>a.show (993) > .dropdown-menu (992)
   sıralamasını koruyoruz, sadece header stacking context'ini yükseltiyoruz. */
html[dir="rtl"] .header {
    position: relative !important;
    z-index: 1050   !important;
}

/* ─── Icon mirrors ─── */
html[dir="rtl"] .fa-backward,
html[dir="rtl"] .fa-arrow-right {
    transform: scaleX(-1);
}

html[dir="rtl"] .fa-arrow-left {
    transform: scaleX(-1);
}

/* ══════════════════════════════════════════════════════════════
   MOBILE (≤767px)
   ══════════════════════════════════════════════════════════════

   Porto tema mobile'da sidebar'ı şöyle yönetir:
     - Kapalı:  left: -100%  (ekranın solundan dışarıda)
     - csstransforms offset: margin-left: -25px
     - Açık:    margin-left: 100%  (animasyonla içeri girer)

   RTL için bu mekanizmanın sağ-taraflı karşılığı:
     - Kapalı:  right: -100%  (ekranın sağından dışarıda)
     - csstransforms offset: margin-right: -25px
     - Açık:    margin-right: 100%  (sağdan animasyonla içeri girer)

   DİKKAT: Üstteki global ".sidebar-left { right: 0 }"
   kuralı olmadığı için bu sadece mobil override'dır.
   ══════════════════════════════════════════════════════════════ */
@media only screen and (max-width: 767px) {

    /* ── Kapalı durum: sağ tarafın dışında gizle ── */
    html[dir="rtl"] .sidebar-left {
        left:  auto  !important;
        right: -100% !important;
    }

    /* RTL mobilde header (logo-container + header-right) sidebar üstünde kaldığı için
       menünün ilk öğesi header-right'ın arkasında kalmasın diye üst boşluğu artır. */
    html[dir="rtl"] .sidebar-left {
        padding-top: 120px; /* 60px logo-container + 60px header-right */
    }

    /* ── csstransforms başlangıç ofseti ── */
    html[dir="rtl"].csstransforms .sidebar-left {
        margin-right: -25px;
        margin-left:  0;
    }

    /* ── Açık (csstransforms): sağdan içeri kay ── */
    /* margin-left:100% tema kuralını sıfırla, margin-right:100% ile RTL animasyon */
    html[dir="rtl"].sidebar-left-opened.csstransforms .sidebar-left {
        margin-left:  0    !important;
        margin-right: 100%;
    }

    /* ── Açık (no-csstransforms): doğrudan sağ kenarda göster ── */
    html[dir="rtl"].sidebar-left-opened.no-csstransforms .sidebar-left {
        right: 0    !important;
        left:  auto !important;
    }

    /* ── sidebar-right açıkken sol sidebar'ı tekrar sakla ── */
    html[dir="rtl"].sidebar-left-collapsed.sidebar-right-opened .sidebar-left {
        margin-right: -300px;
        margin-left:  0;
    }

    /* ── Hamburger butonu: LTR'de right:15px → RTL'de left:15px (mobil) ── */
    html[dir="rtl"] .header .toggle-sidebar-left {
        right: auto;
        left:  15px;
    }

    /* ── Language column ── */
    html[dir="rtl"] .d-language-col {
        float: left !important;
        margin-right: 0;
        margin-left: 20px;
        border-left: none;
        border-right: 1px solid #e9ecef;
        padding-left: 0 !important;
        padding-right: 20px !important;
    }

    html[dir="rtl"] .referral-status-badge {
        right: 12px;
    }
}

@media (max-width: 480px) {
    html[dir="rtl"] .referral-status-badge {
        right: 10px;
    }
}