/* =============================================================
   Installment Management — Admin UI design system (Phase A)
   Built on top of Bootstrap 5.3 RTL. RTL/Arabic friendly.
   ============================================================= */

:root {
    /* Brand palette */
    --brand-50:  #eef2ff;
    --brand-100: #e0e7ff;
    --brand-200: #c7d2fe;
    --brand-300: #a5b4fc;
    --brand-400: #818cf8;
    --brand-500: #6366f1;
    --brand-600: #4f46e5;
    --brand-700: #4338ca;
    --brand-800: #3730a3;

    /* Neutrals */
    --ink-50:  #f8fafc;
    --ink-100: #f1f5f9;
    --ink-200: #e2e8f0;
    --ink-300: #cbd5e1;
    --ink-400: #94a3b8;
    --ink-500: #64748b;
    --ink-600: #475569;
    --ink-700: #334155;
    --ink-800: #1e293b;
    --ink-900: #0f172a;

    /* Surfaces */
    --body-bg: #f5f7fb;
    --surface: #ffffff;
    --surface-muted: #f8fafc;

    /* Borders / shadows */
    --border: #e5e7eb;
    --border-strong: #d1d5db;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 1px rgba(15, 23, 42, .03);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, .06), 0 2px 4px rgba(15, 23, 42, .04);
    --shadow-lg: 0 20px 40px -16px rgba(15, 23, 42, .18), 0 8px 20px -10px rgba(15, 23, 42, .10);

    /* Status palette */
    --tone-success-bg: #ecfdf5;  --tone-success-fg: #065f46;  --tone-success-br: #a7f3d0;
    --tone-info-bg:    #eff6ff;  --tone-info-fg:    #1d4ed8;  --tone-info-br:    #bfdbfe;
    --tone-warn-bg:    #fffbeb;  --tone-warn-fg:    #92400e;  --tone-warn-br:    #fde68a;
    --tone-danger-bg:  #fef2f2;  --tone-danger-fg:  #991b1b;  --tone-danger-br:  #fecaca;
    --tone-neutral-bg: #f1f5f9;  --tone-neutral-fg: #334155;  --tone-neutral-br: #e2e8f0;

    /* Layout metrics */
    --sidebar-width: 18rem; /* 288px — fixed sidebar on the RTL inline start edge */
    --sidebar-width-collapsed: 0px;
    --topbar-height: 60px;
    --radius-sm: .5rem;
    --radius:    .75rem;
    --radius-lg: 1rem;

    /* Bootstrap overrides via CSS vars */
    --bs-primary: var(--brand-600);
    --bs-primary-rgb: 79, 70, 229;
    --bs-link-color: var(--brand-700);
    --bs-link-hover-color: var(--brand-800);
    --bs-body-color: var(--ink-800);
    --bs-body-bg: var(--body-bg);
    --bs-border-color: var(--border);
    --bs-border-radius: var(--radius);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-lg);
}

/* ---------- Base typography ---------- */
html, body {
    min-height: 100%;
    height: auto;
    overflow-x: hidden;
}
body {
    font-family: 'Cairo', 'Tajawal', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--body-bg);
    color: var(--ink-800);
    font-size: .95rem;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { color: var(--ink-900); font-weight: 700; }
.text-muted { color: var(--ink-500) !important; }
.text-secondary { color: var(--ink-600) !important; }
small, .small { color: var(--ink-500); }

.mono {
    direction: ltr;
    unicode-bidi: embed;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}
code, .page-key {
    background: var(--ink-100);
    color: var(--ink-700);
    border-radius: .375rem;
    padding: .1rem .45rem;
    font-size: .82em;
    direction: ltr;
    unicode-bidi: embed;
}

/* ---------- Bootstrap primary recolor ---------- */
.btn-primary {
    background-color: var(--brand-600);
    border-color: var(--brand-600);
    box-shadow: none;
}
.btn-primary:hover, .btn-primary:focus-visible {
    background-color: var(--brand-700);
    border-color: var(--brand-700);
}
.btn-primary:disabled, .btn-primary.disabled {
    background-color: var(--brand-300);
    border-color: var(--brand-300);
}
.btn-outline-primary {
    color: var(--brand-700);
    border-color: var(--brand-300);
}
.btn-outline-primary:hover, .btn-outline-primary:focus-visible {
    background-color: var(--brand-600);
    border-color: var(--brand-600);
    color: #fff;
}
.btn-link { color: var(--brand-700); }
.text-primary { color: var(--brand-700) !important; }
.bg-primary { background-color: var(--brand-600) !important; }
.border-primary { border-color: var(--brand-600) !important; }

