/*
 * RTL — арабская версия.
 *
 * Принцип: `direction: rtl` у flex-контейнера уже зеркалит
 * порядок дочерних элементов (первый → справа, последний → слева).
 * НЕ используем row-reverse — это даёт двойное зеркалирование.
 *
 * HTML-порядок шапки:
 *   1) <a>логотип-министерства</a>   → при RTL оказывается СПРАВА ✓
 *   2) <ul.top-links>…</ul>          → по центру ✓
 *   3) <a.navbar-brand>TAS-HEEL</a>  → при RTL оказывается СЛЕВА ✓
 *
 * HTML-порядок nav:
 *   [домик][About]…[Contact][серая кнопка]
 *   → при RTL: домик СПРАВА, серая кнопка СЛЕВА ✓
 */

/* ─── Базовое направление ─────────────────────────────────────── */
html[dir="rtl"],
html.site-rtl-html,
html[dir="rtl"] body,
html.site-rtl-html body {
    direction: rtl;
    text-align: right;
}

/* ─── Логотипы ────────────────────────────────────────────────── */
[dir="rtl"] .en-logo,
.site-rtl .en-logo {
    display: none !important;
}
[dir="rtl"] .ar-logo,
.site-rtl .ar-logo {
    display: inline-block !important;
}

/* ─── Шапка: три блока в ряд ─────────────────────────────────────
   При dir="rtl" flex-direction:row уже ставит первый элемент СПРАВА.
   Порядок в HTML: [логотип-министерства] [top-links] [TAS-HEEL]
   Результат при RTL:  TAS-HEEL(слева)  links(центр)  логотип(справа) ✓
   ─────────────────────────────────────────────────────────────── */
[dir="rtl"] .header-top .container,
.site-rtl .header-top .container {
    direction: rtl;
    align-items: center;
    flex-wrap: nowrap;
}

/* top-links: убираем ml-auto, растягиваем по центру */
[dir="rtl"] .header-top .top-links,
.site-rtl .header-top .top-links {
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex: 1 1 auto;
    justify-content: center;
    direction: rtl;
}

/* Разделители: справа вместо слева */
[dir="rtl"] .top-links > li + li:not(:last-child),
.site-rtl .top-links > li + li:not(:last-child) {
    border-left: none;
    border-right: 1px solid #e0e0e0;
}

/* Иконки FA в ссылках: отступ слева (иконка слева, текст справа) */
[dir="rtl"] .top-links > li .fa,
.site-rtl .top-links > li .fa {
    margin-right: 0;
    margin-left: 6px;
}

/* ─── Навигационная панель ────────────────────────────────────── */
[dir="rtl"] .tasheel-navbar .navbar-nav,
.site-rtl .tasheel-navbar .navbar-nav {
    direction: rtl;
}

[dir="rtl"] .tasheel-navbar .nav-link,
.site-rtl .tasheel-navbar .nav-link {
    text-transform: none;
    letter-spacing: normal;
}

/* Треугольник dropdown */
[dir="rtl"] .dropdown-toggle::after,
.site-rtl .dropdown-toggle::after {
    margin-right: 0.255em;
    margin-left: 0;
}

/* Бургер */
[dir="rtl"] .navbar-toggler,
.site-rtl .navbar-toggler {
    margin-left: auto;
    margin-right: 0;
}

/* Выпадающие меню */
[dir="rtl"] .dropdown-menu,
.site-rtl .dropdown-menu {
    text-align: right;
    left: auto;
    right: 0;
}
[dir="rtl"] .subdropdown-menu,
.site-rtl .subdropdown-menu {
    left: auto;
    right: 100%;
}

/* ─── Сайдбар доступности ────────────────────────────────────── */
[dir="rtl"] .accessable-sidebar,
.site-rtl .accessable-sidebar {
    left: auto;
    right: 0;
    transform-origin: right top;
}

/* ─── Форма: поля + фоновые иконки ──────────────────────────── */
[dir="rtl"] .form-control,
.site-rtl .form-control,
[dir="rtl"] select.form-control,
.site-rtl select.form-control {
    text-align: right;
}

