/* ============================================================
   Washeej Legacy UI hardening — 2026-09-15
   Load LAST after web-ux-responsive-20260907.css.
   Reuses --wj-* tokens. No new theme engine.
   ============================================================ */

html, body {
    max-width: 100%;
    overflow-x: clip;
}

.dashboard,
.dashboard__inner,
.dashboard__right,
.dashboard-body,
.dashboard-container,
.dashboard-container__body,
.av2-sessions-page,
.information-wrapper {
    min-width: 0;
    max-width: 100%;
}

.dashboard__right,
.dashboard-body,
.dashboard-container {
    overflow-x: clip;
}

.dashboard .row > [class*="col-"],
.dashboard-container .row > [class*="col-"] {
    min-width: 0;
}

/* Arabic body text must wrap, never letter-stack */
html[lang="ar"] p,
html[lang="ar"] li,
html[lang="ar"] label,
html[lang="ar"] td,
html[lang="ar"] th,
html[lang="ar"] span,
html[lang="ar"] .container-top__title,
html[lang="ar"] .container-top__desc,
html[lang="ar"] .dashboard-widget__text,
html[lang="ar"] .av2-header__title,
html[lang="ar"] .av2-header__subtitle {
    word-break: normal;
    overflow-wrap: anywhere;
    line-height: 1.65;
}

html[lang="en"] .container-top__title,
html[lang="en"] .btn,
html[lang="en"] .av2-header__title {
    overflow-wrap: anywhere;
}

code,
pre,
kbd,
.font-monospace,
.wj-wh-url,
.wj-wh-secret-once {
    word-break: break-all;
    overflow-wrap: anywhere;
    unicode-bidi: isolate;
    direction: ltr;
}

/* ========================================
   Tables — desktop table, medium scroller, no stacking
======================================== */
.dashboard-table,
.dashboard-body .table-responsive,
.dashboard-container .table-responsive,
.av2-sessions-page .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

.table-cell--nowrap,
.table-cell--phone,
.table-cell--id,
.table-cell--email,
.table-cell--date,
.dashboard-table td[dir="ltr"],
.dashboard-table th[dir="ltr"] {
    white-space: nowrap;
    unicode-bidi: isolate;
}

.dashboard-table a[href^="mailto:"],
.dashboard-table a[href^="tel:"],
.dashboard-table td code {
    white-space: nowrap;
    unicode-bidi: isolate;
    direction: ltr;
    display: inline-block;
    max-width: 100%;
}

/* Cancel unlabeled card-stack on xl/xxl — use a controlled scroller */
@media (max-width: 1199.98px) {
    .dashboard-table .table--responsive--xl,
    .dashboard-table .table--responsive--xxl,
    .av2-sessions-page .table--responsive--xl,
    .av2-sessions-page .table--responsive--xxl {
        display: table;
        width: 100%;
        min-width: 720px;
    }

    .dashboard-table .table--responsive--xl thead,
    .dashboard-table .table--responsive--xxl thead,
    .av2-sessions-page .table--responsive--xl thead,
    .av2-sessions-page .table--responsive--xxl thead {
        display: table-header-group;
    }

    .dashboard-table .table--responsive--xl tbody tr,
    .dashboard-table .table--responsive--xxl tbody tr,
    .av2-sessions-page .table--responsive--xl tbody tr,
    .av2-sessions-page .table--responsive--xxl tbody tr {
        display: table-row;
        background: transparent;
    }

    .dashboard-table .table--responsive--xl tbody tr td,
    .dashboard-table .table--responsive--xxl tbody tr td,
    .av2-sessions-page .table--responsive--xl tbody tr td,
    .av2-sessions-page .table--responsive--xxl tbody tr td {
        display: table-cell;
        max-width: none;
        justify-content: unset;
        text-align: start;
        border-bottom: 1px solid hsl(var(--wj-border));
        white-space: nowrap;
    }

    .dashboard-table .table--responsive--xl tbody tr td::before,
    .dashboard-table .table--responsive--xxl tbody tr td::before {
        display: none !important;
        content: none !important;
    }

    .dashboard-table .table--responsive--xl th:last-child,
    .dashboard-table .table--responsive--xl td:last-child,
    .dashboard-table .table--responsive--xxl th:last-child,
    .dashboard-table .table--responsive--xxl td:last-child,
    .table-actions {
        position: sticky;
        inset-inline-end: 0;
        z-index: 2;
        background: hsl(var(--wj-surface-2, var(--wj-bg)));
        box-shadow: -8px 0 12px -12px hsl(var(--wj-text) / 0.25);
    }

    [dir="rtl"] .dashboard-table .table--responsive--xl th:last-child,
    [dir="rtl"] .dashboard-table .table--responsive--xl td:last-child,
    [dir="rtl"] .dashboard-table .table--responsive--xxl th:last-child,
    [dir="rtl"] .dashboard-table .table--responsive--xxl td:last-child,
    [dir="rtl"] .table-actions {
        box-shadow: 8px 0 12px -12px hsl(var(--wj-text) / 0.25);
    }
}

