/**
 * Merak HMS — Dynamic RTL / LTR + responsive polish
 * UI only. Prefer logical properties (inline-start/end).
 *
 * Convention:
 *  - Sidebar docks on inline-start → RIGHT in Arabic (rtl), LEFT in English (ltr)
 *  - Main content clears the start side
 */

/* ── Typography balance ───────────────────────────────────── */
html[dir="rtl"] {
    --merak-font: 'Cairo', 'Segoe UI', Tahoma, sans-serif;
}

html[dir="ltr"] {
    --merak-font: 'IBM Plex Sans', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

body {
    font-family: var(--merak-font);
    text-align: start;
}

/* ── Directional icon mirroring ───────────────────────────── */
html[dir="rtl"] .fa-arrow-left,
html[dir="rtl"] .fa-arrow-right,
html[dir="rtl"] .fa-chevron-left,
html[dir="rtl"] .fa-chevron-right,
html[dir="rtl"] .fa-angle-left,
html[dir="rtl"] .fa-angle-right,
html[dir="rtl"] .fa-caret-left,
html[dir="rtl"] .fa-caret-right,
html[dir="rtl"] .fa-long-arrow-alt-left,
html[dir="rtl"] .fa-long-arrow-alt-right,
html[dir="rtl"] .fa-arrow-circle-left,
html[dir="rtl"] .fa-arrow-circle-right,
html[dir="rtl"] .dir-mirror {
    transform: scaleX(-1);
}

/* Avoid double-flip when parent already mirrors */
html[dir="rtl"] .no-dir-mirror,
html[dir="rtl"] .no-dir-mirror .fa-arrow-left,
html[dir="rtl"] .no-dir-mirror .fa-arrow-right {
    transform: none !important;
}

/* ── Text / forms ─────────────────────────────────────────── */
.form-label,
.form-check,
.form-text,
.invalid-feedback,
.valid-feedback {
    text-align: start;
}

.breadcrumb {
    justify-content: flex-start;
}

.breadcrumb-item + .breadcrumb-item::before {
    float: inline-start;
}

/* ── Tables ───────────────────────────────────────────────── */
.table-responsive,
.merak-table-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table thead th {
    text-align: start;
    white-space: nowrap;
}

.table td {
    text-align: start;
    vertical-align: middle;
}

.table .text-end,
.table .text-end * {
    text-align: end !important;
}

.table-cell-truncate {
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* DataTables — follow document direction */
table.dataTable thead th,
table.dataTable thead td,
table.dataTable tfoot th,
table.dataTable tfoot td,
table.dataTable tbody th,
table.dataTable tbody td {
    text-align: start;
}

div.dataTables_wrapper div.dataTables_filter,
div.dataTables_wrapper div.dataTables_info {
    text-align: start;
}

div.dataTables_wrapper div.dataTables_length,
div.dataTables_wrapper div.dataTables_paginate {
    text-align: end;
}

@media (max-width: 767.98px) {
    div.dataTables_wrapper div.dataTables_length,
    div.dataTables_wrapper div.dataTables_filter,
    div.dataTables_wrapper div.dataTables_info,
    div.dataTables_wrapper div.dataTables_paginate {
        text-align: start;
        width: 100%;
    }
}

/* ── Cards / dashboard widgets ────────────────────────────── */
.stat-card,
.merak-stat-widget,
.card {
    height: 100%;
}

.row > [class*="col-"] > .stat-card,
.row > [class*="col-"] > .merak-stat-widget,
.row > [class*="col-"] > .card {
    width: 100%;
}

/* ── Buttons stack on narrow screens ──────────────────────── */
@media (max-width: 575.98px) {
    .d-flex.gap-2:has(> .btn),
    .merak-action-toolbar,
    .merak-page-header .d-flex:has(> .btn),
    .btn-toolbar {
        flex-wrap: wrap;
    }

    .merak-action-toolbar .btn,
    .merak-page-header .btn,
    .merak-step-nav .btn {
        flex: 1 1 auto;
        min-width: min(100%, 9rem);
    }
}

/* ── Modals ───────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .modal-dialog:not(.modal-fullscreen):not(.modal-fullscreen-sm-down) {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
}

/* ── Timeline (logical) ───────────────────────────────────── */
.merak-timeline {
    padding-inline-end: 1.5rem;
    padding-right: 0;
}

.merak-timeline::before {
    inset-inline-end: 6px;
    right: auto;
}

.merak-timeline__item {
    padding-inline-end: 1.5rem;
    padding-right: 0;
}

.merak-timeline__item::before {
    inset-inline-end: -1.5rem;
    right: auto;
}

/* ── Step wizard ──────────────────────────────────────────── */
.merak-step-wizard__step {
    text-align: start;
}

/* ── Stat accent bar ──────────────────────────────────────── */
.stat-card::before,
.merak-stat-widget::before {
    inset-inline-end: 0;
    right: auto;
}

/* ── Prevent page-level horizontal scroll ─────────────────── */
html,
body {
    overflow-x: clip;
    max-width: 100%;
}

.main-content,
.content-wrapper {
    max-width: 100%;
    min-width: 0;
}

img,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
}

/* ── Focus / a11y ─────────────────────────────────────────── */
:focus-visible {
    outline: 3px solid rgba(196, 30, 58, 0.45);
    outline-offset: 2px;
}

.btn:focus-visible,
.nav-link:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    box-shadow: var(--merak-focus-ring, 0 0 0 3px rgba(196, 30, 58, 0.28));
}

/* ── Workflow / demo previews respect dir ─────────────────── */
[dir="rtl"] .workflow-viewer,
[dir="rtl"] .laptop-preview,
[dir="rtl"] .merak-workflow {
    direction: rtl;
}

[dir="ltr"] .workflow-viewer,
[dir="ltr"] .laptop-preview,
[dir="ltr"] .merak-workflow {
    direction: ltr;
}

[dir="rtl"] .workflow-viewer .fa-arrow-right,
[dir="rtl"] .merak-workflow .fa-arrow-right,
[dir="rtl"] .workflow-viewer .fa-long-arrow-alt-right,
[dir="rtl"] .merak-workflow .fa-long-arrow-alt-right {
    transform: scaleX(-1);
}

/* ── Ultra-wide comfort ───────────────────────────────────── */
@media (min-width: 1600px) {
    .content-wrapper {
        padding-inline: clamp(1.25rem, 2.5vw, 2.75rem) !important;
    }
}

/* ── High contrast support ────────────────────────────────── */
@media (prefers-contrast: more) {
    .card,
    .merak-card,
    .merak-form-section,
    .table {
        border-color: #000 !important;
    }

    .btn-primary {
        outline: 1px solid #000;
    }
}