/* ==============================================
   RTL SUPPORT - Modern Logical Properties
   ============================================== */

/* Базовые RTL стили */
[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

/* ===== ЛОГИЧЕСКИЕ СВОЙСТВА ДЛЯ ОТСТУПОВ ===== */
/* Используем CSS логические свойства - они автоматически адаптируются под RTL */

/* Margin inline (start = left в LTR, right в RTL) */
[dir="rtl"] .ms-1 { margin-inline-start: 0.25rem !important; margin-inline-end: 0 !important; }
[dir="rtl"] .ms-2 { margin-inline-start: 0.5rem !important; margin-inline-end: 0 !important; }
[dir="rtl"] .ms-3 { margin-inline-start: 1rem !important; margin-inline-end: 0 !important; }
[dir="rtl"] .ms-4 { margin-inline-start: 1.5rem !important; margin-inline-end: 0 !important; }
[dir="rtl"] .ms-5 { margin-inline-start: 3rem !important; margin-inline-end: 0 !important; }

[dir="rtl"] .me-1 { margin-inline-end: 0.25rem !important; margin-inline-start: 0 !important; }
[dir="rtl"] .me-2 { margin-inline-end: 0.5rem !important; margin-inline-start: 0 !important; }
[dir="rtl"] .me-3 { margin-inline-end: 1rem !important; margin-inline-start: 0 !important; }
[dir="rtl"] .me-4 { margin-inline-end: 1.5rem !important; margin-inline-start: 0 !important; }
[dir="rtl"] .me-5 { margin-inline-end: 3rem !important; margin-inline-start: 0 !important; }

/* Padding inline */
[dir="rtl"] .ps-1 { padding-inline-start: 0.25rem !important; padding-inline-end: 0 !important; }
[dir="rtl"] .ps-2 { padding-inline-start: 0.5rem !important; padding-inline-end: 0 !important; }
[dir="rtl"] .ps-3 { padding-inline-start: 1rem !important; padding-inline-end: 0 !important; }
[dir="rtl"] .ps-4 { padding-inline-start: 1.5rem !important; padding-inline-end: 0 !important; }
[dir="rtl"] .ps-5 { padding-inline-start: 3rem !important; padding-inline-end: 0 !important; }

[dir="rtl"] .pe-1 { padding-inline-end: 0.25rem !important; padding-inline-start: 0 !important; }
[dir="rtl"] .pe-2 { padding-inline-end: 0.5rem !important; padding-inline-start: 0 !important; }
[dir="rtl"] .pe-3 { padding-inline-end: 1rem !important; padding-inline-start: 0 !important; }
[dir="rtl"] .pe-4 { padding-inline-end: 1.5rem !important; padding-inline-start: 0 !important; }
[dir="rtl"] .pe-5 { padding-inline-end: 3rem !important; padding-inline-start: 0 !important; }

/* ===== ПОЗИЦИОНИРОВАНИЕ ===== */
[dir="rtl"] .start-0 { inset-inline-start: 0 !important; inset-inline-end: auto !important; }
[dir="rtl"] .end-0 { inset-inline-end: 0 !important; inset-inline-start: auto !important; }

/* ===== ТЕКСТ ===== */
[dir="rtl"] .text-start { text-align: right !important; }
[dir="rtl"] .text-end { text-align: left !important; }

/* ===== FLOAT ===== */
[dir="rtl"] .float-start { float: right !important; }
[dir="rtl"] .float-end { float: left !important; }

/* ===== BORDER RADIUS ===== */
[dir="rtl"] .rounded-start {
    border-start-start-radius: var(--bs-border-radius) !important;
    border-end-start-radius: var(--bs-border-radius) !important;
    border-start-end-radius: 0 !important;
    border-end-end-radius: 0 !important;
}

[dir="rtl"] .rounded-end {
    border-start-end-radius: var(--bs-border-radius) !important;
    border-end-end-radius: var(--bs-border-radius) !important;
    border-start-start-radius: 0 !important;
    border-end-start-radius: 0 !important;
}

/* ===== ИКОНКИ СТРЕЛОК ===== */
[dir="rtl"] .fa-chevron-left:before { content: "\f054"; }
[dir="rtl"] .fa-chevron-right:before { content: "\f053"; }
[dir="rtl"] .fa-angle-left:before { content: "\f105"; }
[dir="rtl"] .fa-angle-right:before { content: "\f104"; }
[dir="rtl"] .fa-arrow-left:before { content: "\f061"; }
[dir="rtl"] .fa-arrow-right:before { content: "\f060"; }

/* ===== DESKTOP SIDEBAR ===== */
@media (min-width: 992px) {
    [dir="rtl"] .col-lg-3.border-end {
        border-inline-end: 0 !important;
        border-inline-start: 1px solid rgba(0, 0, 0, 0.1) !important;
    }

    .theme-dark [dir="rtl"] .col-lg-3.border-end {
        border-inline-start-color: rgba(255, 255, 255, 0.1) !important;
    }
}

/* ===== MOBILE MENU ===== */
@media (max-width: 991px) {
    [dir="rtl"] .menu-box-left {
        inset-inline-start: 0 !important;
        inset-inline-end: auto !important;
        transform: translateX(100%) !important;
    }

    [dir="rtl"] .menu-box-left.menu-active {
        transform: translateX(0) !important;
    }

    [dir="rtl"] .menu-box-right {
        inset-inline-end: 0 !important;
        inset-inline-start: auto !important;
        transform: translateX(-100%) !important;
    }

    [dir="rtl"] .menu-box-right.menu-active {
        transform: translateX(0) !important;
    }

    [dir="rtl"] #menu-sidebar-left-6 {
        right: 0 !important;
        left: auto !important;
        transform: translateX(100%) !important;
    }

    [dir="rtl"] #menu-sidebar-left-6.menu-active {
        transform: translateX(0) !important;
    }
}

