﻿/*
  Minimal RTL tweaks so Arabic looks acceptable with Metronic Demo14 *LTR* bundles.
  + Fix: keep aside on RIGHT in RTL
  + Fix: icons inside btn-icon (no weird margins)
  + Fix: compact appointments table spacing
*/

html[dir="rtl"],
html[dir="rtl"] body {
    direction: rtl !important;
    text-align: right !important;
}

    /* مهم جداً: بعض باندلات مترونيك ترجع direction:ltr على الحاويات */
    html[dir="rtl"] #kt_app_root,
    html[dir="rtl"] .wrapper,
    html[dir="rtl"] #kt_content,
    html[dir="rtl"] #kt_content_container {
        direction: rtl !important;
    }

    /* Inputs */
    html[dir="rtl"] .form-control,
    html[dir="rtl"] .form-select,
    html[dir="rtl"] textarea {
        text-align: right !important;
    }

    /* Avoid awkward icon spacing in RTL (buttons normal) */
    html[dir="rtl"] .btn i,
    html[dir="rtl"] .btn .ki-duotone,
    html[dir="rtl"] .btn .ki-outline,
    html[dir="rtl"] .btn .bi {
        margin-inline-start: .5rem;
        margin-inline-end: 0;
    }

    /* BUT: btn-icon يجب ما يتحرك داخله شيء */
    html[dir="rtl"] .btn-icon i,
    html[dir="rtl"] .btn-icon .ki-duotone,
    html[dir="rtl"] .btn-icon .ki-outline,
    html[dir="rtl"] .btn-icon .bi {
        margin: 0 !important;
    }

    /* Validation */
    html[dir="rtl"] .field-validation-error,
    html[dir="rtl"] .text-danger {
        direction: rtl;
    }

/* =========================
   ✅ FIX: Aside RIGHT (Layout عندك عبارة عن flex داخل wrapper)
   ========================= */
@media (min-width: 992px) {
    html[dir="rtl"] .wrapper {
        padding-left: 0 !important;
        padding-right: 315px !important;
    }

    html[dir="rtl"] .aside {
        left: auto !important;
        right: 50px !important;
    }
}


/* =========================
   Appointments table enhancements
   ========================= */
.appt-table-wrap {
    max-height: 65vh;
    overflow: auto;
    border-radius: 0.75rem;
}

    /* Sticky header */
    .appt-table-wrap table thead th,
    .appt-table thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--bs-body-bg);
        box-shadow: 0 1px 0 rgba(0,0,0,.06);
    }

    /* Hover واضح */
    .appt-table.table-hover > tbody > tr:hover > *,
    .appt-table-wrap table.table-hover > tbody > tr:hover > * {
        background-color: rgba(0, 0, 0, 0.02);
    }

    /* منع تمدد الأعمدة */
    .appt-table td, .appt-table th,
    .appt-table-wrap table td, .appt-table-wrap table th {
        white-space: nowrap;
        vertical-align: middle;
    }

    /* ✅ تقليل المسافات بين النتائج (الصفوف) حتى لو ما أضفت table-sm */
    .appt-table > :not(caption) > * > *,
    .appt-table-wrap table > :not(caption) > * > * {
        padding-top: .45rem !important;
        padding-bottom: .45rem !important;
    }

    /* حجم أزرار الأيقونات (مربع مرتب) */
    .appt-table .btn.btn-icon,
    .appt-table-wrap table .btn.btn-icon {
        width: 34px;
        height: 34px;
        padding: 0 !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

        .appt-table .btn.btn-icon i,
        .appt-table-wrap table .btn.btn-icon i {
            line-height: 1;
        }
/* =========================
   Compact spacing (Tables + Cards)
   ========================= */

/* قلل المسافة بين الكروت (قسم الفلاتر + قسم النتائج) */
.card {
    margin-bottom: 1rem !important;
}

    /* قلل padding داخل جسم الكرت */
    .card .card-body {
        padding: 1rem !important;
    }

/* تصغير صفوف الجدول */
.table > :not(caption) > * > * {
    padding-top: .45rem !important;
    padding-bottom: .45rem !important;
}

/* لو جدول DataTables */
table.dataTable tbody td,
table.dataTable thead th {
    padding-top: .45rem !important;
    padding-bottom: .45rem !important;
}

/* تقليل المسافات العمودية الخاصة بمتروينك (gy-*) داخل الجدول */
.table.gy-5 > tbody > tr,
.table.gy-5 > thead > tr,
.table.gy-3 > tbody > tr,
.table.gy-3 > thead > tr {
    --bs-gutter-y: .25rem !important;
}