/* ---------- Buttons (consistent across sizes) ---------- */
.btn {
    --bs-btn-border-radius: .55rem;
    font-weight: 500;
    letter-spacing: 0;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn-sm { --bs-btn-padding-y: .28rem; --bs-btn-padding-x: .65rem; font-size: .82rem; }
.btn:focus-visible { box-shadow: 0 0 0 .2rem rgba(99, 102, 241, .25); }
.btn i.bi { vertical-align: -.1em; }

/* Row of small action buttons in tables */
.btn-row { display: inline-flex; gap: .25rem; flex-wrap: wrap; }
.btn-row .btn { padding-inline: .55rem; }
td .btn + .btn, td form + .btn, td .btn + form, td form + form { margin-inline-start: .25rem; }

/* ---------- Cards ---------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.card-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    color: var(--ink-800);
    padding: .85rem 1rem;
}
.card-footer {
    background: var(--surface);
    border-top: 1px solid var(--border);
    padding: .85rem 1rem;
}
.card-body { padding: 1rem; }
.card.is-soft { background: var(--surface-muted); border-style: dashed; }

/* ---------- Forms ---------- */
.form-label { font-weight: 500; color: var(--ink-700); margin-bottom: .35rem; }
.form-label.required::after, label.required::after { content: " *"; color: #dc2626; }
.form-control, .form-select {
    border-color: var(--border-strong);
    border-radius: .55rem;
    padding: .5rem .75rem;
    background-color: #fff;
    color: var(--ink-900);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus {
    border-color: var(--brand-400);
    box-shadow: 0 0 0 .2rem rgba(99, 102, 241, .18);
}
.form-control::placeholder { color: var(--ink-400); }
.form-control-lg, .form-select-lg { padding: .65rem .9rem; }
textarea.form-control { min-height: 4.5rem; }
.input-group-text {
    background: var(--ink-100);
    border-color: var(--border-strong);
    color: var(--ink-600);
}
.form-text { color: var(--ink-500); }
.invalid-feedback { font-size: .82rem; }
.is-invalid {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 .15rem rgba(220, 38, 38, .12);
}
.form-check-input:checked {
    background-color: var(--brand-600);
    border-color: var(--brand-600);
}

/* Reusable section header inside forms */
.form-section-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--ink-700);
    font-weight: 600;
    font-size: .95rem;
    margin: .25rem 0 .85rem;
    padding-bottom: .55rem;
    border-bottom: 1px dashed var(--border);
}
.form-section-title i.bi { color: var(--brand-600); }

/* ---------- Tables ---------- */
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ink-800);
    color: var(--ink-800);
    margin-bottom: 0;
}
.table > :not(caption) > * > * { padding: .7rem .75rem; }
.table thead th {
    background: var(--surface-muted);
    color: var(--ink-600);
    font-weight: 600;
    font-size: .82rem;
    text-transform: none;
    letter-spacing: 0;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.table tbody tr { border-bottom: 1px solid var(--border); }
.table tbody tr:last-child { border-bottom: none; }
.table-hover > tbody > tr:hover > * { background-color: var(--ink-50); }
.table.table-sm > :not(caption) > * > * { padding: .5rem .65rem; }
.table-empty {
    color: var(--ink-500);
    padding: 2.5rem 1rem;
    text-align: center;
}
.table .badge { font-weight: 500; }

/* ---------- Status badge palette (Arabic statuses) ---------- */
.badge { font-weight: 500; padding: .35em .6em; border-radius: 999px; font-size: .76rem; }
.badge-tone {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid transparent;
    font-weight: 500;
    line-height: 1;
}
.badge-tone::before {
    content: "";
    width: .42rem;
    height: .42rem;
    border-radius: 999px;
    background: currentColor;
    opacity: .85;
}
.tone-success  { background: var(--tone-success-bg);  color: var(--tone-success-fg);  border-color: var(--tone-success-br); }
.tone-info     { background: var(--tone-info-bg);     color: var(--tone-info-fg);     border-color: var(--tone-info-br); }
.tone-warning  { background: var(--tone-warn-bg);     color: var(--tone-warn-fg);     border-color: var(--tone-warn-br); }
.tone-danger   { background: var(--tone-danger-bg);   color: var(--tone-danger-fg);   border-color: var(--tone-danger-br); }
.tone-neutral  { background: var(--tone-neutral-bg);  color: var(--tone-neutral-fg);  border-color: var(--tone-neutral-br); }
.tone-primary  { background: var(--brand-50);         color: var(--brand-700);        border-color: var(--brand-200); }

/* Compatible aliases for existing inline classes used across views */
.badge.bg-success-subtle.text-success-emphasis,
.badge.bg-success { background: var(--tone-success-bg) !important; color: var(--tone-success-fg) !important; }
.badge.bg-danger-subtle.text-danger-emphasis,
.badge.bg-danger  { background: var(--tone-danger-bg)  !important; color: var(--tone-danger-fg)  !important; }
.badge.bg-warning-subtle.text-warning-emphasis,
.badge.bg-warning { background: var(--tone-warn-bg)    !important; color: var(--tone-warn-fg)    !important; }
.badge.bg-primary-subtle.text-primary-emphasis,
.badge.bg-primary { background: var(--brand-50)        !important; color: var(--brand-700)       !important; }
.badge.bg-info-subtle.text-info-emphasis,
.badge.bg-info    { background: var(--tone-info-bg)    !important; color: var(--tone-info-fg)    !important; }
.badge.bg-secondary-subtle.text-secondary-emphasis,
.badge.bg-secondary, .badge.bg-light { background: var(--tone-neutral-bg) !important; color: var(--tone-neutral-fg) !important; }

/* ---------- Alerts ---------- */
.alert {
    border-radius: var(--radius);
    border: 1px solid transparent;
    padding: .85rem 1rem;
    display: flex;
    gap: .65rem;
    align-items: flex-start;
}
.alert > .bi { font-size: 1.1rem; line-height: 1; margin-top: .15rem; }
.alert-success { background: var(--tone-success-bg); color: var(--tone-success-fg); border-color: var(--tone-success-br); }
.alert-danger  { background: var(--tone-danger-bg);  color: var(--tone-danger-fg);  border-color: var(--tone-danger-br); }
.alert-warning { background: var(--tone-warn-bg);    color: var(--tone-warn-fg);    border-color: var(--tone-warn-br); }
.alert-info    { background: var(--tone-info-bg);    color: var(--tone-info-fg);    border-color: var(--tone-info-br); }
.alert-secondary { background: var(--tone-neutral-bg); color: var(--tone-neutral-fg); border-color: var(--tone-neutral-br); }
.alert ul { margin: 0; padding-inline-start: 1.25rem; }
.alert ul li + li { margin-top: .2rem; }

/* ---------- Pagination (Bootstrap 5 RTL) ---------- */
.pagination {
    --bs-pagination-color: var(--ink-600);
    --bs-pagination-bg: #fff;
    --bs-pagination-border-color: var(--border);
    --bs-pagination-hover-color: var(--brand-700);
    --bs-pagination-hover-bg: var(--brand-50);
    --bs-pagination-hover-border-color: var(--brand-200);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: var(--brand-600);
    --bs-pagination-active-border-color: var(--brand-600);
    --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(99,102,241,.18);
    --bs-pagination-border-radius: .55rem;
    gap: .25rem;
    margin: 0;
}
.pagination .page-link { border-radius: .55rem; min-width: 2.25rem; text-align: center; }

/* ---------- Page header ---------- */
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1rem;
    margin-bottom: 1.25rem;
}
.page-header .ph-title { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.page-header .ph-title h1,
.page-header .ph-title .ph-title-text {
    font-size: 1.35rem;
    line-height: 1.3;
    margin: 0;
    color: var(--ink-900);
    font-weight: 700;
}
.page-header .ph-subtitle { color: var(--ink-500); font-size: .9rem; }
.page-header .ph-actions { display: flex; flex-wrap: wrap; gap: .4rem; }

/* ---------- Empty state ---------- */
.empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--ink-500);
}
.empty-state .es-icon {
    width: 56px; height: 56px;
    margin: 0 auto .75rem;
    border-radius: 999px;
    background: var(--ink-100);
    color: var(--ink-500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}
.empty-state .es-title { color: var(--ink-700); font-weight: 600; margin-bottom: .25rem; }
.empty-state .es-desc  { color: var(--ink-500); font-size: .9rem; }
.empty-state .es-action { margin-top: 1rem; }

/* ---------- Filter card ---------- */
.filter-card { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.filter-card .card-body { padding: .85rem 1rem; }
.filter-card .filter-actions { display: flex; gap: .4rem; align-items: end; }
.filter-card .form-label { font-size: .82rem; color: var(--ink-500); margin-bottom: .25rem; }

/* =============================================================
   Admin shell (sidebar + topbar + content)
   ============================================================= */
.admin-shell {
    min-height: 100vh;
    box-sizing: border-box;
}

/* Sidebar */
.admin-sidebar {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background: var(--ink-900);
    color: var(--ink-200);
    overflow: hidden;
    z-index: 1040;
    border-inline-end: 1px solid rgba(255, 255, 255, .06);
    display: flex;
    flex-direction: column;
}
.admin-sidebar .as-brand {
    padding: 1rem 1.1rem;
    display: flex;
    align-items: center;
    gap: .6rem;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    color: #fff;
    line-height: 1.25;
}
.admin-sidebar .as-brand-mark {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    box-shadow: 0 4px 12px rgba(99, 102, 241, .35);
}
.admin-sidebar .as-brand-text { font-weight: 700; font-size: .98rem; color: #fff; }
.admin-sidebar .as-brand-sub  { font-size: .72rem; color: #94a3b8; }

.admin-sidebar .as-nav {
    padding: .75rem 0 1.5rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, .45) transparent;
}
.admin-sidebar .as-nav::-webkit-scrollbar { width: 6px; }
.admin-sidebar .as-nav::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, .45);
    border-radius: 999px;
}
.admin-sidebar .as-nav::-webkit-scrollbar-track { background: transparent; }
.admin-sidebar .as-group-label {
    padding: .85rem 1.1rem .35rem;
    font-size: .72rem;
    color: #94a3b8;
    font-weight: 600;
    letter-spacing: .02em;
    display: flex;
    align-items: center;
    gap: .45rem;
}
.admin-sidebar .as-group-label .bi { font-size: .85rem; opacity: .85; }

.admin-sidebar .as-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .5rem 1.1rem;
    color: #cbd5e1;
    border-inline-start: 3px solid transparent;
    font-size: .9rem;
    text-decoration: none;
    transition: background-color .12s ease, color .12s ease, border-color .12s ease;
    white-space: nowrap;
}
.admin-sidebar .as-link i.bi {
    font-size: 1rem;
    width: 1.1rem;
    text-align: center;
    color: #94a3b8;
}
.admin-sidebar .as-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, .05);
}
.admin-sidebar .as-link:hover i.bi { color: var(--brand-300); }
.admin-sidebar .as-link.active {
    color: #fff;
    background: rgba(99, 102, 241, .18);
    border-inline-start-color: var(--brand-400);
    font-weight: 600;
}
.admin-sidebar .as-link.active i.bi { color: var(--brand-300); }

