/* LTR overrides for pages that were authored assuming RTL.
 * Loaded by every layout AFTER zoom-app.css; no-op for dir="rtl",
 * active for dir="ltr".
 *
 * The portal CSS uses physical properties (margin-right, right: 0, …)
 * that do NOT auto-flip with `dir`. Without these overrides the layout
 * looks correct in Arabic but breaks in English: sidebar+content overlap,
 * topbar actions clump in the wrong corner, search icon flips off-screen.
 *
 * Anything you add here should:
 *   1. Be scoped under html[dir="ltr"] (or html.ltr for legacy class).
 *   2. Re-implement the physical rule for the LTR case so RTL stays
 *      untouched.
 */

/* ── 1. Body direction propagation ─────────────────────────────────── */
html[dir="ltr"] body { direction: ltr; }
html[dir="rtl"] body { direction: rtl; }

/* ── 2. Portal (Zoom-like) shell ───────────────────────────────────── */
/* Sidebar pinned to right by default → flip to left under LTR. */
html[dir="ltr"] .zma-sidebar,
html.ltr        .zma-sidebar {
  right: auto;
  left: 0;
  border-right: 1px solid var(--z-border, #e9edf5);
  border-left: 0;
}
html[dir="ltr"] .zma-app,
html.ltr        .zma-app { flex-direction: row; }

/* CRITICAL: content area was pushed by `margin-right` to clear the right-
 * side sidebar. In LTR the sidebar is on the LEFT, so we have to mirror
 * the margin or content slides under the sidebar. */
html[dir="ltr"] .zma-main,
html.ltr        .zma-main {
  margin-right: 0;
  margin-left: var(--z-sidebar-w);
}
@media (max-width: 880px) {
  html[dir="ltr"] .zma-main,
  html.ltr        .zma-main { margin-left: 0; }
}

/* ── 3. Topbar (search, actions cluster) ────────────────────────────── */
/* Actions cluster pushed to far end via margin-right:auto in RTL.
 * In LTR we want the actions on the right, so swap to margin-left:auto. */
html[dir="ltr"] .zma-topbar-actions,
html.ltr        .zma-topbar-actions {
  margin-right: 0;
  margin-left: auto;
}

/* Search icon was absolutely positioned at right:14px (visual end in RTL). */
html[dir="ltr"] .zma-topbar-search i,
html.ltr        .zma-topbar-search i {
  right: auto;
  left: 14px;
}
html[dir="ltr"] .zma-topbar-search input,
html.ltr        .zma-topbar-search input {
  padding-right: 14px;
  padding-left: 38px; /* leave room for the icon on the left in LTR */
}

/* ── 4. Sidebar nav: active-item indicator strip ───────────────────── */
html[dir="ltr"] .zma-sidebar-nav a.active::before,
html.ltr        .zma-sidebar-nav a.active::before {
  right: auto;
  left: 0;
  border-radius: 2px 0 0 2px;
}
/* Bootstrap-style border accent on active nav item (used in client-portal) */
html[dir="ltr"] .zma-sidebar-nav a.active,
html[dir="ltr"] .zma-sidebar-nav li > a.active,
html.ltr        .zma-sidebar-nav a.active,
html.ltr        .zma-sidebar-nav li > a.active {
  border-right: 0;
  border-left: 3px solid var(--z-blue, #3b82f6);
}

/* Notification/chat unread badge sits at the inline-end of the nav row. */
html[dir="ltr"] .zma-nav-badge,
html.ltr        .zma-nav-badge { margin-left: auto; margin-right: 0; }

/* Profile presence dot (small green ring on avatar) */
html[dir="ltr"] .zma-sidebar-profile-status,
html.ltr        .zma-sidebar-profile-status {
  left: auto;
  right: -2px;
}

/* ── 5. Component-level icon spacing ───────────────────────────────── */
/* Clock period (AM/PM) — was margin-right in RTL, mirror to LTR end */
html[dir="ltr"] .zma-clock-boxes .zma-period,
html.ltr        .zma-clock-boxes .zma-period {
  margin-right: 0;
  margin-left: 6px;
}
/* Meeting meta icons */
html[dir="ltr"] .zma-meet-details .zma-meta i,
html.ltr        .zma-meet-details .zma-meta i {
  margin-left: 0;
  margin-right: 4px;
}

/* ── 6. Admin shell mirror (ad-* classes) ──────────────────────────── */
html[dir="ltr"] .adm-sidebar,
html.ltr        .adm-sidebar {
  border-right: 0;
  border-left: 1px solid rgba(255,255,255,.06);
}
html[dir="ltr"] .adm-app,
html.ltr        .adm-app { flex-direction: row; }

/* ── 7. Bootstrap utilities frequently used for edge alignment ────── */
html[dir="ltr"] .ml-auto,
html.ltr        .ml-auto { margin-left: auto !important; margin-right: 0 !important; }
html[dir="ltr"] .mr-auto,
html.ltr        .mr-auto { margin-right: auto !important; margin-left: 0 !important; }

/* ── 8. Generic chevron / dropdown icons that are direction-blind ──── */
/* Inline-end caret in dropdowns (often `la-angle-left` in RTL) → flip */
html[dir="ltr"] .zma-chev-flip i,
html.ltr        .zma-chev-flip i { transform: scaleX(-1); }

/* ── 9. Make sure scrollbars + overflow don't leak under the sidebar ─ */
html[dir="ltr"] .zma-content,
html.ltr        .zma-content { padding-left: 24px; padding-right: 24px; }

/* ── 10. Bootstrap custom-switch RTL fix ─────────────────────────────
 * vendor/bootstrap.rtl.only.min.css flips the BASE custom-control
 * (`padding-left → padding-right: 1.5rem`) but never accounts for the
 * SWITCH variant, whose track is 1.75rem wide and needs 2.25rem of
 * inline padding to clear. Result in RTL: the toggle's ::before track
 * sits at `right: 0` of a 1.5rem padding zone and its 1.75rem width
 * spills into the label text → the icon overlaps the first character.
 * Fixed by reserving 2.25rem on the right and pulling the ::before/
 * ::after pseudo-elements into that padding area. */
.rtl .custom-switch,
html[dir="rtl"] .custom-switch {
  padding-right: 2.25rem;
  padding-left: 0;
}
.rtl .custom-switch .custom-control-label::before,
html[dir="rtl"] .custom-switch .custom-control-label::before {
  right: -2.25rem;
  left: auto;
}
.rtl .custom-switch .custom-control-label::after,
html[dir="rtl"] .custom-switch .custom-control-label::after {
  right: calc(-2.25rem + 2px);
  left: auto;
}
/* Knob slides LEFT (not right) when the switch is checked in RTL. */
.rtl .custom-switch .custom-control-input:checked ~ .custom-control-label::after,
html[dir="rtl"] .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  transform: translateX(-0.75rem);
}