/* Vazirmatn UI font + Greenlight RTL for this Persian BBB server.
   Color/theme are unchanged. */

@font-face {
  font-family: "Vazirmatn";
  src: url("/fonts/vazirmatn/Vazirmatn[wght].woff2") format("woff2-variations"),
       url("/fonts/vazirmatn/Vazirmatn[wght].woff2") format("woff2 supports variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

html,
body,
body.lang-fa,
#app {
  font-family: "Vazirmatn", Tahoma, sans-serif !important;
}

/* BBB/MUI set Source Sans Pro on buttons, selects, and menus, which
   overrides body inheritance — including English device names. */
*,
*::before,
*::after {
  font-family: "Vazirmatn", Tahoma, sans-serif !important;
}

/* Greenlight's Title/Helmet often sets dir=ltr for fa_IR (underscore),
   which leaves punctuation and mixed Persian/English LTR. Force RTL. */
html {
  direction: rtl !important;
}

code,
kbd,
pre,
samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  direction: ltr;
  unicode-bidi: isolate;
}

[class^="icon-bbb-"],
[class*=" icon-bbb-"],
.bbb-icons,
[class^="icon-bbb-"]::before,
[class*=" icon-bbb-"]::before {
  font-family: "bbb-icons" !important;
}

.material-icons,
.material-icons-outlined,
.material-symbols-outlined {
  font-family: "Material Icons", "Material Symbols Outlined" !important;
}

/* Bootstrap 5 LTR utilities compiled to physical left/right. Mirror them. */
.text-start { text-align: right !important; }
.text-end { text-align: left !important; }
.float-start { float: right !important; }
.float-end { float: left !important; }

.ms-0 { margin-left: 0 !important; margin-right: 0 !important; }
.ms-1 { margin-left: 0 !important; margin-right: 0.25rem !important; }
.ms-2 { margin-left: 0 !important; margin-right: 0.5rem !important; }
.ms-3 { margin-left: 0 !important; margin-right: 1rem !important; }
.me-0 { margin-right: 0 !important; margin-left: 0 !important; }
.me-1 { margin-right: 0 !important; margin-left: 0.25rem !important; }
.me-2 { margin-right: 0 !important; margin-left: 0.5rem !important; }
.me-3 { margin-right: 0 !important; margin-left: 1rem !important; }

.ps-0 { padding-left: 0 !important; padding-right: 0 !important; }
.ps-1 { padding-left: 0 !important; padding-right: 0.25rem !important; }
.ps-2 { padding-left: 0 !important; padding-right: 0.5rem !important; }
.pe-1 { padding-right: 0 !important; padding-left: 0.25rem !important; }
.pe-2 { padding-right: 0 !important; padding-left: 0.5rem !important; }

.setting-select button,
.simple-select button {
  text-align: right !important;
}

input.search-bar {
  padding: 9px 40px 9px 9px !important;
  background-position: right 13px center !important;
}

#homepage-hero a .hi-s {
  transform: scaleX(-1);
}

/* Greenlight: keep the toast tray LTR so it does not bounce L→R. */
body:not(:has(#app)) .Toastify__toast-container {
  direction: ltr !important;
}

body:not(:has(#app)) .Toastify__toast-container--bottom-right {
  right: 1em !important;
  left: auto !important;
}

body:not(:has(#app)) .Toastify__toast,
body:not(:has(#app)) .Toastify__toast-body {
  font-family: "Vazirmatn", Tahoma, sans-serif !important;
  direction: rtl;
  text-align: right;
}

/* Meeting client: recording confirm is a Toastify card. Packaged styles are
   LTR (text-align:left, icon margin-right) which overlap Persian text. */
#app .Toastify__toast-container {
  direction: rtl !important;
}

#app .Toastify__toast,
#app .Toastify__toast-body {
  direction: rtl !important;
  text-align: right !important;
}

#app .Toastify__toast h3,
#app .Toastify__toast p {
  text-align: right !important;
}

#app .Toastify__toast div:has(> button[data-test="confirmRecordingButton"]) {
  direction: ltr !important;
  display: flex !important;
  justify-content: space-around !important;
  align-items: center !important;
}

#app button[data-test="confirmRecordingButton"] {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
}

#app button[data-test="confirmRecordingButton"] > div,
#app button[data-test="confirmRecordingButton"] svg {
  margin: 0 !important;
  flex-shrink: 0 !important;
}

/* Bootstrap form-check keeps the box on the physical left. Put it at RTL start. */
.form-check {
  padding-left: 0 !important;
  padding-right: 1.5em !important;
  text-align: right;
}

.form-check .form-check-input {
  float: right !important;
  margin-left: 0 !important;
  margin-right: -1.5em !important;
}

.dropdown-menu-end[data-bs-popper] {
  right: auto !important;
  left: 0 !important;
}

.dropdown-item {
  text-align: right !important;
}

#room-settings > div > div > div{
  flex-direction: row-reverse !important;
}

#room-settings > div > div > div > div.ps-4.col > div > label{
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* Settings toggles: label sits after the switch with hardcoded LTR margin. */
#simpleModal .MuiSwitch-root + span {
  margin-left: 0 !important;
  margin-right: 0.5rem !important;
}

/* Profile camera: virtual-background switch has LTR marginRight: 1rem. */
#app .MuiSwitch-root:has([data-test="virtualBackgroundToggle"]) {
  margin-right: 0 !important;
  margin-left: 1rem !important;
}

/* Poll/quiz live results: Recharts uses physical LTR coordinates. html[dir=rtl]
   makes Y-axis labels sit on the axis and X ticks look packed. Keep the SVG
   LTR; Unicode bidi still renders Persian correctly. */
#app .recharts-responsive-container {
  direction: ltr !important;
  display: block !important;
  width: 100% !important;
}

#app .recharts-wrapper,
#app .recharts-surface {
  direction: ltr !important;
}