.admin-sidebar .as-footer {
    padding: .85rem 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, .06);
    color: #94a3b8;
    font-size: .76rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

/* Sidebar backdrop (mobile) */
.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: 1035;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}
.sidebar-backdrop.show { opacity: 1; pointer-events: auto; }

/* Main column (topbar + content) beside the sidebar at RTL inline-start. */
.admin-workspace {
    margin-inline-start: var(--sidebar-width);
    margin-inline-end: 0;
    width: calc(100% - var(--sidebar-width));
    max-width: calc(100% - var(--sidebar-width));
    min-height: 100vh;
    min-width: 0;
    box-sizing: border-box;
}

/* Top bar */
.admin-topbar {
    position: sticky;
    top: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    height: var(--topbar-height);
    background: #fff;
    border-bottom: 1px solid var(--border);
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem;
    box-shadow: var(--shadow-sm);
}
.admin-topbar .tb-left, .admin-topbar .tb-right { display: flex; align-items: center; gap: .6rem; }
.admin-topbar .tb-page-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ink-800);
}
.admin-topbar .tb-page-sub { font-size: .8rem; color: var(--ink-500); }
.admin-topbar .tb-menu-btn {
    width: 38px; height: 38px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--ink-600);
}
.admin-topbar .tb-menu-btn:hover { background: var(--ink-50); }