/* ==============================================
   FOOTER BAR - RTL FIX
   ============================================== */

/* Базовые стили footer-bar */
#footer-bar {
    display: flex;
    /* direction наследуется от html/body */
}

/* При RTL flexbox автоматически меняет порядок элементов */
/* НЕ используем row-reverse - это отменит эффект RTL! */

/* Убедимся что direction применяется к footer-bar */
[dir="rtl"] #footer-bar {
    direction: rtl;
    /* НЕ добавляем flex-direction: row-reverse! */
}

/* Элементы внутри footer-bar */
#footer-bar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Текст в RTL */
[dir="rtl"] #footer-bar a span {
    direction: rtl;
}

/* ==============================================
   LIST GROUP - SIDEBAR MENU (RTL-ready)
   ============================================== */

/* Базовая структура - flexbox автоматически переворачивается при direction: rtl */
.list-custom-small a {
    display: flex;
    align-items: center;
    padding-block: 12px;
    padding-inline: 0;
    gap: 12px;
}

/* Иконка в начале строки */
.list-custom-small a > i:first-child,
.list-custom-small a > img:first-of-type {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
}

/* Изображения проектов */
.list-custom-small a > img {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    margin: 0 !important;
}

/* Текст - занимает всё свободное место */
.list-custom-small a > span:not(.badge) {
    flex: 1 1 auto;
    min-width: 0;
}

/* Группа справа: badge, switch, стрелка */
/* Используем margin-inline-start: auto чтобы прижать к концу */
.list-custom-small a > .badge {
    flex-shrink: 0;
    margin-inline-start: auto;
}

/* Если есть badge, то у следующих элементов убираем auto margin */
.list-custom-small a > .badge ~ .badge,
.list-custom-small a > .badge ~ .custom-control,
.list-custom-small a > .badge ~ i.fa-angle-right,
.list-custom-small a > .badge ~ i.fa-angle-left {
    margin-inline-start: 8px;
}

/* Switch (переключатель темы) */
.list-custom-small a > .custom-control {
    flex-shrink: 0;
    margin-inline-start: auto;
}

/* Если есть switch, убираем auto у стрелки */
.list-custom-small a > .custom-control ~ i.fa-angle-right,
.list-custom-small a > .custom-control ~ i.fa-angle-left {
    margin-inline-start: 8px;
}

/* Стрелка в конце */
.list-custom-small a > i.fa-angle-right,
.list-custom-small a > i.fa-angle-left {
    flex-shrink: 0;
    opacity: 0.5;
    margin-inline-start: auto;
}

/* Если перед стрелкой есть badge или switch - убираем auto */
.list-custom-small a > .badge + i.fa-angle-right,
.list-custom-small a > .badge + i.fa-angle-left,
.list-custom-small a > .custom-control + i.fa-angle-right,
.list-custom-small a > .custom-control + i.fa-angle-left {
    margin-inline-start: 8px;
}

/* ==============================================
   RTL: НЕ используем row-reverse!
   Flexbox автоматически меняет направление при direction: rtl
   ============================================== */

/* Текст выравнивается вправо в RTL */
[dir="rtl"] .list-custom-small a > span:not(.badge) {
    text-align: right;
}

/* ===== USER HEADER IN SIDEBAR ===== */
/* Используем логические свойства - работает автоматически */
.ps-3.pe-3.py-3 .d-flex.align-items-center {
    gap: 12px;
}

.line-height-s {
    text-align: start;
}

[dir="rtl"] .line-height-s {
    text-align: right;
}

/* VIP иконка рядом с именем */
.vip-icon {
    margin-inline-start: 8px;
}

/* ===== IOS SWITCH - исправление позиции ===== */
.custom-control.small-switch {
    position: relative;
    display: inline-block;
}

