/*
 * ============================================================================
 * ShaFX v10.3.1 — FINAL CONSOLIDATION HOTFIX (load LAST)
 * ============================================================================
 * Single source of truth for:
 *   • Public hamburger menu (.menu-toggle + .mobile-nav)
 *   • Dashboard / admin / partner drawer (.app-side + .menu-toggle-app)
 *   • Scrim / backdrop behaviour (kills competing ::before / ::after overlays)
 *   • RTL direction & flip safety
 *   • Mobile responsive baseline
 *
 * This file is intentionally loaded AFTER every other stylesheet so its rules
 * win the cascade. It also explicitly disables the older v9.20d, mobile.css,
 * v30_6, v30_7 scrim pseudo-elements to eliminate the "dark, can't click"
 * state caused by multiple overlapping overlays.
 * ============================================================================
 */

/* ------------------------------------------------------------------
 * 0. KILL ALL LEGACY PSEUDO-ELEMENT SCRIMS
 *    Older files painted backdrops via body::before / body::after at
 *    competing z-indexes. We replace them with a single JS-controlled
 *    .shafx-mobile-scrim div and disable every pseudo backdrop.
 * ------------------------------------------------------------------ */
@media (max-width: 960px) {
  body.side-open::before,
  body.side-open::after,
  body.nav-open::before,
  body.nav-open::after,
  html.side-open body::before,
  html.side-open body::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
    pointer-events: none !important;
  }
}

/* ------------------------------------------------------------------
 * 1. SINGLE-SOURCE SCRIM (JS-controlled div)
 * ------------------------------------------------------------------ */