.tb-user {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .25rem .55rem .25rem .25rem;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--ink-700);
    border-radius: 999px;
    cursor: pointer;
}
.tb-user:hover { background: var(--ink-50); }
.tb-user .tb-avatar {
    width: 32px; height: 32px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .8rem;
}
.tb-user .tb-name { font-weight: 600; font-size: .85rem; color: var(--ink-800); }
.dropdown-menu { border-radius: .65rem; border-color: var(--border); box-shadow: var(--shadow-lg); }
.dropdown-item { padding: .5rem .9rem; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--ink-50); color: var(--ink-900); }
.dropdown-item.text-danger:hover { background: var(--tone-danger-bg); color: var(--tone-danger-fg); }

/* Main content */
.admin-main {
    min-height: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.admin-content {
    padding: 1.25rem 1.5rem 2.5rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    box-sizing: border-box;
}

/* Tablets / mobiles: sidebar slides in over content */
@media (max-width: 991.98px) {
    .admin-sidebar {
        transform: translateX(100%);
        transition: transform .2s ease;
        box-shadow: var(--shadow-lg);
    }
    .admin-sidebar.show { transform: translateX(0); }
    .admin-workspace {
        margin-inline-start: 0;
        width: 100%;
        max-width: 100%;
    }
    .admin-content { padding: 1rem; }
}

/* =============================================================
   Guest / Login layout
   ============================================================= */
.guest-bg {
    min-height: 100vh;
    background:
        radial-gradient(1100px 500px at 100% -10%, rgba(99,102,241,.10), transparent 60%),
        radial-gradient(900px 500px at 0% 110%, rgba(99,102,241,.08), transparent 60%),
        var(--body-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.guest-card {
    width: 100%;
    max-width: 440px;
}
.guest-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    margin-bottom: 1.25rem;
    text-align: center;
}
.guest-brand-mark {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 10px 24px rgba(99, 102, 241, .25);
}
.guest-brand-text { font-weight: 700; font-size: 1.05rem; color: var(--ink-900); line-height: 1.2; }
.guest-brand-sub  { font-size: .8rem; color: var(--ink-500); }
.guest-card .card { box-shadow: var(--shadow-lg); border-color: var(--border); }
.guest-card .card-body { padding: 1.5rem; }
.guest-footer {
    text-align: center;
    margin-top: 1rem;
    color: var(--ink-500);
    font-size: .8rem;
}

/* =============================================================
   Print layout
   ============================================================= */
.print-doc {
    font-family: 'Cairo', 'Tajawal', system-ui, sans-serif;
    color: var(--ink-900);
}
.print-doc h1 { font-size: 1.25rem; margin: 0 0 .75rem; }
.print-doc .muted { color: var(--ink-500); font-size: .9rem; }
.print-doc table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: .92rem; }
.print-doc th, .print-doc td {
    border: 1px solid var(--border-strong);
    padding: .45rem .55rem;
    text-align: right;
}
.print-doc th { background: var(--ink-100); color: var(--ink-700); }
@media print {
    .no-print { display: none !important; }
    body { background: #fff !important; }
}

/* =============================================================
   Utility
   ============================================================= */
.whitespace-pre-wrap { white-space: pre-wrap; }
.divider { border-top: 1px solid var(--border); margin: 1rem 0; }
.text-money { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: embed; }
.kbd, kbd {
    background: var(--ink-100);
    color: var(--ink-700);
    border: 1px solid var(--border-strong);
    border-radius: .35rem;
    padding: .05rem .35rem;
    font-size: .8em;
}

/* Focus visible improvement everywhere */
:focus-visible {
    outline: 2px solid rgba(99, 102, 241, .45);
    outline-offset: 2px;
}

/* =============================================================
   Phase B — Business pages styles
   ============================================================= */

/* ---------- KPI / Stat cards ---------- */
.kpi {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1rem;
    display: flex;
    align-items: stretch;
    gap: .85rem;
    min-height: 100%;
    position: relative;
    overflow: hidden;
}
.kpi::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    width: 4px;
    background: var(--brand-500);
    border-radius: 0 var(--radius) var(--radius) 0;
}
.kpi-icon {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    border-radius: .65rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand-50);
    color: var(--brand-700);
    font-size: 1.15rem;
}
.kpi-body { flex: 1 1 auto; min-width: 0; }
.kpi-label { color: var(--ink-500); font-size: .78rem; line-height: 1.2; margin-bottom: .15rem; }
.kpi-value { color: var(--ink-900); font-weight: 700; font-size: 1.4rem; line-height: 1.2; }
.kpi-value.is-money { direction: ltr; unicode-bidi: embed; font-variant-numeric: tabular-nums; }
.kpi-sub { color: var(--ink-500); font-size: .78rem; margin-top: .2rem; }

