/* ═══════════════════════════════════════════════════════════════════
   RTL Master Override  —  loaded LAST so it wins over AdminLTE 3.
   AdminLTE 3 bundles Bootstrap 4 which hardcodes:
     body { text-align: left }  ← root cause of all LTR text
     + dozens of float:left / margin-left / left:0 rules.
   Bootstrap 5 RTL (loaded before AdminLTE) is cancelled by those.
   We re-fix every affected rule here.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Date highlighting ─────────────────────────────────────────── */
.date-critical { color: #dc3545; font-weight: bold; }
.date-danger   { color: #fd7e14; font-weight: bold; }
.date-warning  { color: #997404; }
.date-info     { color: #0d6efd; }
.date-normal   { color: #198754; }

/* ─── 1. Root text direction  ───────────────────────────────────── */
/* AdminLTE/Bootstrap-4 sets  body { text-align: left }  which kills
   every RTL text even though <html dir="rtl"> is present.           */
body,
p, h1, h2, h3, h4, h5, h6,
ul, ol, li,
label, legend, th, td, caption,
.form-label, .form-text, .form-check-label,
.card-header, .card-body, .card-footer,
.alert, .badge, .nav-link, .dropdown-item,
.list-group-item, .page-item {
    text-align: right !important;
}

/* Buttons: keep centred */
button, .btn { text-align: center !important; }

/* ─── 2. Main layout: sidebar right, content offset from right ──── */
.main-sidebar {
    left: auto !important;
    right: 0 !important;
}

.content-wrapper,
.main-header.navbar {
    margin-left: 0 !important;
    margin-right: 250px !important;
}

/* Collapsed sidebar-mini */
.sidebar-mini.sidebar-collapse .content-wrapper,
.sidebar-mini.sidebar-collapse .main-header.navbar {
    margin-left: 0 !important;
    margin-right: 4.6rem !important;
}

/* ─── 3. Sidebar brand ──────────────────────────────────────────── */
.brand-link {
    text-align: right !important;
}

.brand-link .brand-image {
    float: right !important;
    margin-right: 0.5rem !important;
    margin-left: 0 !important;
}

/* ─── 4. Sidebar scrollbar & direction ─────────────────────────── */
.sidebar {
    direction: rtl;
    overflow-y: auto;
}

/* Nav-icon gap: icon sits on the RIGHT in RTL inline flow,
   so the gap toward the text (on its left) needs margin-left */
.nav-sidebar .nav-icon,
.nav-link .nav-icon {
    margin-right: 0.05rem !important;
    margin-left: 0.3rem !important;
}

/* Treeview expand arrow moves to left edge */
.nav-sidebar .nav-link > .right,
.nav-sidebar .nav-link > p > .right {
    right: auto !important;
    left: 1rem !important;
}

/* ─── 5. Navbar ─────────────────────────────────────────────────── */
/* AdminLTE Bootstrap-4 sets .dropdown-menu { left: 0 } which
   cancels Bootstrap 5 RTL's correct positioning.                    */
.dropdown-menu {
    left: auto !important;
    text-align: right !important;
}

/* Navbar user-menu dropdown opens from the left side of its trigger */
.navbar-nav .dropdown-menu {
    right: auto !important;
    left: 0 !important;
}

/* ─── 6. Cards ──────────────────────────────────────────────────── */
/* AdminLTE: .card-title { float:left } / .card-tools { float:right }*/
.card-title {
    float: right !important;
}

.card-tools {
    float: left !important;
    margin-left: -0.625rem !important;
    margin-right: 0.3rem !important;
}

/* ─── 7. Callout: left border → right border ────────────────────── */
.callout {
    border-left: 0 !important;
    border-right: 5px solid #e9ecef !important;
}
.callout-info    { border-right-color: #17a2b8 !important; }
.callout-warning { border-right-color: #ffc107 !important; }
.callout-danger  { border-right-color: #dc3545 !important; }
.callout-success { border-right-color: #28a745 !important; }

/* ─── 8. Small-box KPI cards: icon moves from right to left ─────── */
.small-box .icon > i,
.small-box .icon > svg {
    right: auto !important;
    left: 15px !important;
}

/* ─── 9. Info-box: flex row reverses in RTL, fix icon radius ─────── */
.info-box .info-box-icon {
    border-radius: 0 0.25rem 0.25rem 0 !important;
}

/* ─── 10. Breadcrumb separator ──────────────────────────────────── */
.breadcrumb-item + .breadcrumb-item::before {
    float: right !important;
    padding-right: 0 !important;
    padding-left: 0.5rem !important;
}

/* ─── 11. Tables ────────────────────────────────────────────────── */
.table th,
.table td {
    text-align: right !important;
}

/* DataTables wrapper controls */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info {
    float: right !important;
    text-align: right !important;
}

.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_paginate {
    float: left !important;
    text-align: left !important;
}

/* ─── 12. Forms ─────────────────────────────────────────────────── */
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
    text-align: right;
    direction: rtl;
}

.invalid-feedback, .valid-feedback, .form-text {
    text-align: right !important;
}

/* Mark required field asterisk */
label .text-danger { margin-right: 2px; }

/* ─── Native <select> RTL: arrow on left, text on right ───────────
   Bootstrap 5 RTL fixes .form-select correctly, but our forms use
   .form-control on <select> elements so we patch both.             */
select.form-control,
select.form-select {
    background-position: left .75rem center !important;
    padding-right: .75rem !important;
    padding-left: 2.25rem !important;
    text-align: right !important;
    direction: rtl !important;
}

/* ─── SELECT2 — bootstrap-5 theme + RTL ──────────────────────────── */
/* Container: fill the column, RTL direction */
.select2-container {
    direction: rtl !important;
    text-align: right !important;
}
.select2-container--bootstrap-5 .select2-selection {
    direction: rtl !important;
    text-align: right !important;
}
/* Single-select: arrow on left, selected text on right */
.select2-container--bootstrap-5 .select2-selection--single
    .select2-selection__rendered {
    padding-right: 0.75rem !important;
    padding-left: 2rem !important;
    direction: rtl !important;
    text-align: right !important;
}
.select2-container--bootstrap-5 .select2-selection--single
    .select2-selection__arrow {
    right: auto !important;
    left: 0.5rem !important;
}
/* Search box inside dropdown */
.select2-container--bootstrap-5 .select2-search--dropdown
    .select2-search__field {
    direction: rtl !important;
    text-align: right !important;
}
/* Dropdown list */
.select2-container--bootstrap-5 .select2-dropdown {
    direction: rtl !important;
    text-align: right !important;
}
.select2-container--bootstrap-5 .select2-results__option {
    text-align: right !important;
    direction: rtl !important;
    padding: .35rem .75rem !important;
}
/* Clear button: move to left side */
.select2-container--bootstrap-5 .select2-selection--single
    .select2-selection__clear {
    right: auto !important;
    left: 1.5rem !important;
    float: left !important;
}
/* Multi-select: tags align right */
.select2-container--bootstrap-5 .select2-selection--multiple
    .select2-selection__rendered {
    direction: rtl !important;
    flex-direction: row-reverse;
}
.select2-container--bootstrap-5 .select2-selection--multiple
    .select2-search__field {
    direction: rtl !important;
    text-align: right !important;
}

/* ─── FLATPICKR — RTL calendar + altInput ────────────────────────── */
/* The altInput is a plain <input type="text"> — ensure it looks
   identical to the original form-control it replaces.              */
.flatpickr-input.form-control[readonly] { background-color: #fff !important; }
input.form-control.flatpickr-input { display: none !important; }
/* altInput inherits .form-control — keep it RTL */
.flatpickr-input[readonly].form-control,
input.form-control.flatpickr-alt-input {
    direction: rtl !important;
    text-align: right !important;
    background-color: #fff !important;
    cursor: pointer;
}

/* Calendar popup: RTL layout */
.flatpickr-calendar {
    direction: rtl !important;
    font-family: inherit;
}
.flatpickr-calendar .flatpickr-months {
    flex-direction: row-reverse;
}
.flatpickr-calendar .flatpickr-month {
    direction: rtl;
}
.flatpickr-calendar .flatpickr-current-month {
    direction: rtl;
    text-align: center;
}
/* Swap prev/next arrows for RTL */
.flatpickr-calendar .flatpickr-prev-month {
    right: 0 !important;
    left: auto !important;
}
.flatpickr-calendar .flatpickr-next-month {
    left: 0 !important;
    right: auto !important;
}
/* Day labels and cells: right-to-left order */
.flatpickr-calendar .flatpickr-weekdays,
.flatpickr-calendar .flatpickr-weeks,
.flatpickr-calendar .flatpickr-days {
    direction: rtl !important;
}
/* Time picker: keep digit direction LTR so 12:00 reads correctly */
.flatpickr-calendar .flatpickr-time {
    direction: ltr !important;
}
.flatpickr-calendar .flatpickr-time .numInputWrapper {
    direction: ltr !important;
}

/* ─── HIJRI DATE DISPLAY ──────────────────────────────────────────── */
.hijri-display {
    display: block;
    font-size: .78rem;
    color: #6c757d;
    margin-top: 3px;
    direction: rtl;
    text-align: right;
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE OVERRIDES — tested at 1920 / 1366 / 1024 / 768 / 576 / 390 px
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Prevent horizontal page scroll ──────────────────────────────── */
body         { overflow-x: hidden; }
.wrapper     { overflow-x: hidden; min-height: 100vh; }

/* ─── Page-header h1: scale down on narrow screens ────────────────── */
.content-header h1 {
    word-break: break-word;
    font-size: clamp(1rem, 3.5vw, 1.75rem);
    line-height: 1.35;
    margin: 0;
}

/* ─── MOBILE SIDEBAR — RTL flip ────────────────────────────────────
   AdminLTE hides the sidebar on mobile with
       transform: translate(-250px, 0)    (LTR: off the left edge).
   In RTL the sidebar is pinned to the RIGHT, so we flip the sign.   */
@media (max-width: 991.98px) {
    .main-sidebar {
        transform: translateX(250px) !important;
        box-shadow: none !important;
        -webkit-transition: transform .3s ease-in-out, visibility .3s ease-in-out;
        transition:         transform .3s ease-in-out, visibility .3s ease-in-out;
    }
    body.sidebar-open .main-sidebar {
        transform: translateX(0) !important;
        box-shadow: 3px 0 8px rgba(0, 0, 0, .175) !important;
    }
    /* Kill all margin-right offsets — sidebar is now an overlay */
    .content-wrapper,
    .main-header.navbar {
        margin-right: 0 !important;
        margin-left:  0 !important;
    }
    /* Even when sidebar-collapse is toggled on mobile, keep zero margin */
    .sidebar-mini.sidebar-collapse .content-wrapper,
    .sidebar-mini.sidebar-collapse .main-header.navbar {
        margin-right: 0 !important;
    }
}

/* ─── CARD HEADER: wrap title + buttons on very small screens ──────── */
.card-header.d-flex {
    flex-wrap: wrap;
    gap: 0.35rem;
}
@media (max-width: 575.98px) {
    .card-header.d-flex > .card-title,
    .card-header.d-flex > h3.card-title {
        flex: 1 1 100%;
        margin-bottom: 0.15rem;
    }
    .card-header.d-flex > div {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem;
    }
}

/* ─── TABLES: text wraps inside cells, action column stays on one line ──
   overflow-wrap (not word-break: break-word) so words only split as a
   last resort - normal breaks at spaces/hyphens are preferred first,
   avoiding mid-word splits in Arabic names and long numbers/emails.   */
.table td,
.table th    { overflow-wrap: break-word; word-break: normal; }
.table td:last-child { white-space: nowrap; }
.table-responsive { -webkit-overflow-scrolling: touch; }

/* ─── Permission-matrix horizontal scroll (webkit momentum) ──────── */
.card-body[style*="overflow-x"] { -webkit-overflow-scrolling: touch; }

/* ─── DATATABLES controls: stack on very small screens ─────────────── */
@media (max-width: 575.98px) {
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        float: none !important;
        text-align: center !important;
        display: block;
        width: 100%;
        margin-bottom: 0.4rem;
    }
    .dataTables_wrapper .dataTables_paginate .pagination {
        justify-content: center;
        flex-wrap: wrap;
    }
}

/* ─── DATATABLES RESPONSIVE — RTL child-row indicator ─────────────
   In dtr-inline mode the expand control is on the first visible cell.
   Default CSS places the icon at left:4px (LTR). Flip it for RTL.   */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
    right: auto  !important;
    left: 4px    !important;
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {
    padding-right: 8px   !important;
    padding-left:  28px  !important;
}
/* Child-row details list */
table.dataTable > tbody > tr.child ul.dtr-details        { display: block; width: 100%; }
table.dataTable > tbody > tr.child ul.dtr-details > li   { border-bottom: 1px solid #eee; padding: .35rem 0; }
table.dataTable > tbody > tr.child ul.dtr-details .dtr-title {
    font-weight: bold;
    min-width: 90px;
    display: inline-block;
    color: #555;
}

/* ─── DASHBOARD small-box ──────────────────────────────────────────── */
@media (max-width: 399.98px) {
    .small-box .icon { display: none; }
    .small-box h3    { font-size: 1.4rem; }
    .small-box p     { font-size: .78rem; }
}

/* ─── DASHBOARD info-box ────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .info-box           { min-height: 60px; }
    .info-box-icon      { width: 52px; min-width: 52px; font-size: 1.2rem; line-height: 52px; }
    .info-box-text      { font-size: .72rem; }
    .info-box-number    { font-size: 1rem; }
}

/* ─── FORM CONTROLS: never overflow their container ─────────────────── */
.form-control,
select.form-control,
textarea.form-control,
.select2-container { max-width: 100% !important; box-sizing: border-box; }

/* ─── SIDEBAR BRAND TEXT: clip long text gracefully ─────────────────── */
.brand-link .brand-text {
    font-size: .82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 185px;
    display: inline-block;
    vertical-align: middle;
}

/* ─── NAVBAR: tighten padding on small screens ──────────────────────── */
@media (max-width: 575.98px) {
    .main-header.navbar { padding-right: .5rem !important; padding-left: .5rem !important; }
}

/* ─── LOGIN BOX: full-width on tiny screens ─────────────────────────── */
@media (max-width: 400px) {
    .login-box { width: 96vw; margin: 0 auto; }
}

/* ─── FOLLOW-UP list items: allow date badge to wrap below text ─────── */
@media (max-width: 575.98px) {
    .list-group-item.d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: .25rem;
    }
    .list-group-item.d-flex > span { margin-right: 0; }
}

/* ─── CALENDAR page org-filter ──────────────────────────────────────── */
@media (max-width: 575.98px) {
    #org-filter { display: block !important; max-width: 100% !important; width: 100% !important; }
}

/* ─── TAGIFY RTL overrides ──────────────────────────────────────────── */
.tagify { direction: rtl; text-align: right; min-height: 38px; border: 1px solid #ced4da; border-radius: .375rem; padding: 2px 6px; width: 100%; box-sizing: border-box; }
.tagify__input { direction: rtl; }
.tagify__tag { margin: 3px 0 3px 5px; }
.tagify + .form-text { margin-top: 4px; }

/* ─── PRINT STYLES ──────────────────────────────────────────────────── */
@media print {
    .main-sidebar,
    .main-header,
    .content-header,
    .dataTables_length,
    .dataTables_filter,
    .dataTables_info,
    .dataTables_paginate,
    .print-hide { display: none !important; }

    .content-wrapper {
        margin-right: 0 !important;
        margin-left: 0 !important;
        padding: 8px !important;
        padding-bottom: 0 !important;
    }

    .card { box-shadow: none !important; border: none !important; }
    .card-header { border-bottom: 1px solid #ddd !important; background: none !important; }

    .print-org-header {
        display: block !important;
        margin-bottom: 12px;
    }

    @page { size: A4; margin: 1.5cm; }
}

/* ─── REMINDER BELL DROPDOWN (navbar) ──────────────────────────────────
   Compact "مركز التذكيرات القادمة" list, moved from a full-width card
   grid on the dashboard into a minimized notification dropdown.        */
.reminder-dropdown {
    width: 360px;
    max-width: 90vw;
    padding-bottom: 0;
}

.reminder-dropdown-list {
    max-height: 380px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.reminder-item {
    border-right: 3px solid #ccc;
    white-space: normal;
    padding: .55rem .9rem;
    transition: background-color .1s;
}
.reminder-item:hover,
.reminder-item:focus { background-color: #f8f9fa; }
.reminder-item.reminder-critical { border-right-color: #dc3545; }
.reminder-item.reminder-warning  { border-right-color: #fd7e14; }
.reminder-item.reminder-upcoming { border-right-color: #0d6efd; }
.reminder-item.reminder-future   { border-right-color: #198754; }

.reminder-item-title {
    font-size: .85rem;
    line-height: 1.3;
    margin: .25rem 0;
    overflow-wrap: break-word;
    word-break: normal;
}

@media (max-width: 575.98px) {
    /* The `.navbar-nav .dropdown-menu { left: 0 !important; }` RTL fix
       anchors the menu to its trigger's left edge - but the bell sits near
       the navbar's own left edge (RTL ms-auto group), so a menu anchored
       there and sized in vw ran off the right side of narrow screens and
       got clipped. Detach it from the trigger entirely on mobile: pin it
       to the viewport with equal insets so it's always fully visible and
       centered, regardless of where the bell icon sits.                 */
    .reminder-dropdown {
        position: fixed !important;
        top: 56px !important;
        left: 10vw !important;
        right: 10vw !important;
        width: auto !important;
        max-width: none !important;
    }
    .reminder-dropdown-list { max-height: 45vh; }
}