/* Стрелка select — переносим на левый край */
[dir="rtl"] select,
.site-rtl select,
[dir="rtl"] select.form-control,
.site-rtl select.form-control {
    background-image: url("../images/arrow-down.png") !important;
    background-position: left 10px center !important;
    background-repeat: no-repeat !important;
    padding-right: 0.75rem !important;
    padding-left: 2rem !important;
}

/* Иконка календаря — переносим на левый край */
[dir="rtl"] .txtDate,
.site-rtl .txtDate,
[dir="rtl"] input.txtDate,
.site-rtl input.txtDate {
    background-image: url("../images/ic_calender.png") !important;
    background-position: left 9px top 5px !important;
    background-size: 22px 26px !important;
    background-repeat: no-repeat !important;
    padding-right: 0.75rem !important;
    padding-left: 2.5rem !important;
}

/* ─── Жёлтый alert «Fine Reduction Notice» ───────────────────── */
[dir="rtl"] .alert.alert-warning,
.site-rtl .alert.alert-warning {
    text-align: right;
}
[dir="rtl"] .alert.alert-warning > .fa-info-circle,
.site-rtl .alert.alert-warning > .fa-info-circle {
    float: right;
    margin-left: 8px;
    margin-right: 0;
}
[dir="rtl"] .alert.alert-warning h2,
.site-rtl .alert.alert-warning h2 {
    margin-left: 0 !important;
    margin-right: 8px;
}

/* ─── Блок ошибки валидации ──────────────────────────────────── */
[dir="rtl"] #validation-errors,
.site-rtl #validation-errors {
    border-left: none !important;
    border-right: 4px solid #d32f2f !important;
}
[dir="rtl"] #validation-errors button,
.site-rtl #validation-errors button {
    right: auto !important;
    left: 10px !important;
}

/* ─── Таблица штрафов ────────────────────────────────────────── */
[dir="rtl"] .table-holder .table-header .row,
.site-rtl .table-holder .table-header .row,
[dir="rtl"] .table-holder .table-body .row,
.site-rtl .table-holder .table-body .row {
    direction: rtl;
}

/* ─── Кнопка «наверх» — слева ────────────────────────────────── */
[dir="rtl"] .scrollToTop,
.site-rtl .scrollToTop {
    left: 20px;
    right: auto;
}

/* ─── Числа и email вводим LTR, выравниваем справа ─────────── */
[dir="rtl"] input[type="number"],
.site-rtl input[type="number"],
[dir="rtl"] input[type="email"],
.site-rtl input[type="email"] {
    direction: ltr;
    text-align: right;
}

/* ─── Отключаем CAPS у арабских заголовков ──────────────────── */
[dir="rtl"] .text-uppercase,
.site-rtl .text-uppercase {
    text-transform: none;
    letter-spacing: normal;
}

/* ─── center остаётся center ─────────────────────────────────── */
[dir="rtl"] .text-center,
.site-rtl .text-center {
    text-align: center !important;
}

/* ─── Мобильная шапка ────────────────────────────────────────── */
/* ── Datepicker: always LTR, never mirrored ──────────────── */
[dir="rtl"] .datepicker,
[dir="rtl"] .datepicker-dropdown,
.site-rtl   .datepicker,
.site-rtl   .datepicker-dropdown {
    direction: ltr !important;
    text-align: left !important;
}
/* Datepicker has class .dropdown-menu — block the RTL right:0 rule
   so JS inline left/top can position it correctly */
[dir="rtl"] .datepicker.dropdown-menu,
.site-rtl   .datepicker.dropdown-menu {
    right: auto !important;
}

@media (max-width: 991px) {
    [dir="rtl"] .header-top .container,
    .site-rtl .header-top .container {
        flex-wrap: wrap;
        justify-content: space-between;
    }
    [dir="rtl"] .header-top .top-links,
    .site-rtl .header-top .top-links {
        order: 3;
        flex: 0 0 100%;
        justify-content: center;
    }
}