/* Tone variants */
.kpi.tone-success::before { background: #10b981; }
.kpi.tone-success .kpi-icon { background: var(--tone-success-bg); color: var(--tone-success-fg); }
.kpi.tone-success .kpi-value { color: var(--tone-success-fg); }

.kpi.tone-danger::before { background: #ef4444; }
.kpi.tone-danger .kpi-icon { background: var(--tone-danger-bg); color: var(--tone-danger-fg); }
.kpi.tone-danger .kpi-value { color: var(--tone-danger-fg); }

.kpi.tone-warning::before { background: #f59e0b; }
.kpi.tone-warning .kpi-icon { background: var(--tone-warn-bg); color: var(--tone-warn-fg); }
.kpi.tone-warning .kpi-value { color: var(--tone-warn-fg); }

.kpi.tone-info::before { background: #3b82f6; }
.kpi.tone-info .kpi-icon { background: var(--tone-info-bg); color: var(--tone-info-fg); }
.kpi.tone-info .kpi-value { color: var(--tone-info-fg); }

.kpi.tone-neutral::before { background: var(--ink-400); }
.kpi.tone-neutral .kpi-icon { background: var(--ink-100); color: var(--ink-600); }
.kpi.tone-neutral .kpi-value { color: var(--ink-800); }

.kpi.tone-primary::before { background: var(--brand-500); }
.kpi.tone-primary .kpi-icon { background: var(--brand-50); color: var(--brand-700); }
.kpi.tone-primary .kpi-value { color: var(--brand-700); }

/* Compact kpi (used inside cards or for many stats) */
.kpi.kpi-sm { padding: .75rem .85rem; min-height: auto; }
.kpi.kpi-sm .kpi-icon { width: 36px; height: 36px; font-size: 1rem; }
.kpi.kpi-sm .kpi-value { font-size: 1.1rem; }

/* ---------- Section / sub-section titles ---------- */
.section-title {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: var(--ink-900);
    font-weight: 700;
    font-size: 1rem;
    margin: 1.25rem 0 .65rem;
}
.section-title i.bi { color: var(--brand-600); font-size: 1.05rem; }
.section-title .section-title-sub {
    margin-inline-start: auto;
    font-weight: 400;
    color: var(--ink-500);
    font-size: .82rem;
}

/* ---------- Info rows (definition-list style) ---------- */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .75rem 1rem;
}
.info-row { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.info-row .info-label { color: var(--ink-500); font-size: .78rem; }
.info-row .info-value {
    color: var(--ink-800);
    font-weight: 500;
    word-break: break-word;
}
.info-row .info-value.is-money,
.info-row .info-value.is-mono {
    direction: ltr;
    unicode-bidi: embed;
    font-variant-numeric: tabular-nums;
    text-align: start;
}
.info-row .info-value.empty { color: var(--ink-400); }

/* DL-style info rows where label takes a fixed column */
.info-dl { margin: 0; }
.info-dl > dt { color: var(--ink-500); font-weight: 500; font-size: .82rem; padding-block: .35rem; }
.info-dl > dd { margin: 0; padding-block: .35rem; color: var(--ink-800); }

/* ---------- Money formatting helpers ---------- */
.money {
    direction: ltr;
    unicode-bidi: embed;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    white-space: nowrap;
}
.money-success { color: var(--tone-success-fg); }
.money-danger  { color: var(--tone-danger-fg); }
.money-warning { color: var(--tone-warn-fg); }
.money-primary { color: var(--brand-700); }
.money-muted   { color: var(--ink-500); }
.money-lg { font-size: 1.4rem; font-weight: 700; }
.money-md { font-size: 1.05rem; font-weight: 600; }

/* ---------- Installment timeline / mini schedule ---------- */
.schedule-table tbody tr.row-paid    { background: rgba(16, 185, 129, .04); }
.schedule-table tbody tr.row-partial { background: rgba(245, 158, 11, .04); }
.schedule-table tbody tr.row-late    { background: rgba(239, 68, 68, .05); }
.schedule-table tbody tr.row-cancelled td { color: var(--ink-400) !important; text-decoration: line-through; }

/* ---------- Receipt / printable card on screen ---------- */
.receipt-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 1.5rem;
}
.receipt-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.receipt-header .rc-brand {
    font-weight: 700;
    color: var(--ink-900);
    font-size: 1rem;
}
.receipt-header .rc-doc-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--brand-700);
}
.receipt-header .rc-code {
    direction: ltr; font-variant-numeric: tabular-nums; font-weight: 600;
    color: var(--ink-700);
    background: var(--ink-50);
    border: 1px solid var(--border);
    border-radius: .5rem;
    padding: .25rem .55rem;
}
.receipt-block {
    background: var(--surface-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .85rem 1rem;
}
.receipt-amount {
    text-align: center;
    background: linear-gradient(135deg, var(--brand-50), #fff);
    border: 1px dashed var(--brand-300);
    border-radius: var(--radius);
    padding: 1rem;
    margin: 1rem 0;
}
.receipt-amount .ra-label { color: var(--ink-500); font-size: .85rem; margin-bottom: .25rem; }
.receipt-amount .ra-value { color: var(--brand-700); font-weight: 700; font-size: 1.85rem; direction: ltr; }

.sig-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    margin-top: 1.5rem;
}
.sig-box {
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    min-height: 88px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: .65rem;
    color: var(--ink-600);
    font-weight: 600;
    background: #fff;
    text-align: center;
}

/* ---------- Watermark for cancelled docs ---------- */
.is-cancelled-doc {
    position: relative;
}
.is-cancelled-doc::after {
    content: "ملغاة";
    position: absolute;
    top: 50%; right: 50%;
    transform: translate(50%, -50%) rotate(-22deg);
    font-size: 6rem;
    font-weight: 800;
    color: rgba(239, 68, 68, .08);
    pointer-events: none;
    user-select: none;
    letter-spacing: .2em;
}

/* ---------- Quick tabs (used for installment range nav) ---------- */
.tab-pills { display: inline-flex; flex-wrap: wrap; gap: .3rem; background: var(--ink-100); padding: .25rem; border-radius: .65rem; }
.tab-pills .nav-link, .tab-pills > a {
    color: var(--ink-600);
    padding: .35rem .7rem;
    border-radius: .5rem;
    font-size: .85rem;
    text-decoration: none;
    transition: background-color .12s ease, color .12s ease;
}
.tab-pills .nav-link:hover, .tab-pills > a:hover { color: var(--brand-700); background: #fff; }
.tab-pills .nav-link.active, .tab-pills > a.active {
    background: #fff;
    color: var(--brand-700);
    box-shadow: var(--shadow-sm);
    font-weight: 600;
}

/* ---------- Print A4 (.print-doc improvements) ---------- */
.print-doc {
    max-width: 21cm;
    margin: 0 auto;
    background: #fff;
    color: var(--ink-900);
    padding: 1rem 1.25rem;
}
.print-doc .pd-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: .65rem;
    border-bottom: 2px solid var(--ink-800);
    margin-bottom: .85rem;
}
.print-doc .pd-brand { font-weight: 800; font-size: 1.05rem; }
.print-doc .pd-brand-sub { font-size: .82rem; color: var(--ink-500); }
.print-doc .pd-title {
    font-size: 1.15rem;
    font-weight: 700;
    text-align: center;
    margin: .5rem 0 .85rem;
}
.print-doc .pd-section {
    margin-bottom: .85rem;
    page-break-inside: avoid;
}
.print-doc .pd-section-title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--ink-800);
    border-bottom: 1px solid var(--ink-300);
    padding-bottom: .25rem;
    margin-bottom: .45rem;
}
.print-doc .pd-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .35rem .85rem;
    font-size: .88rem;
}
.print-doc .pd-grid .pdg-cell { display: flex; gap: .35rem; }
.print-doc .pd-grid .pdg-cell .label { color: var(--ink-500); min-width: 110px; }
.print-doc .pd-grid .pdg-cell .value { color: var(--ink-900); font-weight: 600; word-break: break-word; }
.print-doc .pd-meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--ink-500);
    font-size: .82rem;
    margin-bottom: .35rem;
}
.print-doc .pd-totals {
    width: auto;
    margin-inline-start: auto;
    min-width: 60%;
}
.print-doc .pd-totals th { width: 55%; background: var(--ink-50); }
.print-doc .pd-amount {
    display: inline-block;
    background: var(--brand-50);
    color: var(--brand-700);
    border: 1px dashed var(--brand-300);
    padding: .45rem .85rem;
    border-radius: .55rem;
    font-weight: 700;
    direction: ltr;
}
.print-doc .pd-footer-note {
    margin-top: 1rem;
    padding-top: .65rem;
    border-top: 1px dashed var(--border-strong);
    color: var(--ink-500);
    font-size: .82rem;
}
.print-doc .pd-sig-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
    margin-top: 1rem;
}
.print-doc .pd-sig-grid.is-3 { grid-template-columns: repeat(3, 1fr); }
.print-doc .pd-sig-box {
    border: 1px dashed var(--ink-400);
    height: 86px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: .45rem;
    font-weight: 700;
    font-size: .9rem;
}
.print-doc table.pd-table { width: 100%; border-collapse: collapse; }
.print-doc table.pd-table th,
.print-doc table.pd-table td {
    border: 1px solid var(--ink-300);
    padding: .35rem .45rem;
    text-align: right;
    font-size: .85rem;
}
.print-doc table.pd-table thead th {
    background: var(--ink-100);
    color: var(--ink-800);
    font-weight: 700;
}
.print-doc table.pd-table tbody tr:nth-child(even) td { background: var(--ink-50); }
.print-doc .pd-money {
    direction: ltr;
    unicode-bidi: embed;
    font-variant-numeric: tabular-nums;
}
.print-doc ol.pd-terms { padding-inline-start: 1.25rem; margin: 0; font-size: .85rem; line-height: 1.65; color: var(--ink-700); }
.print-doc ol.pd-terms > li { margin-bottom: .35rem; }

