html[dir="rtl"] .landing-shell{direction:rtl;text-align:right}
html[dir="ltr"] .landing-shell{direction:ltr;text-align:left}
html[dir="ltr"] .landing-shell .visual-content{direction:ltr}
html[dir="ltr"] .landing-shell .landing-cta i{transform:scaleX(-1)}
html[dir="ltr"] .sidebar{direction:ltr}
html[dir="ltr"] .main,html[dir="ltr"] .page,html[dir="ltr"] .modal-card{direction:ltr;text-align:left}
html[dir="ltr"] .topbar,html[dir="ltr"] .panel-head,html[dir="ltr"] .page-title,html[dir="ltr"] .field-grid,html[dir="ltr"] .settings-grid{direction:ltr}
html[dir="ltr"] table{direction:ltr;text-align:left}
html[dir="ltr"] input,html[dir="ltr"] textarea,html[dir="ltr"] select{text-align:left;direction:ltr}
html[dir="ltr"] .nav-item svg,html[dir="ltr"] [data-directional-icon]{transform:scaleX(-1)}
.settings-language-card{margin-block:1rem}
.language-choice{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.language-choice button{min-height:72px;border:1px solid var(--border-color,rgba(128,128,128,.25));border-radius:14px;background:var(--surface,transparent);color:inherit;padding:12px 16px;text-align:start;cursor:pointer}
.language-choice button.active{border-color:var(--primary,#8b5cf6);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary,#8b5cf6) 18%,transparent)}
.language-choice strong,.language-choice small{display:block}.language-choice small{opacity:.65;margin-top:.3rem}
@media(max-width:640px){.language-choice{grid-template-columns:1fr}}

/* Language-aware application chrome: sidebar + topbar */
html[dir="rtl"] .app-shell{direction:rtl}
html[dir="ltr"] .app-shell{direction:ltr}

/* Desktop/tablet sidebar follows the inline start edge. */
html[dir="rtl"] .sidebar{
  grid-column:1;
  border-left:1px solid var(--border);
  border-right:0;
}
html[dir="ltr"] .sidebar{
  grid-column:1;
  border-left:0;
  border-right:1px solid var(--border);
}
html[dir="rtl"] .main,
html[dir="ltr"] .main{grid-column:2;min-width:0}

html[dir="rtl"] .sidebar .nav-item{text-align:right}
html[dir="ltr"] .sidebar .nav-item{text-align:left}
html[dir="rtl"] .sidebar .nav-item.active::before{right:-16px;left:auto}
html[dir="ltr"] .sidebar .nav-item.active::before{left:-16px;right:auto}

/* Topbar order and alignment follow the active writing direction. */
html[dir="rtl"] .topbar{direction:rtl;text-align:right}
html[dir="ltr"] .topbar{direction:ltr;text-align:left}
html[dir="rtl"] .topbar-page-info{text-align:right}
html[dir="ltr"] .topbar-page-info{text-align:left}
html[dir="rtl"] .top-actions{margin-right:auto;margin-left:0;direction:rtl}
html[dir="ltr"] .top-actions{margin-left:auto;margin-right:0;direction:ltr}
html[dir="ltr"] .topbar-breadcrumb{direction:ltr}
html[dir="rtl"] .topbar-breadcrumb{direction:rtl}

/* Directional icons only; neutral icons remain unchanged. */
html[dir="ltr"] [data-directional-icon],
html[dir="ltr"] .nav-item.active > i,
html[dir="ltr"] .attention-card > i{transform:scaleX(-1)}

@media (max-width:1100px) and (min-width:701px){
  html[dir="rtl"] .sidebar .nav-item.active::before{right:-12px;left:auto}
  html[dir="ltr"] .sidebar .nav-item.active::before{left:-12px;right:auto}
}

@media (max-width:700px){
  /* Mobile drawer opens from the language-appropriate edge. */
  html[dir="rtl"] .sidebar{
    right:0;
    left:auto;
    border-left:1px solid var(--border);
    border-right:0;
    box-shadow:-24px 0 60px rgba(16,24,40,.18);
    transform:translateX(105%);
  }
  html[dir="ltr"] .sidebar{
    left:0;
    right:auto;
    border-right:1px solid var(--border);
    border-left:0;
    box-shadow:24px 0 60px rgba(16,24,40,.18);
    transform:translateX(-105%);
  }
  html[dir="rtl"] .sidebar.mobile-open,
  html[dir="ltr"] .sidebar.mobile-open{transform:translateX(0)}

  html[dir="rtl"] .sidebar .brand,
  html[dir="rtl"] .sidebar .nav-item,
  html[dir="rtl"] .sidebar .sidebar-foot{justify-content:flex-start;text-align:right}
  html[dir="ltr"] .sidebar .brand,
  html[dir="ltr"] .sidebar .nav-item,
  html[dir="ltr"] .sidebar .sidebar-foot{justify-content:flex-start;text-align:left}

  html[dir="rtl"] .sidebar .nav-item.active::before{right:-12px;left:auto}
  html[dir="ltr"] .sidebar .nav-item.active::before{left:-12px;right:auto}

  html[dir="rtl"] .topbar{direction:rtl}
  html[dir="ltr"] .topbar{direction:ltr}
  html[dir="rtl"] .top-actions{margin-right:auto;margin-left:0}
  html[dir="ltr"] .top-actions{margin-left:auto;margin-right:0}
}