/* Parent portal in Arabic: Arabic font and mirrored left/right utilities.
   Scoped to html.ec-parent (set while the portal is mounted) so the rest of the app is untouched. */
html.ec-parent[lang="ar"] body,
html.ec-parent[lang="ar"] input,
html.ec-parent[lang="ar"] button,
html.ec-parent[lang="ar"] select,
html.ec-parent[lang="ar"] textarea { font-family: 'Cairo', 'Public Sans', system-ui, sans-serif; }

/* margins */
html.ec-parent[dir="rtl"] .ml-1 { margin-right: .25rem; }
html.ec-parent[dir="rtl"] .ml-1\.5 { margin-right: .375rem; }
html.ec-parent[dir="rtl"] .ml-4 { margin-right: 1rem; }
html.ec-parent[dir="rtl"] .ml-auto { margin-right: auto; }
html.ec-parent[dir="rtl"] .ml-1:not([class*="mr-"]),
html.ec-parent[dir="rtl"] .ml-1\.5:not([class*="mr-"]),
html.ec-parent[dir="rtl"] .ml-4:not([class*="mr-"]),
html.ec-parent[dir="rtl"] .ml-auto:not([class*="mr-"]) { margin-left: 0; }

/* paddings (icon inputs: pl-10 + pr-4 / pr-10) */
html.ec-parent[dir="rtl"] .pl-10 { padding-right: 2.5rem; }
html.ec-parent[dir="rtl"] .pr-10 { padding-left: 2.5rem; }
html.ec-parent[dir="rtl"] .pr-4 { padding-left: 1rem; }
html.ec-parent[dir="rtl"] .pr-3 { padding-left: .75rem; }
html.ec-parent[dir="rtl"] .pl-10:not([class*="pr-"]) { padding-left: 0; }
html.ec-parent[dir="rtl"] .pr-10:not([class*="pl-"]),
html.ec-parent[dir="rtl"] .pr-4:not([class*="pl-"]),
html.ec-parent[dir="rtl"] .pr-3:not([class*="pl-"]) { padding-right: 0; }

/* positioned icons and menus */
html.ec-parent[dir="rtl"] .left-3 { left: auto; right: .75rem; }
html.ec-parent[dir="rtl"] .right-3 { right: auto; left: .75rem; }
html.ec-parent[dir="rtl"] .left-0 { left: auto; right: 0; }
html.ec-parent[dir="rtl"] .right-0 { right: auto; left: 0; }

/* text alignment and borders */
html.ec-parent[dir="rtl"] .text-left { text-align: right; }
html.ec-parent[dir="rtl"] .text-right { text-align: left; }
html.ec-parent[dir="rtl"] .border-r { border-right-width: 0; border-left-width: 1px; }

/* directional icons point the other way */
html.ec-parent[dir="rtl"] svg.lucide-chevron-right,
html.ec-parent[dir="rtl"] svg.lucide-chevron-left,
html.ec-parent[dir="rtl"] svg.lucide-arrow-right,
html.ec-parent[dir="rtl"] svg.lucide-arrow-left,
html.ec-parent[dir="rtl"] svg.lucide-log-out,
html.ec-parent[dir="rtl"] svg.lucide-log-in,
html.ec-parent[dir="rtl"] svg.lucide-send { transform: scaleX(-1); }

/* emails, IDs and numbers stay left-to-right inside Arabic text */
html.ec-parent[dir="rtl"] input[type="email"],
html.ec-parent[dir="rtl"] input[type="tel"] { direction: ltr; text-align: right; }