@media print {
    .print-doc { box-shadow: none; padding: 0; max-width: none; }
    .print-doc .pd-header { border-bottom-color: #000 !important; }
    .print-doc .pd-section { page-break-inside: avoid; }
    .print-doc thead { display: table-header-group; }
    .print-doc table.pd-table { font-size: .78rem; }
    .print-doc table.pd-table th,
    .print-doc table.pd-table td { padding: .28rem .35rem; }
}

/* ---------- Withdrawal line tweaks (carry from inline styles) ---------- */
.withdrawal-line .w-line { font-size: .92rem; }
.withdrawal-line .line-grid { display: grid; gap: .5rem; grid-template-columns: 1fr 1fr; }
@media (min-width: 992px) {
    .withdrawal-line .line-grid { grid-template-columns: 2fr 1fr 1fr 1fr; align-items: end; }
}

/* ---------- Bordered table variant for receipts ---------- */
.table-keyval { width: 100%; border-collapse: separate; border-spacing: 0; }
.table-keyval th, .table-keyval td {
    padding: .55rem .75rem;
    border-bottom: 1px solid var(--border);
}
.table-keyval th {
    width: 35%;
    background: var(--surface-muted);
    color: var(--ink-600);
    font-weight: 500;
    text-align: start;
}
.table-keyval tr:last-child th, .table-keyval tr:last-child td { border-bottom: none; }
.table-keyval td { color: var(--ink-900); }
.table-keyval td.is-money { direction: ltr; font-variant-numeric: tabular-nums; font-weight: 600; }

/* ---------- Admin shell: in-page print (reports, statements, receipts on screen) ---------- */
@media print {
    .sidebar-backdrop,
    .admin-sidebar,
    .admin-topbar {
        display: none !important;
    }
    .admin-workspace {
        margin-inline-start: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .admin-content {
        max-width: none !important;
        padding: 0 !important;
    }
    .no-print {
        display: none !important;
    }
    .table-responsive {
        overflow: visible !important;
    }
    .card,
    .kpi {
        box-shadow: none !important;
        break-inside: avoid;
    }
}



/* --------------------------------------------------------------------------
   Athar identity polish and usability upgrades
   -------------------------------------------------------------------------- */
:root {
    --ui-bg: #f5f3ff;
    --ui-bg-2: #eef2ff;
    --ui-primary: #5b3df5;
    --ui-primary-2: #432bd1;
    --ui-primary-soft: #ede9fe;
    --ui-indigo: #6d5dfc;
    --ui-cyan: #8b7bff;
    --ui-sidebar: #201936;
    --ui-sidebar-2: #2e2a45;
    --ui-shadow-sm: 0 10px 26px rgba(49, 35, 115, .06);
    --ui-shadow: 0 18px 48px rgba(49, 35, 115, .12);
}

body {
    background:
        radial-gradient(circle at top right, rgba(91, 61, 245, .12), transparent 27rem),
        radial-gradient(circle at bottom left, rgba(139, 123, 255, .12), transparent 30rem),
        linear-gradient(135deg, #fbfaff 0%, #f7f5ff 48%, #eef2ff 100%);
}

.logo-mark {
    background: rgba(255,255,255,.96) !important;
    border: 1px solid rgba(255,255,255,.62);
    box-shadow: 0 14px 28px rgba(24, 20, 55, .24) !important;
    overflow: hidden;
}
.logo-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
    display: block;
}
.as-brand { background: rgba(255,255,255,.06); border-radius: 1.15rem; }
.as-brand-text,
.as-brand-sub,
.as-link,
.as-link i,
.as-group-label,
.as-footer { color: rgba(255,255,255,.88); }
.as-brand-sub,
.as-group-label,
.as-footer { color: rgba(255,255,255,.62); }
.as-link:hover,
.as-link.active { color: #fff; }
.as-link:hover i,
.as-link.active i { color: #fff; }
.as-link.active {
    background: linear-gradient(135deg, #6c4cff, #4f37d8);
    box-shadow: 0 18px 36px rgba(91, 61, 245, .34);
}

.page-header,
.athar-hero,
.bg-primary,
.bg-gradient,
.card-header.bg-primary,
.card.text-bg-primary {
    color: #fff !important;
    background:
        radial-gradient(circle at 15% 0%, rgba(255,255,255,.22), transparent 16rem),
        linear-gradient(135deg, #6c4cff 0%, #5b3df5 48%, #2e2a45 100%) !important;
    border-color: rgba(255,255,255,.28) !important;
}
.page-header .ph-title-text,
.page-header .ph-subtitle,
.page-header i,
.page-header a:not(.btn),
.athar-hero *,
.bg-primary *,
.bg-gradient *,
.card-header.bg-primary * { color: #fff !important; }
.page-header .btn-outline-secondary,
.page-header .btn-outline-primary,
.page-header .btn-success {
    color: #fff !important;
    border-color: rgba(255,255,255,.55) !important;
    background: rgba(255,255,255,.12) !important;
}
.page-header .btn:hover { background: rgba(255,255,255,.22) !important; }

.btn-primary {
    --bs-btn-bg: #5b3df5;
    --bs-btn-border-color: #5b3df5;
    --bs-btn-hover-bg: #432bd1;
    --bs-btn-hover-border-color: #432bd1;
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    box-shadow: 0 14px 26px rgba(91,61,245,.24);
}
.btn-outline-primary {
    --bs-btn-color: #5b3df5;
    --bs-btn-border-color: rgba(91,61,245,.4);
    --bs-btn-hover-bg: #5b3df5;
    --bs-btn-hover-border-color: #5b3df5;
    --bs-btn-hover-color: #fff;
}
.text-primary { color: #5b3df5 !important; }
.bg-primary-subtle { background-color: #ede9fe !important; }
.text-primary-emphasis { color: #432bd1 !important; }

.form-control,
.form-select {
    min-height: 44px;
    border-radius: .95rem;
    border-color: #d8dded;
    background-color: #fff;
}
.form-control:focus,
.form-select:focus {
    border-color: #8b7bff;
    box-shadow: 0 0 0 .25rem rgba(91,61,245,.12);
}
.form-label { font-weight: 800; color: #334155; }

.step-card {
    border: 1px solid rgba(216, 221, 237, .95);
    border-radius: 1.35rem;
    background: rgba(255,255,255,.94);
    box-shadow: var(--ui-shadow-sm);
    overflow: hidden;
}
.step-card-head {
    display:flex;align-items:center;justify-content:space-between;gap:1rem;
    padding:1rem 1.15rem;
    background: linear-gradient(180deg,#fff,#fafaff);
    border-bottom:1px solid #e8ecf6;
}
.step-title { display:flex;align-items:center;gap:.65rem;font-weight:900;color:#111827; }
.step-title i { width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border-radius:1rem;color:#5b3df5;background:#ede9fe; }
.step-hint { color:#64748b;font-size:.82rem;font-weight:700; }
.step-card-body { padding:1.15rem; }

.optional-details {
    border:1px dashed #cfd6ea;
    border-radius:1rem;
    background:#fbfbff;
    overflow:hidden;
}
.optional-details + .optional-details { margin-top:.75rem; }
.optional-details summary {
    cursor:pointer;
    list-style:none;
    padding:.85rem 1rem;
    font-weight:900;
    color:#432bd1;
    display:flex;align-items:center;gap:.5rem;
}
.optional-details summary::-webkit-details-marker { display:none; }
.optional-details summary::before { content:'+'; width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#ede9fe;color:#5b3df5;font-weight:900; }
.optional-details[open] summary::before { content:'−'; }
.optional-details-content { padding:0 1rem 1rem; }

.order-line { border-radius:1.25rem !important; border-color:#dfe5f2 !important; }
.order-line .card-body { padding:1rem !important; }
.order-line-toolbar { display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.75rem; }
.order-line-title { display:flex;align-items:center;gap:.5rem;font-weight:900;color:#111827; }
.order-line-title i { color:#5b3df5; }

.dashboard-hero {
    display:grid;grid-template-columns:1.5fr 1fr;gap:1rem;margin-bottom:1rem;
}
.dashboard-hero-card { padding:1.2rem;border-radius:1.5rem;background:linear-gradient(135deg,#6c4cff,#2e2a45);color:#fff;box-shadow:0 22px 55px rgba(91,61,245,.28); }
.dashboard-hero-card * { color:#fff; }
.dashboard-quick { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem; }
.quick-tile { padding:1rem;border-radius:1.2rem;background:rgba(255,255,255,.9);border:1px solid #e5e7f2;box-shadow:var(--ui-shadow-sm); }
.quick-tile .label { color:#64748b;font-size:.8rem;font-weight:800; }
.quick-tile .value { margin-top:.25rem;color:#111827;font-size:1.15rem;font-weight:900; }

.visual-list { display:flex;flex-direction:column;gap:.8rem;padding:1rem; }
.visual-row { display:grid;grid-template-columns:minmax(130px,1fr) 2fr auto;gap:.8rem;align-items:center; }
.visual-label { font-weight:900;color:#111827;min-width:0; }
.visual-code { color:#64748b;font-size:.75rem;font-weight:700; }
.visual-track { height:12px;border-radius:999px;background:#ede9fe;overflow:hidden; }
.visual-fill { height:100%;border-radius:inherit;background:linear-gradient(90deg,#6c4cff,#8b7bff); }
.visual-value { font-weight:900;color:#432bd1;white-space:nowrap; }

@media (max-width: 992px) {
    .dashboard-hero { grid-template-columns:1fr; }
    .visual-row { grid-template-columns:1fr; }
}
@media print {
    .page-header { color:#111827 !important; background:#fff !important; }
    .page-header * { color:#111827 !important; }
}
 
/* Complete RTL contract for every screen and Bootstrap component. */
html[dir="rtl"],
html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .admin-shell,
html[dir="rtl"] .admin-sidebar,
html[dir="rtl"] .admin-workspace,
html[dir="rtl"] .admin-topbar,
html[dir="rtl"] .admin-main,
html[dir="rtl"] .admin-content,
html[dir="rtl"] .guest-shell,
html[dir="rtl"] .portal-shell,
html[dir="rtl"] .print-doc {
    direction: rtl;
}

html[dir="rtl"] form,
html[dir="rtl"] fieldset,
html[dir="rtl"] label,
html[dir="rtl"] .form-label,
html[dir="rtl"] .form-control,
html[dir="rtl"] .form-select,
html[dir="rtl"] .input-group-text,
html[dir="rtl"] .dropdown-menu,
html[dir="rtl"] .dropdown-item,
html[dir="rtl"] .modal,
html[dir="rtl"] .offcanvas,
html[dir="rtl"] .alert,
html[dir="rtl"] .breadcrumb,
html[dir="rtl"] .pagination {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] input::placeholder,
html[dir="rtl"] textarea::placeholder {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] table,
html[dir="rtl"] caption,
html[dir="rtl"] th,
html[dir="rtl"] td {
    direction: rtl;
    text-align: start;
}

html[dir="rtl"] .dropdown-menu-start {
    --bs-position: end;
}

html[dir="rtl"] [dir="ltr"],
html[dir="rtl"] .mono,
html[dir="rtl"] code,
html[dir="rtl"] kbd,
html[dir="rtl"] pre,
html[dir="rtl"] .money,
html[dir="rtl"] .text-money,
html[dir="rtl"] .is-money,
html[dir="rtl"] .is-mono {
    unicode-bidi: isolate;
}