html[dir="rtl"] body{font-family:"Noto Kufi Arabic","Inter",system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;text-align:right}
html[dir="rtl"] .container,html[dir="rtl"] .nav,html[dir="rtl"] .nav-links{direction:rtl}
html[dir="rtl"] .nav-links{flex-direction:row-reverse}
html[dir="rtl"] .skip-link{left:auto;right:6px}
html[dir="rtl"] .brand-mark{flex-direction:row-reverse}
html[dir="rtl"] ul,html[dir="rtl"] ol{padding-right:1.4em;padding-left:0}
html[dir="rtl"] .btn svg,html[dir="rtl"] a svg{transform:scaleX(-1)}
html[dir="rtl"] .lang-switch__menu{left:0;right:auto}
html[dir="rtl"] input,html[dir="rtl"] textarea,html[dir="rtl"] select{text-align:right;direction:rtl}
html[dir="rtl"] .nav-mega-panel{right:0;left:auto}
html[dir="rtl"] table{direction:rtl}
html[dir="rtl"] .flash,html[dir="rtl"] .card,html[dir="rtl"] .section{text-align:right}
@media (max-width:768px){html[dir="rtl"] .nav-links{flex-direction:column}}

html[dir="rtl"] .app-shell{grid-template-columns:1fr 260px}
html[dir="rtl"] .app-side{border-right:0;border-left:1px solid var(--line)}
html[dir="rtl"] .app-side .app-nav a{text-align:right}
html[dir="rtl"] .app-side .app-nav a svg{transform:none}
html[dir="rtl"] .app-topbar{flex-direction:row-reverse}
html[dir="rtl"] .app-topbar h1,html[dir="rtl"] .app-topbar .top-actions{direction:rtl}
html[dir="rtl"] .group-label{text-align:right}

/* v21.1: force Arabic-capable font on headlines so Inter glyph-fallback can't
   produce mojibake in dashboard hero / sidebar / topbar */
html[dir="rtl"] .app-topbar h1,
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,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3 {
  font-family: "Noto Kufi Arabic","Inter",system-ui,-apple-system,"Segoe UI",Tahoma,Arial,sans-serif;
}

@media (max-width:960px){
  html[dir="rtl"] .app-side{
    left:auto !important;
    right:0 !important;
    border-left:0 !important;
    border-right:1px solid var(--line) !important;
    transform:translateX(100%) !important;
    box-shadow:-8px 0 32px rgba(0,0,0,0.4) !important;
  }
  html[dir="rtl"] .app-side.open{transform:translateX(0) !important;}
  html[dir="rtl"] .app-main{margin-left:0 !important;margin-right:0 !important}
}

html[dir="rtl"] .pls-langfilters{flex-direction:row-reverse}
html[dir="rtl"] .topbar-bell{transform:scaleX(-1)}
html[dir="rtl"] .topbar-bell svg{transform:scaleX(-1)}
html[dir="rtl"] .user-chip{flex-direction:row-reverse}
html[dir="rtl"] .menu-toggle-app svg{transform:scaleX(-1)}


/* v1033 surgical RTL hardening — no UI redesign, only direction/overflow fixes */
html[dir="rtl"] .app-shell{grid-template-columns:1fr 260px;direction:rtl}
html[dir="rtl"] .app-main{direction:rtl;min-width:0}
html[dir="rtl"] .app-side{direction:rtl;text-align:right;grid-column:2;border-right:0;border-left:1px solid var(--line)}
html[dir="rtl"] .app-side .brand-mark,html[dir="rtl"] .app-nav a,html[dir="rtl"] .user-chip{flex-direction:row-reverse}
html[dir="rtl"] .top-actions{justify-content:flex-start}
html[dir="rtl"] .feed-head,html[dir="rtl"] .feed-composer-row,html[dir="rtl"] .feed-item-head,html[dir="rtl"] .feed-item-foot,html[dir="rtl"] .toolbar,html[dir="rtl"] .filters{direction:rtl;text-align:right}
html[dir="rtl"] .row-reverse-rtl{direction:rtl}
html[dir="rtl"] [style*="text-align:right"]{text-align:right}
html[dir="rtl"] input,html[dir="rtl"] textarea,html[dir="rtl"] select{font-family:"Noto Kufi Arabic","Inter",system-ui,sans-serif;line-height:1.7}
html[dir="rtl"] .number,html[dir="rtl"] .symbol,html[dir="rtl"] code,html[dir="rtl"] pre{direction:ltr;unicode-bidi:isolate;text-align:left}
@media(max-width:960px){
 html[dir="rtl"] .app-shell{display:block!important}
 html[dir="rtl"] .app-side{right:0!important;left:auto!important;transform:translateX(100%)!important;box-shadow:-8px 0 32px rgba(0,0,0,.4)!important;z-index:1000!important}
 html[dir="rtl"] .app-side.open{transform:translateX(0)!important}
 html[dir="rtl"] .app-topbar{flex-direction:row!important}
 html[dir="rtl"] body.side-open::before{z-index:999!important}
}