.custom-control.small-switch .ios-input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.custom-control.small-switch .custom-control-label {
    display: block;
    width: 44px;
    height: 24px;
    background: #ccc;
    border-radius: 24px;
    position: relative;
    transition: background 0.3s;
    cursor: pointer;
}

.custom-control.small-switch .custom-control-label::after {
    content: '';
    position: absolute;
    top: 2px;
    inset-inline-start: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.custom-control.small-switch .ios-input:checked + .custom-control-label {
    background: #4cd964;
}

.custom-control.small-switch .ios-input:checked + .custom-control-label::after {
    transform: translateX(20px);
}

[dir="rtl"] .custom-control.small-switch .ios-input:checked + .custom-control-label::after {
    transform: translateX(-20px);
}

/* ===== FORMS ===== */
[dir="rtl"] .input-style {
    text-align: right;
}

[dir="rtl"] .form-label {
    padding-inline-start: 4px !important;
    padding-inline-end: 0 !important;
}

/* ===== ALERTS ===== */
[dir="rtl"] .alert {
    text-align: right;
}

[dir="rtl"] .alert .close,
[dir="rtl"] .close {
    inset-inline-start: 15px !important;
    inset-inline-end: auto !important;
}

/* ===== DROPDOWN ===== */
[dir="rtl"] .dropdown-menu {
    inset-inline-end: 0 !important;
    inset-inline-start: auto !important;
    text-align: right;
}

/* ===== CARDS ===== */
[dir="rtl"] .card {
    text-align: right;
}

/* ===== LISTS ===== */
[dir="rtl"] ul:not(.list-unstyled):not(.list-group):not(.messages),
[dir="rtl"] ol:not(.list-unstyled) {
    padding-inline-start: 40px;
    padding-inline-end: 0;
}

/* ===== INPUT GROUPS ===== */
[dir="rtl"] .input-group {
    flex-direction: row-reverse;
}

[dir="rtl"] .input-group > :first-child {
    border-start-start-radius: 0 !important;
    border-end-start-radius: 0 !important;
    border-start-end-radius: var(--bs-border-radius) !important;
    border-end-end-radius: var(--bs-border-radius) !important;
}

[dir="rtl"] .input-group > :last-child {
    border-start-end-radius: 0 !important;
    border-end-end-radius: 0 !important;
    border-start-start-radius: var(--bs-border-radius) !important;
    border-end-start-radius: var(--bs-border-radius) !important;
}

/* ===== BREADCRUMB ===== */
[dir="rtl"] .breadcrumb-item + .breadcrumb-item {
    padding-inline-start: 0.5rem;
    padding-inline-end: 0;
}

[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
    float: right;
    padding-inline-end: 0.5rem;
    padding-inline-start: 0;
}

/* ===== PAGINATION ===== */
[dir="rtl"] .page-item:first-child .page-link {
    border-start-start-radius: var(--bs-border-radius);
    border-end-start-radius: var(--bs-border-radius);
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

[dir="rtl"] .page-item:last-child .page-link {
    border-start-end-radius: var(--bs-border-radius);
    border-end-end-radius: var(--bs-border-radius);
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

/* ===== OFFCANVAS ===== */
[dir="rtl"] .offcanvas-start {
    inset-inline-start: 0;
    inset-inline-end: auto;
    border-inline-start: 0;
    border-inline-end: 1px solid rgba(0,0,0,.2);
    transform: translateX(100%);
}

[dir="rtl"] .offcanvas-end {
    inset-inline-end: 0;
    inset-inline-start: auto;
    border-inline-end: 0;
    border-inline-start: 1px solid rgba(0,0,0,.2);
    transform: translateX(-100%);
}

/* ===== CAROUSEL ===== */
[dir="rtl"] .carousel-control-prev {
    inset-inline-start: auto;
    inset-inline-end: 0;
}

[dir="rtl"] .carousel-control-next {
    inset-inline-end: auto;
    inset-inline-start: 0;
}

/* ===== PROGRESS BAR ===== */
[dir="rtl"] .progress-bar {
    direction: ltr;
}

/* ===== XMAS DECORATIONS ===== */
/* Уже используем inset-inline в шаблоне, но добавим fallback */
[dir="rtl"] .xmas-corner.top-left {
    inset-inline-start: 8px;
    inset-inline-end: auto;
}

[dir="rtl"] .xmas-corner.top-right {
    inset-inline-end: 8px;
    inset-inline-start: auto;
}

/* ===== MODAL CLOSE BUTTON ===== */
[dir="rtl"] .modal-header .btn-close {
    margin: -0.5rem auto -0.5rem -0.5rem;
}

/* ===== PHOTO MODAL ===== */
[dir="rtl"] .photo-modal .close {
    inset-inline-end: auto !important;
    inset-inline-start: 35px !important;
}

/* ===== GAP UTILITIES ===== */
/* gap работает одинаково в LTR и RTL */
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.gap-5 { gap: 3rem !important; }