/* ---------- Header controls (both languages) ---------- */
html.ec-parent .ec-pp-child {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 6px 0 12px;
  border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
html.ec-parent[dir="rtl"] .ec-pp-child { padding: 0 12px 0 6px; }
html.ec-parent[dir="rtl"] .ec-pp-child select { text-align: right; }
html.ec-parent .ec-pp-child:hover { border-color: #a5b4fc; }
html.ec-parent .ec-pp-child:focus-within { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, .18); }
html.ec-parent .ec-pp-child svg { color: #6366f1; flex: none; }
html.ec-parent .ec-pp-child select {
  width: clamp(200px, 30vw, 440px); height: 36px; padding: 0 4px; border: 0; background: transparent;
  font-size: 14px; font-weight: 600; color: #1f2937; text-overflow: ellipsis; cursor: pointer; outline: none;
  direction: ltr;   /* names are mostly Latin: keep their start visible (ellipsis at the end) in Arabic too */
}

html.ec-parent .ec-pp-seg {
  display: inline-flex; align-items: center; gap: 2px; height: 38px; padding: 3px;
  background: #eef2ff; border-radius: 12px; direction: ltr;
}
html.ec-parent .ec-pp-seg button {
  height: 32px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent;
  font-size: 13px; font-weight: 600; color: #4f46e5; cursor: pointer; transition: background .15s, color .15s;
}
html.ec-parent .ec-pp-seg button[lang="ar"] { font-family: 'Cairo', system-ui, sans-serif; }
html.ec-parent .ec-pp-seg button.on { background: #fff; color: #312e81; box-shadow: 0 1px 3px rgba(15, 23, 42, .15); cursor: default; }
html.ec-parent .ec-pp-seg button:not(.on):hover { background: rgba(255, 255, 255, .6); }
/* dark sign-in screen */
html.ec-parent [data-ec-theme] .ec-pp-seg { background: rgba(255, 255, 255, .08); border: 1px solid rgba(148, 163, 184, .25); }
html.ec-parent [data-ec-theme] .ec-pp-seg button { color: #c7d2fe; }
html.ec-parent [data-ec-theme] .ec-pp-seg button.on { background: #fff; color: #1e3a8a; }

html.ec-parent .ec-pp-hbtn { height: 38px; padding: 0 12px !important; border-radius: 12px !important; font-size: 13px !important; }
html.ec-parent .ec-pp-divider { width: 1px; height: 28px; margin: 0 4px; background: #e5e7eb; }

@media (max-width: 640px) {
  /* phones: child selector gets its own full-width row under the header controls */
  html.ec-parent header.sticky > div > div:last-child { flex-wrap: wrap; justify-content: flex-end; row-gap: 8px; }
  html.ec-parent .ec-pp-child { order: 99; flex: 1 0 100%; }
  html.ec-parent .ec-pp-child select { width: 100%; font-size: 13px; }
  html.ec-parent .ec-pp-seg button { min-width: 36px; padding: 0 9px; font-size: 0; }
  html.ec-parent .ec-pp-seg button[lang="en"]::after { content: "EN"; font-size: 12px; }
  html.ec-parent .ec-pp-seg button[lang="ar"]::after { content: "ع"; font-size: 14px; }
  html.ec-parent .ec-pp-hbtn { padding: 0 9px !important; }
  html.ec-parent .ec-pp-divider { display: none; }
}

/* ---------- School logo in the parent and student dashboard headers (not scoped: student portal too) ---------- */
.ec-school-logo {
  width: 38px; height: 38px; flex: none; object-fit: contain; padding: 2px;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
}
.ec-school-logo-btn { display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; cursor: pointer; }
.ec-school-logo-btn:hover .ec-school-logo { border-color: #a7f3d0; }

/* ---------- Responsive: overview cards and tablet-width header ---------- */
html.ec-parent .ec-pp-cards { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
@media (min-width: 641px) and (max-width: 1100px) {
  html.ec-parent .ec-pp-hbtn span { display: none; }                 /* Change Password: icon only */
  html.ec-parent header.sticky .md\:block { display: none; }          /* account name next to the avatar */
  html.ec-parent .ec-pp-child select { width: clamp(160px, 24vw, 260px); }
}

/* switches keep their left-to-right knob movement in Arabic */
html.ec-parent[dir="rtl"] button.rounded-full.w-10.h-6 { direction: ltr; }
/* room under the content so the floating Feedback button never covers the last row */
html.ec-parent #root .flex-1.overflow-y-auto { padding-bottom: 88px; }

/* ---------- Gradebook progress (parent + student portals; not scoped) ---------- */
.ec-gb-prog {
  display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 999px;
  background: #fef3c7; color: #92400e; font-size: 11px; font-weight: 600; white-space: nowrap;
}
.ec-gb-note {
  margin: 0; padding: 8px 10px; border-radius: 10px; background: #fffbeb; border: 1px solid #fde68a;
  color: #92400e; font-size: 12px; line-height: 1.5;
}
.ec-gb-catprog { display: block; margin-top: 1px; font-size: 11px; font-weight: 500; color: #b45309; }