.shafx-mobile-scrim {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.55) !important;
  z-index: 9990 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .18s ease, visibility .18s ease !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.shafx-mobile-scrim.show {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* ------------------------------------------------------------------
 * 2. DASHBOARD / ADMIN / PARTNER DRAWER (.app-side)
 *    Use clean, finite z-indexes. Sidebar sits ABOVE scrim.
 *    Body never gets transform/filter to keep position:fixed valid.
 * ------------------------------------------------------------------ */
@media (max-width: 960px) {
  body.side-open,
  body.nav-open {
    overflow: hidden !important;
    transform: none !important;
    filter: none !important;
  }

  .app-shell { display: block !important; }

  .app-side,
  .app-side[data-app-side],
  aside.app-side {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: 286px !important;
    max-width: 86vw !important;
    height: 100dvh !important;
    background: var(--bg-2, #11162b) !important;
    border-right: 1px solid var(--line, rgba(255,255,255,.08)) !important;
    border-left: 0 !important;
    box-shadow: 14px 0 34px rgba(0,0,0,0.45) !important;
    transform: translateX(-110%) !important;
    transition: transform .22s ease !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 10000 !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* RTL: drawer slides in from the right */
  html[dir="rtl"] .app-side,
  html[dir="rtl"] .app-side[data-app-side],
  html[dir="rtl"] aside.app-side {
    left: auto !important;
    right: 0 !important;
    border-right: 0 !important;
    border-left: 1px solid var(--line, rgba(255,255,255,.08)) !important;
    box-shadow: -14px 0 34px rgba(0,0,0,0.45) !important;
    transform: translateX(110%) !important;
  }

  /* Open state — drives both classes JS may set */
  body.side-open .app-side,
  body.nav-open .app-side,
  .app-side.open,
  .app-side.is-open,
  .app-side[data-app-side].open {
    transform: translateX(0) !important;
  }
  html[dir="rtl"] body.side-open .app-side,
  html[dir="rtl"] body.nav-open .app-side,
  html[dir="rtl"] .app-side.open,
  html[dir="rtl"] .app-side.is-open {
    transform: translateX(0) !important;
  }

  /* Sidebar links must remain clickable */
  .app-side a,
  .app-side button,
  .app-side .app-nav a {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 1 !important;
  }

  /* Toggle button sits above scrim so it can close drawer */
  .menu-toggle-app,
  [data-app-toggle] {
    position: relative !important;
    z-index: 10010 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  /* Topbar below toggle but above content */
  .app-topbar { z-index: 9000 !important; }

  /* Main content full width */
  .app-main { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; min-width: 0 !important; }
}

/* Drawer close button (X) inside sidebar on mobile */
.shafx-drawer-close { display: none !important; }
@media (max-width: 960px) {
  .app-side .shafx-drawer-close {
    display: flex !important;
    position: sticky !important;
    top: 8px !important;
    align-self: flex-end !important;
    margin: 8px 10px 4px auto !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    border: 1px solid var(--line, rgba(255,255,255,.12)) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--text, #fff) !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 26px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    z-index: 10005 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
  }
  html[dir="rtl"] .app-side .shafx-drawer-close {
    margin-left: 10px !important;
    margin-right: auto !important;
  }
  .app-side .shafx-drawer-close:hover {
    background: rgba(255, 204, 0, 0.12) !important;
    color: #ffcc00 !important;
    border-color: rgba(255, 204, 0, 0.35) !important;
  }
}

/* ------------------------------------------------------------------
 * 3. PUBLIC HEADER HAMBURGER (.menu-toggle + .mobile-nav)
 *    The public site uses a different pattern: an inline expanding
 *    panel below the header. We make sure it can't go dark/unclickable.
 * ------------------------------------------------------------------ */
@media (max-width: 960px) {
  .menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 60;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }
  .nav-links { display: none !important; }

  .mobile-nav {
    display: none;
    background: rgba(11, 14, 28, 0.98) !important;
    border-top: 1px solid var(--line, rgba(255,255,255,.08));
    padding: 14px 0 18px;
    max-height: calc(100dvh - 68px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
    z-index: 55;
  }
  .mobile-nav.open { display: block !important; }
  .mobile-nav a,
  .mobile-nav summary {
    pointer-events: auto !important;
    position: relative;
    z-index: 1;
  }
  .mobile-nav a {
    display: block;
    padding: 12px 14px;
    color: var(--text-2);
    font-weight: 500;
    border-radius: 8px;
    text-decoration: none;
  }
  .mobile-nav a:hover,
  .mobile-nav a:focus {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
  }
  .mobile-nav details > summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 14px;
    font-weight: 600;
  }
  .mobile-nav details > summary::-webkit-details-marker { display: none; }
}

/* ------------------------------------------------------------------
 * 4. RTL — SURGICAL FIXES (LTR parity)
 * ------------------------------------------------------------------ */
html[dir="rtl"] body {
  font-family: "Noto Kufi Arabic", "Inter", system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
  text-align: right;
}

/* Logical properties so paddings/margins mirror correctly */
html[dir="rtl"] .container,
html[dir="rtl"] .nav,
html[dir="rtl"] .nav-links,
html[dir="rtl"] .nav-cta,
html[dir="rtl"] .feed-head,
html[dir="rtl"] .feed-head-actions,
html[dir="rtl"] .feed-tabs,
html[dir="rtl"] .feed-actions,
html[dir="rtl"] .feed-side,
html[dir="rtl"] .feed-side-head,
html[dir="rtl"] .toolbar,
html[dir="rtl"] .filters,
html[dir="rtl"] .footer-grid {
  direction: rtl;
  text-align: start;
}

/* v1031: app-topbar stays LTR in RTL (matches existing v24 hotfix intent).
   The hamburger button stays on the visual left even in Arabic/Sorani.
   The inner h1 flips to RTL via the rule below. */
html[dir="rtl"] .app-topbar { direction: ltr; }
html[dir="rtl"] .app-topbar h1 { direction: rtl; text-align: right; }
html[dir="rtl"] .top-actions { direction: ltr; }
html[dir="rtl"] .nav-cta { flex-direction: row-reverse !important; }
html[dir="rtl"] .user-chip,
html[dir="rtl"] .brand-mark,
html[dir="rtl"] .nav-mega-grid a {
  flex-direction: row-reverse;
}
/* v1031: .app-nav a explicitly NOT row-reversed — direction:rtl handles
   the visual flip automatically. Adding row-reverse here would double-reverse
   and hide/clip the sidebar icons. Override the same rule in shafx-v30_7.css. */
html[dir="rtl"] .app-nav a,
html[dir="rtl"] .app-side .app-nav a {
  flex-direction: row !important;
  justify-content: flex-start;
  text-align: start;
}

/* Mega panel mirrored to the right edge */
html[dir="rtl"] .nav-mega-panel {
  left: auto !important;
  right: 50% !important;
  transform: translateX(50%) translateY(8px) !important;
}
html[dir="rtl"] .nav-mega:hover .nav-mega-panel,
html[dir="rtl"] .nav-mega:focus-within .nav-mega-panel {
  transform: translateX(50%) translateY(2px) !important;
}
html[dir="rtl"] .nav-user-panel {
  right: auto !important;
  left: 0 !important;
}

/* Inputs: text fields RTL; numeric/email/url stay LTR (legibility) */
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
  direction: rtl;
  text-align: start;
  font-family: "Noto Kufi Arabic", "Inter", system-ui, sans-serif;
  line-height: 1.7;
}
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[name*="email"],
html[dir="rtl"] input[name*="url"],
html[dir="rtl"] input[name*="link"],
html[dir="rtl"] input[name*="phone"] {
  direction: ltr;
  text-align: left;
}

/* Numbers, symbols, code — always LTR isolated */
html[dir="rtl"] .number,
html[dir="rtl"] .symbol,
html[dir="rtl"] code,
html[dir="rtl"] pre,
html[dir="rtl"] .ticker,
html[dir="rtl"] .price,
html[dir="rtl"] .pip,
html[dir="rtl"] [data-numeric] {
  direction: ltr !important;
  unicode-bidi: isolate !important;
  text-align: end !important;
}

/* Border flips — when a card has a brand accent border on the left
   in LTR, mirror it to the right in RTL */
html[dir="rtl"] [style*="border-left"]:not([style*="border-left:0"]):not([style*="border-left: 0"]) {
  border-left-width: 0 !important;
  border-right: 3px solid var(--brand, #ffcc00) !important;
}

/* SVGs that are directional (arrows, chevrons) — flip horizontally */
html[dir="rtl"] .btn svg,
html[dir="rtl"] a > svg:not(.no-flip),
html[dir="rtl"] .menu-toggle svg,
html[dir="rtl"] .menu-toggle-app svg { transform: scaleX(-1); }
html[dir="rtl"] .app-nav a svg,
html[dir="rtl"] .nav-user-avatar,
html[dir="rtl"] .footer-social svg { transform: none; }

/* Lists indent on the correct side */
html[dir="rtl"] ul, html[dir="rtl"] ol {
  padding-inline-start: 1.4em;
  padding-inline-end: 0;
}

/* Tables and headers */
html[dir="rtl"] table { direction: rtl; }
html[dir="rtl"] th, html[dir="rtl"] td { text-align: start; }

/* Public mobile menu in RTL */
html[dir="rtl"] .mobile-nav details > summary { text-align: start; }

/* Lang switch menu mirror */
html[dir="rtl"] .lang-switch__menu {
  left: 0 !important;
  right: auto !important;
}

/* RTL-specific Arabic-capable font for hero/sidebar/topbar headlines
   so Inter glyph-fallback cannot produce mojibake */
html[dir="rtl"] .app-topbar h1,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] .dp-greet-title,
html[dir="rtl"] .dp-welcome-content h3,
html[dir="rtl"] .dp-ns-body h2,
html[dir="rtl"] .dp-panel-head h3,
html[dir="rtl"] .group-label,
html[dir="rtl"] .app-side .app-nav a,
html[dir="rtl"] .dp-status-eyebrow {
  font-family: "Noto Kufi Arabic", "Inter", system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
}

/* ------------------------------------------------------------------
 * 5. MOBILE BASELINE SAFETY
 * ------------------------------------------------------------------ */
@media (max-width: 960px) {
  .app-main, .app-content {
    min-width: 0 !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  .app-content, .content, .page-content, main {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  /* Prevent text from forcing horizontal scroll */
  .feed-card, .feed-post, .app-card, .admin-card {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
}

/* Stories dialog — make sure it doesn't sit under the scrim */
dialog.shafx-story-create,
dialog.shafx-story-viewer {
  z-index: 100000 !important;
}
dialog.shafx-story-create::backdrop,
dialog.shafx-story-viewer::backdrop {
  background: rgba(0, 0, 0, 0.72) !important;
}

/* Final safety: when drawer is open on mobile, prevent body content from
   capturing clicks (helps when scrim z-index race happens) */
@media (max-width: 960px) {
  body.side-open .app-main,
  body.nav-open .app-main { pointer-events: none !important; }
  body.side-open .app-side,
  body.side-open .app-side *,
  body.side-open .menu-toggle-app,
  body.side-open .shafx-mobile-scrim,
  body.nav-open .app-side,
  body.nav-open .app-side *,
  body.nav-open .menu-toggle-app,
  body.nav-open .shafx-mobile-scrim { pointer-events: auto !important; }
}

/* ============================================================================
 * 6. DESKTOP RTL — sidebar on the RIGHT, container width preserved
 * ============================================================================
 * The dashboard layout uses CSS grid: `.app-shell { grid-template-columns: 260px 1fr }`
 * In LTR, this places the sidebar on the left.
 * In RTL, we reverse the columns so the sidebar sits on the right edge — matching
 * Twitter / YouTube / Notion Arabic patterns.
 * --------------------------------------------------------------------------- */
@media (min-width: 961px) {
  html[dir="rtl"] .app-shell {
    grid-template-columns: 1fr 260px !important;
    direction: rtl;
  }
  /* Place sidebar in the 2nd column (visual right) */
  html[dir="rtl"] .app-shell > .app-side,
  html[dir="rtl"] .app-shell > aside.app-side {
    grid-column: 2 !important;
    grid-row: 1 !important;
    border-right: 0 !important;
    border-left: 1px solid var(--line, rgba(255,255,255,.08)) !important;
  }
  /* Place main in the 1st column (visual left) */
  html[dir="rtl"] .app-shell > .app-main {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }
  /* Sidebar inner content: direction:rtl handles the visual flip automatically.
     DO NOT use flex-direction:row-reverse here — it double-reverses and ends
     up hiding/clipping the icons. The default row flow + direction:rtl works
     perfectly: icon stays adjacent to its label, both flow right-to-left. */
  html[dir="rtl"] .app-side { direction: rtl; text-align: right; }
  html[dir="rtl"] .app-side .app-nav a { flex-direction: row; }
  html[dir="rtl"] .app-side .app-nav a svg {
    flex-shrink: 0 !important;
    transform: none !important;
    visibility: visible !important;
    opacity: .85 !important;
  }
  html[dir="rtl"] .app-side .brand-mark { flex-direction: row; }
  html[dir="rtl"] .app-side .brand-mark img {
    flex-shrink: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Main content area: keep container max-width centered, not full-width */
  html[dir="rtl"] .app-main { direction: rtl; }
}

/* iPad breakpoint (768–1024) — v9.20d uses flex; mirror sidebar to right in RTL */
@media (min-width: 768px) and (max-width: 1024px) {
  html[dir="rtl"] .app-shell {
    flex-direction: row-reverse !important;
    direction: rtl;
  }
  html[dir="rtl"] .app-side {
    border-right: 0 !important;
    border-left: 1px solid var(--line, rgba(255,255,255,.08)) !important;
  }
  html[dir="rtl"] .app-side,
  html[dir="rtl"] .app-side .app-nav a,
  html[dir="rtl"] .app-side .brand-mark { direction: rtl; }
  /* No row-reverse on nav links — natural row + direction:rtl does the flip */
  html[dir="rtl"] .app-side .app-nav a { flex-direction: row; }
  html[dir="rtl"] .app-side .app-nav a svg {
    flex-shrink: 0 !important;
    transform: none !important;
    visibility: visible !important;
    opacity: .85 !important;
  }
  html[dir="rtl"] .app-side .brand-mark img {
    flex-shrink: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  html[dir="rtl"] .app-main { direction: rtl; }
}

/* ============================================================================
 * SIDEBAR ICONS — never flip, never hide, always visible in RTL
 * The legacy rtl.css line 7 (`html[dir="rtl"] a svg { transform: scaleX(-1) }`)
 * was inadvertently flipping sidebar icons. We explicitly override per-element. */
html[dir="rtl"] .app-side .app-nav a > svg,
html[dir="rtl"] .app-side .brand-mark > svg,
html[dir="rtl"] .app-side .footer a > svg {
  transform: none !important;
  display: inline-block !important;
  visibility: visible !important;
  flex-shrink: 0 !important;
}
html[dir="rtl"] .app-side .brand-mark > img {
  transform: none !important;
  display: inline-block !important;
  visibility: visible !important;
  flex-shrink: 0 !important;
}

/* ============================================================================
 * BIDI ISOLATION — when an English string falls through inside an RTL page,
 * prevent the trailing punctuation from being re-ordered to the front.
 * Example: ".What the community is calling" should render as
 * "What the community is calling." even inside an RTL flow.
 * --------------------------------------------------------------------------- */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] .feed-head-text h1,
html[dir="rtl"] .feed-head-text p,
html[dir="rtl"] .feed-engage-sub,
html[dir="rtl"] .feed-engage-bar-lbl,
html[dir="rtl"] .feed-eyebrow,
html[dir="rtl"] .feed-engage-lbl,
html[dir="rtl"] .auth-card h1,
html[dir="rtl"] .auth-card .sub,
html[dir="rtl"] .pg25-mission-title,
html[dir="rtl"] .pg25-mission-desc {
  unicode-bidi: plaintext;
}

/* Tags that hold ambiguous content (numbers, code, mixed strings) — keep isolated */
html[dir="rtl"] code,
html[dir="rtl"] kbd,
html[dir="rtl"] samp,
html[dir="rtl"] .number,
html[dir="rtl"] .ticker,
html[dir="rtl"] .symbol,
html[dir="rtl"] .price,
html[dir="rtl"] .pip,
html[dir="rtl"] [data-numeric] {
  unicode-bidi: isolate;
}

/* ============================================================================
 * 7. RTL — KEEP CONTAINER WIDTHS BOXED (no full-width stretch)
 * ============================================================================
 * Issue reported: "looks like FULL width not boxed as LTR".
 * Root cause: some legacy rules set `.app-content { width: 100% }` without
 * preserving the max-width and centering when `direction: rtl` cascades into
 * the layout. We re-assert the boxed widths and auto-margins for RTL.
 * --------------------------------------------------------------------------- */
html[dir="rtl"] .container {
  max-width: 1240px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px;
  padding-right: 20px;
}

html[dir="rtl"] .app-content,
html[dir="rtl"] .app-main > .container,
html[dir="rtl"] main.app-content,
html[dir="rtl"] .page-content {
  max-width: 1240px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ============================================================================
 * RTL FORCE-WIDTH-100 OVERRIDE
 * ============================================================================
 * shafx-v22/v23/v24-i18n-rtl-hotfix.css all carry this rule:
 *
 *   html[dir="rtl"] .app-content,
 *   html[dir="rtl"] .feed-page,
 *   html[dir="rtl"] .dashboard-page,
 *   html[dir="rtl"] .dp-page {
 *     width: 100% !important;
 *     max-width: none !important;
 *   }
 *
 * That `max-width: none !important` makes RTL content stretch edge-to-edge.
 * In LTR, .feed-page has its OWN inline rule `max-width: 780px; margin: 0 auto`
 * (defined inside feed.php's <style> block). The !important from v22/v23/v24
 * defeats that inline rule in RTL.
 *
 * We restore the boxed feel by re-asserting the same max-widths used in LTR,
 * with the SAME !important, applied only at desktop breakpoints.
 * --------------------------------------------------------------------------- */
@media (min-width: 961px) {
  /* Feed page — matches inline rule in app/Views/trader/feed.php (780px) */
  html[dir="rtl"] .feed-page {
    max-width: 780px !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
  }
  /* Other trader inner pages with their own inline max-widths */
  html[dir="rtl"] .ib-page,
  html[dir="rtl"] .event-page {
    max-width: 920px !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
  }
  html[dir="rtl"] .comp-page,
  html[dir="rtl"] .diag-page,
  html[dir="rtl"] .cron-page {
    max-width: 1100px !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
  }
  /* Overview / dashboard pages */
  html[dir="rtl"] .dashboard-page,
  html[dir="rtl"] .dp-page {
    max-width: 1240px !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
  }
  /* App-content stays at full main-column width */
  html[dir="rtl"] .app-content {
    max-width: none !important;
    width: 100% !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  html[dir="rtl"] .feed-page { max-width: 780px !important; margin-inline: auto !important; }
  html[dir="rtl"] .ib-page,
  html[dir="rtl"] .event-page { max-width: 920px !important; margin-inline: auto !important; }
  html[dir="rtl"] .comp-page,
  html[dir="rtl"] .diag-page,
  html[dir="rtl"] .cron-page { max-width: 100% !important; margin-inline: auto !important; }
}

/* Mobile: full width is correct */
@media (max-width: 767px) {
  html[dir="rtl"] .feed-page,
  html[dir="rtl"] .dashboard-page,
  html[dir="rtl"] .dp-page,
  html[dir="rtl"] .ib-page,
  html[dir="rtl"] .event-page,
  html[dir="rtl"] .comp-page,
  html[dir="rtl"] .diag-page,
  html[dir="rtl"] .cron-page {
    max-width: 100% !important;
    margin-inline: 0 !important;
  }
}

/* Desktop RTL: dashboard content area gets a sensible inner max-width so it
   matches the visual "boxed" feel of LTR (where most inner widgets carry their
   own max-width). On LTR the page reads naturally because the eye starts left;
   in RTL without this constraint, content sticks to the right edge of an
   unbounded column and feels like "full width". */
@media (min-width: 961px) {
  html[dir="rtl"] .app-main {
    max-width: 100%;
  }
  html[dir="rtl"] .app-content,
  html[dir="rtl"] main.app-content {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  /* Inner content rows that wrap their own grids/flex should keep their own
     max-widths. We only ensure the outer column doesn't stretch unbounded. */
  html[dir="rtl"] .app-content > .container {
    max-width: 1180px;
    margin-inline: auto !important;
  }
}

/* Boxed cards / panels stay boxed in RTL */
html[dir="rtl"] .panel,
html[dir="rtl"] .card,
html[dir="rtl"] .app-card,
html[dir="rtl"] .feed-card,
html[dir="rtl"] .admin-card,
html[dir="rtl"] .auth-card {
  margin-left: auto;
  margin-right: auto;
}

/* Feed and dashboard inner widths */
html[dir="rtl"] .feed-shell,
html[dir="rtl"] .feed-main,
html[dir="rtl"] .feed-side {
  max-width: none; /* allow grid to determine */
}
html[dir="rtl"] .feed-shell {
  max-width: 1240px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ============================================================================
 * 8. RTL site-header — preserve boxed nav width
 * ============================================================================ */
html[dir="rtl"] .site-header .container,
html[dir="rtl"] .site-header .nav {
  max-width: 1240px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ============================================================================
 * 9. PUBLIC HAMBURGER — CLICK HANDLER SAFETY
 * ============================================================================
 * The public menu toggle has two competing JS binders (core.js + v1031.js).
 * Both call e.preventDefault() but core.js uses .toggle('open') and v1031.js
 * also toggles. We ensure the CSS doesn't visually hide a click target that
 * exists. The JS side has been hardened to detect existing binding and skip.
 * --------------------------------------------------------------------------- */
.menu-toggle {
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.menu-toggle:focus-visible {
  outline: 2px solid var(--brand, #ffcc00);
  outline-offset: 2px;
}

/* ============================================================================
 * 10. DASHBOARD DISCLAIMER FOOTER — prevent overflow on RTL pages
 * ============================================================================
 * The dashboard layout has <footer class="app-disclaimer"> with margins, but the
 * inner paragraph can overflow horizontally in RTL on narrow viewports. We
 * constrain the whole footer + its content to the column width. */
.app-disclaimer {
  max-width: calc(100% - 32px);
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.app-disclaimer p,
.app-disclaimer .shafx-disclaimer,
.app-disclaimer span {
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Same fix for global site footer compliance text — was wrapping off the page */
.site-footer .footer-legal,
.site-footer p,
footer.app-disclaimer p {
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Public footer disclaimer in RTL */
html[dir="rtl"] .site-footer,
html[dir="rtl"] .site-footer .container,
html[dir="rtl"] .site-footer .footer-grid,
html[dir="rtl"] footer.app-disclaimer {
  text-align: start;
  unicode-bidi: plaintext;
}