/*
 * Shared bidirectional layout layer.
 *
 * This file is intentionally loaded after app.css. Prefer logical properties
 * here; keep direction-specific selectors only for third-party components that
 * still expose physical left/right APIs (Bootstrap 3, AdminLTE, DataTables).
 */

html {
    text-align: start;
}

html[dir="rtl"] body,
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea {
    font-family: "Cairo", "Almarai", Tahoma, Arial, sans-serif;
}

/* Header and dropdowns */
.app-header {
    position: relative;
    z-index: 1035;
    overflow: visible;
}

.app-header-menu {
    position: relative;
}

.app-header-dropdown {
    inset-inline-end: 0;
    inset-inline-start: auto;
    max-inline-size: calc(100vw - 2rem);
    text-align: start;
    transform: none;
    z-index: 1055;
}

.app-header-menu > .dropdown-menu.app-header-dropdown {
    inset-inline-end: 0;
    inset-inline-start: auto;
}

.app-notifications-dropdown {
    inline-size: min(20rem, calc(100vw - 2rem));
    block-size: auto;
    max-block-size: min(90vh, 44rem);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.app-notifications-dropdown .menu {
    max-block-size: none;
    overflow: visible;
}

.app-notifications-dropdown .notification-li,
.app-notifications-dropdown .notification-link {
    min-inline-size: 0;
    inline-size: 100%;
}

.app-notifications-dropdown .notification-link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .25rem .625rem;
    align-items: center;
    white-space: normal;
}

.app-notifications-dropdown .notif-info {
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

.app-notifications-dropdown .time {
    grid-column: 2;
    direction: ltr;
    unicode-bidi: isolate;
    text-align: start;
}

/* Mobile sidebar drawer */
.small-view-side-active {
    display: flex;
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: min(16rem, 86vw);
    block-size: 100vh;
    block-size: 100dvh;
    z-index: 1060;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.overlay {
    position: fixed;
    inset: 0;
    inline-size: 100%;
    block-size: 100vh;
    block-size: 100dvh;
    display: none;
    background: rgba(0, 0, 0, .65);
    z-index: 1050;
}

.side-bar,
.side-bar a,
.side-bar .sidebar-menu {
    text-align: start;
}

html[dir="rtl"] .sidebar-menu li > a > .pull-right-container .fa-angle-left,
html[dir="rtl"] .sidebar-menu li > a > .fa-angle-left {
    transform: scaleX(-1);
}

/* Forms and mixed Arabic/numeric content */
.form-control,
.select2-container .select2-selection,
.select2-results__option,
.input-group,
.help-block,
.control-label {
    text-align: start;
}

input[type="number"],
input[type="tel"],
input[data-type="currency"],
.currency,
.money,
.price,
.quantity,
.sku,
.barcode,
[data-currency-symbol] {
    direction: ltr;
    unicode-bidi: isolate;
}

html[dir="rtl"] input[type="number"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[data-type="currency"] {
    text-align: right;
}

.select2-container,
.select2-dropdown,
.select2-results,
.ui-autocomplete,
.datepicker,
.daterangepicker {
    direction: inherit;
    text-align: start;
}

.select2-container--open,
.select2-dropdown,
.ui-autocomplete {
    z-index: 1070;
    max-inline-size: calc(100vw - 1rem);
}

.login-password-toggle {
    position: absolute;
    inset-block-start: 48px;
    inset-inline-end: 5px;
}

/* Tables, pagination and action menus */
.table-responsive {
    max-inline-size: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

table,
caption,
th,
td,
.dataTables_wrapper,
.dataTables_filter,
.dataTables_length,
.dataTables_info {
    text-align: start;
}

.dataTables_wrapper .row {
    max-inline-size: 100%;
}

.pagination {
    display: inline-flex;
    flex-wrap: wrap;
    padding-inline-start: 0;
}

.btn-group > .dropdown-menu,
.table-responsive .dropdown-menu {
    max-inline-size: min(20rem, calc(100vw - 1rem));
    text-align: start;
}

/* Dialogs and floating surfaces */
.modal,
.modal-content,
.popover,
.tooltip,
.swal2-container,
.sweet-alert,
.toast,
.alert {
    text-align: start;
}

.modal-dialog {
    max-inline-size: calc(100vw - 2rem);
    margin-inline: auto;
}

.modal-header .close {
    margin-inline-start: auto;
}

.modal-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .5rem;
    text-align: end;
}

.modal-footer .btn + .btn {
    margin-inline-start: 0;
}

/* Directional navigation icons only. Functional/non-directional icons stay unchanged. */
html[dir="rtl"] .breadcrumb > li + li::before,
html[dir="rtl"] .directional-icon,
html[dir="rtl"] .fa-arrow-left,
html[dir="rtl"] .fa-arrow-right,
html[dir="rtl"] .fa-chevron-left,
html[dir="rtl"] .fa-chevron-right {
    display: inline-block;
    transform: scaleX(-1);
}

/* Souq uses the application's direction but owns its top bar and drawers. */
.souq-skin .souq-topbar-dropdown {
    inset-inline-end: 0;
    inset-inline-start: auto;
    inline-size: min(20rem, calc(100vw - 2rem));
    max-inline-size: calc(100vw - 2rem);
    text-align: start;
}

.souq-topnav-backdrop,
.souq-drawer-backdrop {
    inset: 0;
}

.souq-topnav-panel,
.souq-skin .souq-filter.souq-filter-drawer {
    inset-inline-start: 0;
    inset-inline-end: auto;
}

html[dir="ltr"] .souq-topnav-panel,
html[dir="ltr"] .souq-skin .souq-filter.souq-filter-drawer {
    transform: translateX(-105%);
}

html[dir="rtl"] .souq-topnav-panel,
html[dir="rtl"] .souq-skin .souq-filter.souq-filter-drawer {
    transform: translateX(105%);
}

html[dir="rtl"] .souq-topbar-back .fa-backward {
    display: inline-block;
    transform: scaleX(-1);
}

@media (max-width: 767px) {
    .auth-login-column {
        float: none;
        inline-size: calc(100vw - 2rem);
        max-inline-size: calc(100vw - 2rem);
        margin-inline: auto;
        padding-inline: 0;
    }

    .auth-login-card,
    .auth-login-inner,
    #login-form,
    #login-form .tw-dw-form-control {
        inline-size: 100%;
        max-inline-size: 100%;
        box-sizing: border-box;
    }

    .auth-login-card {
        padding-inline: 1rem;
    }

    .auth-login-inner {
        padding-inline: 0;
    }

    #login-form input:not([type="checkbox"]),
    #login-form button[type="submit"] {
        inline-size: 100%;
        max-inline-size: 100%;
        box-sizing: border-box;
    }

    .app-header > div {
        padding-inline: .75rem;
    }

    .app-header-dropdown {
        position: fixed;
        inset-inline: 1rem;
        inset-block-start: 4.25rem;
        inline-size: auto;
        max-inline-size: none;
        max-block-size: calc(100dvh - 5.25rem);
    }

    .app-notifications-dropdown {
        inline-size: auto;
    }

    .modal-dialog {
        inline-size: auto;
        margin-block: .75rem;
    }

    .content-header > h1,
    .content-header > .breadcrumb {
        position: static;
        float: none;
        max-inline-size: 100%;
    }

    .box-header,
    .box-header > .box-tools {
        position: static;
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
    }
}

html[dir="ltr"] .modal-header .close {
    float: right;
}

html[dir="rtl"] .modal-header .close {
    float: left;
}