@media (max-width: 767.98px) {
    .table--responsive--md tbody tr td,
    .table--responsive--lg tbody tr td {
        white-space: normal;
        min-width: 0;
    }

    .table--responsive--md tbody tr td[dir="ltr"],
    .table--responsive--lg tbody tr td[dir="ltr"],
    .table--responsive--md .table-cell--nowrap,
    .table--responsive--lg .table-cell--nowrap {
        white-space: nowrap;
    }
}

/* ========================================
   Forms + permission editor
======================================== */
.dashboard .form--control,
.dashboard-container .form--control,
.dashboard input,
.dashboard select,
.dashboard textarea {
    max-width: 100%;
}

.dashboard-container:has(#permission-form) .container-top,
.dashboard-container:has(#role-form) .container-top {
    position: sticky;
    top: 0;
    z-index: 6;
    background: hsl(var(--wj-surface-2, var(--wj-bg)));
}

.role-template-btn,
.dashboard-container:has(#permission-form) .btn {
    white-space: normal;
    line-height: 1.45;
}

/* ========================================
   Modals — always fit the viewport
======================================== */
.modal-dialog {
    max-width: min(var(--bs-modal-width, 500px), calc(100vw - 1.25rem));
    margin-inline: 0.625rem;
}

.modal-dialog.modal-lg,
.modal-dialog.modal-xl,
.modal-dialog.modal-fullscreen-sm-down {
    max-width: min(var(--bs-modal-width, 800px), calc(100vw - 1.25rem));
}

.modal-content {
    max-height: min(92vh, 100dvh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-header,
.modal-footer {
    flex: 0 0 auto;
}

.modal-body {
    overflow: auto;
    min-height: 0;
    overscroll-behavior: contain;
}

/* ========================================
   Impersonation — must not cover modal or overflow
======================================== */
.wj-impersonation-banner {
    position: sticky;
    top: 0;
    z-index: 1030;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.wj-impersonation-banner span {
    min-width: 0;
}

.modal {
    z-index: 1060;
}

.modal-backdrop {
    z-index: 1055;
}

/* ========================================
   Sidebar flyouts — never remain in a11y tree
======================================== */
.sidebar-v2-js-dropdown[hidden],
.sidebar-v2-js-tooltip[hidden] {
    display: none !important;
}

.sidebar-v2.is-collapsed .sidebar-v2-section__content[inert] {
    display: none !important;
}

/* ========================================
   Contrast — disabled / danger / success / errors
======================================== */
[data-theme="dark"] .btn:disabled,
[data-theme="dark"] .btn.disabled,
[data-theme="dark"] .form--control:disabled {
    color: hsl(215 16% 72%) !important;
    opacity: 0.78;
    border-color: hsl(217 25% 28%) !important;
}

[data-theme="dark"] .btn--danger,
[data-theme="dark"] .dashboard .btn--danger {
    background-color: hsl(0 62% 42%) !important;
    border-color: hsl(0 55% 50%) !important;
    color: #fff !important;
}

[data-theme="dark"] .badge--danger,
[data-theme="dark"] .badge.bg-danger {
    background-color: hsl(0 62% 42%) !important;
    color: #fff !important;
}

[data-theme="dark"] .badge--success,
[data-theme="dark"] .badge.bg-success {
    background-color: hsl(142 38% 32%) !important;
    color: #fff !important;
}

[data-theme="dark"] .invalid-feedback,
[data-theme="dark"] .text-danger,
[data-theme="dark"] .alert-danger {
    color: #fecaca !important;
}

[data-theme="dark"] .alert-danger {
    background: hsl(0 40% 14%) !important;
    border-color: hsl(0 40% 28%) !important;
}

[data-theme="dark"] .alert-success {
    background: hsl(142 30% 12%) !important;
    border-color: hsl(142 30% 24%) !important;
    color: #bbf7d0 !important;
}

[data-theme="light"] .dashboard .text-muted {
    color: hsl(220 10% 36%) !important;
}

:focus-visible {
    outline: 2px solid hsl(var(--wj-accent, 144 69% 42%));
    outline-offset: 2px;
}

/* Empty / filter toolbars wrap on narrow */
.body-top,
.body-top__left,
.search-form {
    min-width: 0;
    max-width: 100%;
}

.search-form .form--control {
    min-width: 0;
    flex: 1 1 12rem;
}

@media (max-width: 575.98px) {
    .modal-dialog {
        margin-inline: 0.5rem;
    }

    .av2-header,
    .av2-header__actions {
        flex-wrap: wrap;
    }

    .av2-header__actions {
        width: 100%;
    }

    .av2-btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}