/* =========================================================
   OSTAZY (أستاذي) — Brand Theme
   Live one-to-one tutoring. RTL-first.
   Indigo for trust, coral for the one thing to press.
   Readex Pro for headings, IBM Plex Sans Arabic for text.
   ========================================================= */

:root {
  /* Indigo: calm and trustworthy, a teacher's colour. White on it is 7.9:1. */
  --ostazy-primary: #4338CA;
  --ostazy-primary-rgb: 67, 56, 202;
  --ostazy-primary-600: #3730A3;
  --ostazy-primary-400: #6366F1;
  /* Links and secondary marks. 6.3:1 on white. */
  --ostazy-secondary: #4F46E5;
  --ostazy-secondary-rgb: 79, 70, 229;
  --ostazy-secondary-600: #4338CA;
  --ostazy-secondary-300: #A5B4FC;
  /* Coral: warm, and saved for the call to act ("اطلب مدرس", the balance).
     Text on it is the ink below, never white - white on coral is 2.8:1. */
  --ostazy-accent: #FF6B4A;
  --ostazy-accent-rgb: 255, 107, 74;
  --ostazy-accent-600: #FF8A6E;
  /* Coral dark enough to be text on white (5.2:1). */
  --ostazy-accent-text: #C2410C;
  --ostazy-ink: #1E1B4B;
  --ostazy-success: #16A34A;
  --ostazy-bg: #F7F7FC;
  --ostazy-surface: #FFFFFF;
  --ostazy-surface-2: #EEEEF8;
  --ostazy-text: #1E1B4B;
  --ostazy-muted: #5B5E7A;
  --ostazy-line: #E4E4F0;
  --ostazy-error: #DC2626;

  /* Softer than a school's corners: cards at 14px. */
  --ostazy-radius-sm: 0.5rem;
  --ostazy-radius: 0.875rem;
  --ostazy-radius-lg: 1.25rem;
  --ostazy-radius-xl: 1.75rem;
  /* Shadows instead of borders, tinted with the ink so they read as the brand's own. */
  --ostazy-shadow-sm: 0 1px 2px rgba(30, 27, 75, 0.05), 0 1px 3px rgba(30, 27, 75, 0.07);
  --ostazy-shadow: 0 10px 28px -14px rgba(30, 27, 75, 0.22), 0 2px 6px rgba(30, 27, 75, 0.05);
  --ostazy-shadow-lg: 0 24px 48px -24px rgba(30, 27, 75, 0.34), 0 8px 16px -12px rgba(30, 27, 75, 0.12);
  --ostazy-ring: 0 0 0 4px rgba(var(--ostazy-secondary-rgb), 0.2);

  --ostazy-gradient-deep: linear-gradient(135deg, #1E1B4B 0%, #3730A3 55%, #4338CA 100%);
  --ostazy-gradient-teal: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
  --ostazy-gradient-amber: linear-gradient(135deg, #FF6B4A 0%, #FF9A7A 100%);

  --ostazy-font: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --ostazy-font-display: "Readex Pro", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
}

/* =========================================================
   Dark mode
   =========================================================
   The brand does not change in the dark - indigo is indigo. What changes is the
   paper it is printed on: the backgrounds, the text, the lines between things,
   and the shadows, which have to be deeper to be visible at all on a dark surface.

   Written once, applied two ways. The media query is the reader's system
   setting, and it is skipped when the page carries an explicit light choice, so
   someone who picked light on a phone in night mode gets light. The attribute
   is that explicit choice, and it wins either way.

   #4338CA is a dark indigo, and dark on dark is a smudge: the primary lifts to
   #5B5BD6, which still carries white text (5.4:1). Links lift further, to
   #A5B4FC (9.3:1 on the background), because they are small text.
   ========================================================= */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ostazy-primary: #5B5BD6;
    --ostazy-primary-rgb: 91, 91, 214;
    --ostazy-primary-600: #4A49C4;
    --ostazy-primary-400: #7C7FF0;
    --ostazy-secondary: #A5B4FC;
    --ostazy-secondary-rgb: 165, 180, 252;
    --ostazy-secondary-600: #818CF8;
    --ostazy-accent: #FB8A6E;
    --ostazy-accent-rgb: 251, 138, 110;
    --ostazy-accent-600: #FF6B4A;
    --ostazy-accent-text: #FB8A6E;
    --ostazy-success: #22C55E;
    --ostazy-error: #F87171;

    --ostazy-bg: #12112A;
    --ostazy-surface: #1C1A3A;
    --ostazy-surface-2: #262449;
    --ostazy-text: #E8E8F7;
    --ostazy-muted: #A3A3C2;
    --ostazy-line: #2F2D55;

    /* Deeper and wider: a shadow tuned for white paper is invisible on dark. */
    --ostazy-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
    --ostazy-shadow: 0 10px 28px -14px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.4);
    --ostazy-shadow-lg: 0 24px 48px -24px rgba(0, 0, 0, 0.8), 0 8px 16px -12px rgba(0, 0, 0, 0.5);

    --ostazy-gradient-deep: linear-gradient(135deg, #0E0C24 0%, #2A2577 55%, #4338CA 100%);

    --ostazy-tint-success: #0D2B22;
    --ostazy-tint-danger: #2E1517;
    --ostazy-tint-warning: #2E1A14;
  }
}

:root[data-theme="dark"] {
  --ostazy-primary: #5B5BD6;
  --ostazy-primary-rgb: 91, 91, 214;
  --ostazy-primary-600: #4A49C4;
  --ostazy-primary-400: #7C7FF0;
  --ostazy-secondary: #A5B4FC;
  --ostazy-secondary-rgb: 165, 180, 252;
  --ostazy-secondary-600: #818CF8;
  --ostazy-accent: #FB8A6E;
  --ostazy-accent-rgb: 251, 138, 110;
  --ostazy-accent-600: #FF6B4A;
  --ostazy-accent-text: #FB8A6E;
  --ostazy-success: #22C55E;
  --ostazy-error: #F87171;

  --ostazy-bg: #12112A;
  --ostazy-surface: #1C1A3A;
  --ostazy-surface-2: #262449;
  --ostazy-text: #E8E8F7;
  --ostazy-muted: #A3A3C2;
  --ostazy-line: #2F2D55;

  --ostazy-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
  --ostazy-shadow: 0 10px 28px -14px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.4);
  --ostazy-shadow-lg: 0 24px 48px -24px rgba(0, 0, 0, 0.8), 0 8px 16px -12px rgba(0, 0, 0, 0.5);

  --ostazy-gradient-deep: linear-gradient(135deg, #0E0C24 0%, #2A2577 55%, #4338CA 100%);

  --ostazy-tint-success: #0D2B22;
  --ostazy-tint-danger: #2E1517;
  --ostazy-tint-warning: #2E1A14;
}

/* Bootstrap draws its own components from these, so they follow the theme
   instead of staying white in the dark. */
:root[data-theme="dark"],
:root[data-theme="dark"] body { color-scheme: dark; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]),
  :root:not([data-theme="light"]) body { color-scheme: dark; }
}

/* ---------- Bootstrap's own light surfaces ----------
   Bootstrap paints its inputs, menus, tables and chips white in its stylesheet, so they stay
   white on a dark page whatever our variables say.

   These are written once, unconditionally, in terms of the variables - not inside a dark-mode
   block. In the light theme --ostazy-surface is #FFFFFF and --ostazy-text is #1E1B4B, which is
   exactly what Bootstrap was already drawing, so the light theme comes out pixel for pixel
   what it was. In the dark theme the same rules follow the palette. One set of rules, no
   duplicated selector list, and nothing to keep in sync. */

.form-control,
.form-select,
.input-group-text {
  background-color: var(--ostazy-surface);
  color: var(--ostazy-text);
  border-color: var(--ostazy-line);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--ostazy-surface);
  color: var(--ostazy-text);
}

.form-control::placeholder { color: var(--ostazy-muted); }

.form-control:disabled,
.form-control[readonly] {
  background-color: var(--ostazy-surface-2);
  color: var(--ostazy-muted);
}

.dropdown-menu,
.modal-content,
.offcanvas,
.list-group-item,
.accordion-button,
.accordion-body {
  background-color: var(--ostazy-surface);
  color: var(--ostazy-text);
  border-color: var(--ostazy-line);
}

.dropdown-item { color: var(--ostazy-text); }
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--ostazy-surface-2);
  color: var(--ostazy-text);
}

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ostazy-text);
  --bs-table-border-color: var(--ostazy-line);
  --bs-table-striped-color: var(--ostazy-text);
  --bs-table-striped-bg: var(--ostazy-surface-2);
  --bs-table-hover-color: var(--ostazy-text);
  --bs-table-hover-bg: var(--ostazy-surface-2);
}

/* A rule between things, not a white bar across them. */
hr,
.dropdown-divider {
  border-color: var(--ostazy-line);
  color: var(--ostazy-line);
  opacity: 1;
}

/* The quiet grey chips. Light in the light theme, quiet in the dark one, rather than a white
   rectangle with white text in it. */
.bg-light,
.text-bg-light {
  background-color: var(--ostazy-surface-2) !important;
  color: var(--ostazy-text) !important;
}

.alert-light {
  background-color: var(--ostazy-surface-2);
  color: var(--ostazy-text);
  border-color: var(--ostazy-line);
}

.text-muted { color: var(--ostazy-muted) !important; }

/* ---------- Base ---------- */

html, body {
  background-color: var(--ostazy-bg);
  color: var(--ostazy-text);
  font-family: var(--ostazy-font);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ostazy-font-display);
  font-weight: 800;
  color: var(--ostazy-primary);
  letter-spacing: -0.01em;
}

a {
  color: var(--ostazy-secondary);
  text-decoration: none;
}
a:hover {
  color: var(--ostazy-primary);
}

::selection {
  background: rgba(var(--ostazy-accent-rgb), 0.35);
}

/* ---------- Brand mark ---------- */

.ostazy-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--ostazy-primary) !important;
}
.ostazy-brand .ostazy-mark {
  width: 30px;
  height: 30px;
  flex: none;
}
/* The name with, under it, what the place is: two lines that together stand no taller
   than the mark beside them. */
.ostazy-brand__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
}
.ostazy-brand__name {
  font-size: 1.35rem;
  font-weight: 800;
}
.ostazy-brand__sub {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ostazy-muted);
  white-space: nowrap;
}
.ostazy-brand__text.text-white .ostazy-brand__sub {
  color: rgba(255, 255, 255, 0.75);
}
.ostazy-tagline {
  color: var(--ostazy-muted);
  font-size: 0.85rem;
  font-weight: 600;
}

/* ---------- Navbar ---------- */

.ostazy-navbar {
  background-color: var(--ostazy-surface) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: var(--ostazy-shadow-sm);
}
.ostazy-navbar .nav-link {
  color: var(--ostazy-text) !important;
  font-weight: 600;
}
.ostazy-navbar .nav-link:hover {
  color: var(--ostazy-secondary) !important;
}

/* ---------- Buttons ---------- */

.btn {
  border-radius: var(--ostazy-radius-sm);
  font-weight: 700;
  padding-inline: 1.1rem;
}

/* Comfortable tap targets on touch screens — Bootstrap's .btn-sm (~27px) is too
   small to tap reliably; bump it up on narrow/mobile viewports specifically. */
@media (max-width: 767.98px) {
  .btn-sm {
    min-height: 40px;
    padding-block: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .navbar-toggler {
    min-height: 40px;
    min-width: 40px;
  }
}

.btn-primary {
  background-color: var(--ostazy-primary);
  border-color: var(--ostazy-primary);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--ostazy-primary-600) !important;
  border-color: var(--ostazy-primary-600) !important;
}

.btn-accent {
  background-color: var(--ostazy-accent);
  border-color: var(--ostazy-accent);
  color: var(--ostazy-ink);
}
.btn-accent:hover {
  background-color: var(--ostazy-accent-600);
  border-color: var(--ostazy-accent-600);
  color: var(--ostazy-ink);
}

.btn-outline-primary {
  color: var(--ostazy-primary);
  border-color: var(--ostazy-primary);
}
.btn-outline-primary:hover {
  background-color: var(--ostazy-primary);
  border-color: var(--ostazy-primary);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--ostazy-secondary-rgb), 0.25);
}

.btn-link {
  color: var(--ostazy-secondary);
}

/* ---------- Forms ---------- */

.form-control, .form-select {
  border-radius: var(--ostazy-radius-sm);
  border-color: rgba(15, 23, 42, 0.15);
}
.form-control:focus, .form-select:focus {
  border-color: var(--ostazy-secondary);
}
label, .form-label {
  font-weight: 700;
  color: var(--ostazy-text);
}
.text-danger {
  color: var(--ostazy-error) !important;
}

/* ---------- Cards ---------- */

.card {
  border: none;
  border-radius: var(--ostazy-radius);
  box-shadow: var(--ostazy-shadow-sm);
  background-color: var(--ostazy-surface);
}
.card:hover {
  box-shadow: var(--ostazy-shadow);
}

.ostazy-card {
  border-radius: var(--ostazy-radius);
  box-shadow: var(--ostazy-shadow-sm);
  border: 1px solid var(--ostazy-line);
  background-color: var(--ostazy-surface);
  padding: 2rem;
}

.ostazy-auth-card {
  max-width: 420px;
  margin: 3rem auto;
}

/* ---------- Student stat tiles (gamified dashboard) ---------- */

.ostazy-stat-tile {
  border-radius: var(--ostazy-radius);
  box-shadow: var(--ostazy-shadow);
  background-color: var(--ostazy-surface);
  padding: 1.5rem;
  text-align: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ostazy-stat-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--ostazy-shadow-lg);
}
.ostazy-stat-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 0.75rem;
}
.ostazy-stat-icon.icon-level { background-color: rgba(23, 37, 84, 0.1); }
.ostazy-stat-icon.icon-streak { background-color: rgba(var(--ostazy-accent-rgb), 0.15); }
.ostazy-stat-icon.icon-lessons { background-color: rgba(var(--ostazy-secondary-rgb), 0.12); }
.ostazy-stat-value {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
}
.ostazy-stat-label {
  color: var(--ostazy-muted);
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.ostazy-stat-sub {
  color: var(--ostazy-muted);
  font-size: 0.8rem;
  margin-top: 0.35rem;
}

/* Level progress: how close to the next level */
.ostazy-level-track {
  height: 10px;
  border-radius: 999px;
  background-color: rgba(23, 37, 84, 0.08);
  overflow: hidden;
  margin-top: 0.5rem;
}
.ostazy-level-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ostazy-secondary), var(--ostazy-accent));
  transition: width 0.4s ease;
}

/* ---------- Unit / lesson cards (Student browsing) ---------- */

.ostazy-unit-card {
  border-radius: var(--ostazy-radius);
  box-shadow: var(--ostazy-shadow-sm);
  border: 1px solid var(--ostazy-line);
  background-color: var(--ostazy-surface);
  padding: 1.5rem;
  height: 100%;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  display: flex;
  flex-direction: column;
}
.ostazy-unit-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--ostazy-shadow-lg);
  border-color: rgba(var(--ostazy-secondary-rgb), 0.35);
}
.ostazy-unit-number {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(var(--ostazy-accent-rgb), 0.15);
  color: var(--ostazy-accent-text);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.ostazy-lesson-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.25rem;
  border-radius: var(--ostazy-radius-sm);
  background-color: var(--ostazy-surface);
  box-shadow: var(--ostazy-shadow-sm);
  margin-bottom: 0.6rem;
  text-decoration: none;
  color: var(--ostazy-text);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ostazy-lesson-row:hover {
  transform: translateX(-3px);
  box-shadow: var(--ostazy-shadow);
  color: var(--ostazy-text);
}
.ostazy-lesson-status {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
}
.ostazy-lesson-status.status-completed { background-color: rgba(var(--ostazy-secondary-rgb), 0.15); color: var(--ostazy-secondary); }
.ostazy-lesson-status.status-inprogress { background-color: rgba(var(--ostazy-accent-rgb), 0.18); color: var(--ostazy-accent-text); }
.ostazy-lesson-status.status-notstarted { background-color: rgba(15, 23, 42, 0.06); color: var(--ostazy-muted); }
.ostazy-lesson-title { font-weight: 700; flex: 1; }

.ostazy-lesson-nav-btn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: var(--ostazy-radius);
  box-shadow: var(--ostazy-shadow-sm);
  padding: 1rem 1.25rem;
  text-decoration: none;
  color: var(--ostazy-text);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  border: 1px solid transparent;
}
.ostazy-lesson-nav-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--ostazy-shadow);
  color: var(--ostazy-text);
}
.ostazy-lesson-nav-btn .ostazy-nav-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  font-weight: 800;
}
.ostazy-lesson-nav-btn.nav-prev {
  background-color: rgba(var(--ostazy-secondary-rgb), 0.06);
  border-color: rgba(var(--ostazy-secondary-rgb), 0.18);
}
.ostazy-lesson-nav-btn.nav-prev .ostazy-nav-arrow {
  background-color: rgba(var(--ostazy-secondary-rgb), 0.15);
  color: var(--ostazy-secondary);
}
.ostazy-lesson-nav-btn.nav-prev .ostazy-nav-label { color: var(--ostazy-secondary); }

.ostazy-lesson-nav-btn.nav-next {
  background: linear-gradient(135deg, rgba(var(--ostazy-accent-rgb), 0.1), rgba(var(--ostazy-accent-rgb), 0.03));
  border-color: rgba(var(--ostazy-accent-rgb), 0.25);
  text-align: end;
}
.ostazy-lesson-nav-btn.nav-next .ostazy-nav-arrow {
  background-color: rgba(var(--ostazy-accent-rgb), 0.2);
  color: var(--ostazy-accent-text);
}
.ostazy-lesson-nav-btn.nav-next .ostazy-nav-label { color: var(--ostazy-accent-text); }
.ostazy-lesson-nav-btn.nav-next { flex-direction: row-reverse; }

.ostazy-nav-label {
  font-size: 0.78rem;
  font-weight: 800;
  margin-bottom: 0.15rem;
}

/* ---------- Portal accent bar ---------- */
/* Quiet per-portal differentiation: a thin top accent + a tone flag on the hero card,
   without giving each portal a fully separate stylesheet. */

.ostazy-portal-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--ostazy-radius-lg);
  box-shadow: var(--ostazy-shadow);
  background: var(--ostazy-gradient-deep);
  color: #fff;
  padding: 2.5rem;
  margin-top: 1.5rem;
}

.ostazy-portal-hero h1,
.ostazy-portal-hero h2,
.ostazy-portal-hero h3 {
  color: #fff;
}

/* The hero sets color:#fff for its own text, and everything inside inherits it — including
   a card, which has a white background. Any plain text in such a card came out white on
   white. A card is its own light surface, so it re-asserts its foreground. */
.ostazy-portal-hero .ostazy-card {
  color: var(--ostazy-text);
}

/* The eyebrow is tinted for light cards, so it needs its own treatment on the dark hero.
   Named per portal on purpose: `body .ostazy-portal-hero .ostazy-eyebrow` ties with
   `body.portal-student .ostazy-eyebrow` on specificity and loses on order, which left dark
   amber text sitting on the hero. */
body.portal-student .ostazy-portal-hero .ostazy-eyebrow,
body.portal-admin .ostazy-portal-hero .ostazy-eyebrow,
body .ostazy-portal-hero .ostazy-eyebrow {
  background-color: rgba(255, 255, 255, 0.16);
  color: #fff;
}

/* Direct children only — tiles inside the hero keep their own light surface and dark text. */
.ostazy-portal-hero > .text-muted,
.ostazy-portal-hero > .small,
.ostazy-portal-hero > p {
  color: rgba(255, 255, 255, 0.78) !important;
}

.ostazy-portal-hero::after {
  content: "";
  position: absolute;
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
  inset-inline-start: -6rem;
  top: -8rem;
  background: radial-gradient(circle at 40% 40%, rgba(99, 102, 241, 0.55), transparent 70%);
  pointer-events: none;
}

body.portal-student .ostazy-portal-hero::after {
  background: radial-gradient(circle at 40% 40%, rgba(255, 107, 74, 0.5), transparent 70%);
}
body.portal-admin .ostazy-portal-hero::after {
  background: radial-gradient(circle at 40% 40%, rgba(59, 91, 169, 0.6), transparent 70%);
}

/* Tiles sit on the hero, so they keep their own light surface and lift above it. */
.ostazy-portal-hero .ostazy-stat-tile {
  position: relative;
  z-index: 1;
}

.ostazy-portal-hero > * {
  position: relative;
  z-index: 1;
}

/* The eyebrow is tinted for light cards, so it needs its own treatment on the dark hero. */
body .ostazy-portal-hero .ostazy-eyebrow {
  background-color: rgba(255, 255, 255, 0.16);
  color: #fff;
}

/* Direct children only — tiles inside the hero keep their own light surface and dark text. */
.ostazy-portal-hero > .text-muted,
.ostazy-portal-hero > .small,
.ostazy-portal-hero > p {
  color: rgba(255, 255, 255, 0.78) !important;
}

.ostazy-eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 0.75rem;
}
body.portal-student .ostazy-eyebrow {
  background-color: rgba(var(--ostazy-accent-rgb), 0.12);
  color: var(--ostazy-accent-text);
}
body.portal-parent .ostazy-eyebrow {
  background-color: rgba(var(--ostazy-secondary-rgb), 0.12);
  color: var(--ostazy-primary-600);
}
body.portal-admin .ostazy-eyebrow {
  background-color: rgba(var(--ostazy-primary-rgb), 0.1);
  color: var(--ostazy-primary);
}

/* ---------- Rendered lesson content (Markdown output) ---------- */

.ostazy-content {
  font-size: 1.05rem;
  line-height: 1.9;
  color: var(--ostazy-text);
}
.ostazy-content strong {
  color: var(--ostazy-secondary);
  font-weight: 800;
}
body.portal-student .ostazy-content strong {
  color: var(--ostazy-accent-text);
  background-color: rgba(var(--ostazy-accent-rgb), 0.14);
  padding: 0.05rem 0.3rem;
  border-radius: 0.3rem;
}
.ostazy-content p {
  margin-bottom: 1rem;
}

.ostazy-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.95rem;
}
.ostazy-content th, .ostazy-content td {
  border: 1px solid rgba(15, 23, 42, 0.12);
  padding: 0.5rem 0.75rem;
  text-align: right;
}
.ostazy-content th {
  background-color: rgba(var(--ostazy-primary-rgb), 0.06);
  font-weight: 700;
}
.ostazy-content blockquote {
  border-inline-start: 4px solid var(--ostazy-secondary);
  background-color: rgba(var(--ostazy-secondary-rgb), 0.06);
  padding: 0.75rem 1rem;
  border-radius: 0 var(--ostazy-radius-sm) var(--ostazy-radius-sm) 0;
  margin: 1rem 0;
}
.ostazy-content pre {
  background-color: #1E1B4B;
  color: #E4E4F0;
  padding: 1rem;
  border-radius: var(--ostazy-radius-sm);
  overflow-x: auto;
  direction: rtl;
  unicode-bidi: plaintext;
  text-align: start;
}
.ostazy-content pre code {
  unicode-bidi: plaintext;
}
.ostazy-content code {
  background-color: rgba(15, 23, 42, 0.06);
  padding: 0.1rem 0.4rem;
  border-radius: 0.3rem;
}
.ostazy-content pre code {
  background: none;
  padding: 0;
}
.ostazy-content details {
  background-color: rgba(var(--ostazy-accent-rgb), 0.08);
  border: 1px solid rgba(var(--ostazy-accent-rgb), 0.25);
  border-radius: var(--ostazy-radius-sm);
  padding: 0.75rem 1rem;
  margin-top: 0.75rem;
}
.ostazy-content details summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--ostazy-accent-text);
}
.ostazy-content p:last-child {
  margin-bottom: 0;
}

/* ---------- Footer ---------- */

.ostazy-footer {
  color: var(--ostazy-muted);
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

/* ---------- Utility ---------- */

.text-muted {
  color: var(--ostazy-muted) !important;
}
.text-secondary-ostazy {
  color: var(--ostazy-secondary) !important;
}

/* ---------- .text-bg-* badge backfill ----------
   Bootstrap only ships these combined background+text-color utilities from v5.2 onward;
   this project is pinned to v5.1, so badges using them (text-bg-success, text-bg-danger, etc.)
   rendered with no background at all. Backfilled here using Bootstrap 5.1's own --bs-* vars. */

.text-bg-primary {
  color: #fff !important;
  background-color: var(--bs-primary) !important;
}
.text-bg-secondary {
  color: #fff !important;
  background-color: var(--bs-secondary) !important;
}
.text-bg-success {
  color: #fff !important;
  background-color: var(--bs-success) !important;
}
.text-bg-danger {
  color: #fff !important;
  background-color: var(--bs-danger) !important;
}
.text-bg-warning {
  color: #000 !important;
  background-color: var(--bs-warning) !important;
}
.text-bg-light {
  color: #000 !important;
  background-color: var(--bs-light) !important;
}

/* Bootstrap 5.1 draws the hamburger only inside navbar-light/dark. The portal navbar carries
   navbar-light now; this keeps the icon whatever happens to that class. */
.ostazy-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23172554' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.ostazy-toggler-word {
  font-weight: 700;
  font-size: 0.9rem;
}

/* ---------- A way back up: unit → all units, lesson → its unit ---------- */
.ostazy-backlink {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ostazy-primary);
  text-decoration: none;
}
.ostazy-backlink:hover {
  color: var(--ostazy-secondary);
  text-decoration: underline;
}

/* Inside the dark hero an outlined button must be drawn in white, or it vanishes. */
.ostazy-portal-hero .btn-outline-primary {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
}
.ostazy-portal-hero .btn-outline-primary:hover,
.ostazy-portal-hero .btn-outline-primary:focus {
  background-color: var(--ostazy-surface);
  border-color: #fff;
  color: var(--ostazy-primary);
}
.ostazy-portal-hero .ostazy-stat-tile {
  height: 100%;
}

/* The unit card and the order card are links now; they keep the text colour they had. */
a.ostazy-unit-card,
a.ostazy-unit-card:hover,
a.ostazy-order-card,
a.ostazy-order-card:hover {
  color: var(--ostazy-text);
  text-decoration: none;
}
.ostazy-unit-card.is-done .ostazy-unit-number {
  background-color: rgba(var(--ostazy-secondary-rgb), 0.15);
  color: var(--ostazy-secondary);
}

/* ---------- Quiz: every option is a whole-row tap target ---------- */
.ostazy-quiz .form-check {
  position: relative;
  margin: 0 0 0.5rem;
  padding: 0.7rem 0.9rem;
  padding-inline-start: 2.7rem;
  border: 1px solid var(--ostazy-line);
  border-radius: 12px;
  background-color: var(--ostazy-surface);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.ostazy-quiz .form-check-input {
  margin-inline-start: -1.9rem;
  margin-top: 0.3em;
  width: 1.2em;
  height: 1.2em;
  cursor: pointer;
}
.ostazy-quiz .form-check-label {
  display: block;
  cursor: pointer;
}
/* The label stretches over the whole row, so a tap anywhere on it picks the option. */
.ostazy-quiz .form-check-label::before {
  content: "";
  position: absolute;
  inset: 0;
}
.ostazy-quiz .form-check:has(.form-check-input:checked) {
  border-color: var(--ostazy-primary);
  background-color: rgba(var(--ostazy-primary-rgb), 0.06);
}
.ostazy-quiz__count {
  margin-bottom: 0.35rem;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--ostazy-muted);
}
.ostazy-quiz__question {
  margin-bottom: 0.9rem;
  font-size: 1.05rem;
  font-weight: 700;
}

/* ---------- pale tints for a marked paper ----------
   Right, wrong and "still being marked" rows on the parent's exam report. */
.ostazy-tint-success { background: var(--ostazy-tint-success, #EEF2FF); }
.ostazy-tint-danger { background: var(--ostazy-tint-danger, #FEF2F2); }
.ostazy-tint-warning { background: var(--ostazy-tint-warning, #FFFBEB); }

/* ---------- the teacher's album on their public page ----------
   A tight grid of same-shaped tiles; the caption sits on the picture and shows on hover,
   and always on a phone, where there is no hover. */
.ostazy-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.6rem;
}
.ostazy-gallery__item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 0.75rem;
  background: var(--ostazy-surface-2);
  aspect-ratio: 4 / 3;
}
.ostazy-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}
.ostazy-gallery__item:hover img { transform: scale(1.04); }
.ostazy-gallery__caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  padding: 0.35rem 0.5rem;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.75), transparent);
  color: #fff;
  font-size: 0.8rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.ostazy-gallery__item:hover .ostazy-gallery__caption { opacity: 1; }
@media (max-width: 767.98px) {
  .ostazy-gallery { grid-template-columns: repeat(2, 1fr); }
  .ostazy-gallery__caption { opacity: 1; }
}
#ostazy-photo .modal-content img { max-height: 85vh; object-fit: contain; background: #000; }

/* ---------- the teacher's lecture calendar ----------
   A month as a seven-column grid, Saturday first (the grid follows the page's direction, so
   it reads right to left). The markup has carried these class names since the calendar was
   built; the rules never existed, so the month rendered as one long column. */
.ba-cal {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.ba-cal__head {
  text-align: center;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--ostazy-muted);
  padding: 0.35rem 0;
}
.ba-cal__cell {
  min-height: 96px;
  background: var(--ostazy-surface);
  border: 1px solid var(--ostazy-line);
  border-radius: 0.6rem;
  padding: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.ba-cal__cell:hover { border-color: var(--ostazy-primary); }
.ba-cal__cell--empty {
  background: transparent;
  border-color: transparent;
  cursor: default;
}
.ba-cal__cell--empty:hover { border-color: transparent; }
.ba-cal__cell.is-past { background: var(--ostazy-surface-2); }
.ba-cal__cell.is-past .ba-cal__day { opacity: 0.6; }
.ba-cal__cell.is-today { border: 2px solid var(--ostazy-primary); box-shadow: 0 0 0 3px rgba(var(--ostazy-primary-rgb), 0.12); }
.ba-cal__day {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--ostazy-muted);
  line-height: 1;
}
.ba-cal__cell.is-today .ba-cal__day { color: var(--ostazy-primary); }
.ba-cal__chip {
  display: block;
  width: 100%;
  text-align: start;
  border: 0;
  border-radius: 0.4rem;
  padding: 0.15rem 0.4rem;
  font-size: 0.72rem;
  line-height: 1.35;
  color: #fff;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ba-cal__chip.is-ready { background: var(--ostazy-primary); }
.ba-cal__chip.is-nolink { background: var(--ostazy-accent); color: #1f2937; }
.ba-cal__chip.is-done { background: #94a3b8; }
.ba-cal__chip.is-cancelled { background: #fecaca; color: #7f1d1d; text-decoration: line-through; }
.ba-cal__time { font-weight: 700; margin-inline-end: 0.3rem; font-variant-numeric: tabular-nums; }
.ba-cal__key {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 0.2rem;
  vertical-align: middle;
  margin-inline-end: 0.25rem;
}
.ba-cal__key.is-ready { background: var(--ostazy-primary); }
.ba-cal__key.is-nolink { background: var(--ostazy-accent); }
.ba-cal__key.is-done { background: #94a3b8; }
.ba-cal__key.is-cancelled { background: #fecaca; }
@media (max-width: 767.98px) {
  .ba-cal { gap: 2px; }
  .ba-cal__head { font-size: 0.62rem; padding: 0.2rem 0; }
  .ba-cal__cell { min-height: 58px; padding: 0.2rem; border-radius: 0.4rem; gap: 0.15rem; }
  .ba-cal__day { font-size: 0.72rem; }
  /* Seven columns on a phone leave room for the time only; the title is a tap away. */
  .ba-cal__chip { font-size: 0.58rem; padding: 0.1rem 0.2rem; }
  .ba-cal__label { display: none; }
  .ba-cal__time { margin-inline-end: 0; }
}

/* ---------- Buying minutes ---------- */
/* The Fawry code: big and easy to read out to a cashier. Its own class, because ostazy-code
   is the dark code-sample block. */
.ostazy-paycode {
  text-align: center;
  background: var(--ostazy-surface-2);
  border: 2px dashed rgba(var(--ostazy-primary-rgb), 0.25);
  border-radius: var(--ostazy-radius);
  padding: 1.4rem 1rem;
}
.ostazy-paycode__label { color: var(--ostazy-muted); font-size: 0.9rem; }
.ostazy-paycode__value {
  font-family: var(--ostazy-font-display);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--ostazy-primary);
  direction: ltr;
}

/* A package or "hours" as a card that is its own radio button. */
.ostazy-choice {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 1rem;
  border: 2px solid var(--ostazy-line);
  border-radius: var(--ostazy-radius);
  background: var(--ostazy-surface);
  cursor: pointer;
}
.ostazy-choice:has(input[type="radio"]:checked) {
  border-color: var(--ostazy-primary);
  box-shadow: var(--ostazy-ring);
}
.ostazy-choice input[type="radio"] { margin-top: 0.3rem; accent-color: var(--ostazy-primary); }
.ostazy-choice__body { flex: 1; }
.ostazy-choice__price {
  display: block;
  font-family: var(--ostazy-font-display);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--ostazy-primary);
  margin: 0.25rem 0;
}

/* The balance, read at a glance. */
.ostazy-balance {
  font-family: var(--ostazy-font-display);
  font-weight: 700;
  font-size: 2rem;
  color: var(--ostazy-primary);
}

/* The chat: the rule on top, the thread scrolling under it, the box at the bottom.
   Right-to-left, so "mine" sits on the start side - the right. */
.ostazy-chat { display: flex; flex-direction: column; gap: 0.75rem; }
.ostazy-chat__rule {
  padding: 0.5rem 0.75rem;
  border-radius: var(--ostazy-radius-sm);
  background: rgba(var(--ostazy-accent-rgb), 0.1);
  color: var(--ostazy-text);
}
.ostazy-chat__messages {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  height: min(60vh, 34rem);
  overflow-y: auto;
  padding: 0.5rem 0.25rem;
}
.ostazy-chat__form { display: flex; gap: 0.5rem; align-items: flex-end; }
.ostazy-chat__form textarea { resize: none; }
.ostazy-msg { display: flex; flex-direction: column; max-width: min(80%, 34rem); }
.ostazy-msg--mine { align-self: flex-start; align-items: flex-start; }
.ostazy-msg--theirs { align-self: flex-end; align-items: flex-end; }
.ostazy-msg__bubble {
  padding: 0.55rem 0.85rem;
  border-radius: var(--ostazy-radius);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.6;
}
.ostazy-msg--mine .ostazy-msg__bubble {
  background: var(--ostazy-primary);
  color: #fff;
  border-start-start-radius: 0.25rem;
}
.ostazy-msg--theirs .ostazy-msg__bubble {
  background: var(--ostazy-bg);
  border: 1px solid var(--ostazy-line);
  color: var(--ostazy-text);
  border-start-end-radius: 0.25rem;
}
.ostazy-msg--blocked .ostazy-msg__bubble {
  background: transparent;
  color: var(--ostazy-muted);
  border: 1px dashed var(--ostazy-error);
  text-decoration: line-through;
}
.ostazy-msg__meta { font-size: 0.75rem; color: var(--ostazy-muted); margin-top: 0.2rem; }
.ostazy-msg__reason { display: block; color: var(--ostazy-error); }

/* The session room: the SDK draws itself in here. A fixed height so the video does not jump
   with every change around it. */
.ostazy-room {
  height: min(72vh, 640px);
  background: #0b1220;
  border-radius: var(--ostazy-radius);
  overflow: hidden;
}

/* Stars to pick: the inputs run 5..1 so "this one and the ones before it" is a sibling
   selector; row-reverse shows them 1..5. */
.ostazy-stars { display: inline-flex; flex-direction: row-reverse; gap: 0.25rem; }
.ostazy-stars input { position: absolute; opacity: 0; pointer-events: none; }
.ostazy-stars label {
  font-size: 2.25rem;
  line-height: 1;
  color: var(--ostazy-line);
  cursor: pointer;
  transition: color 0.15s;
}
.ostazy-stars input:checked ~ label,
.ostazy-stars label:hover,
.ostazy-stars label:hover ~ label { color: #F5A524; }
.ostazy-stars input:focus-visible + label { outline: 2px solid var(--ostazy-primary); border-radius: 0.25rem; }

/* The offer to install on a phone: a card rising from the bottom, above the tab bar. */
.ostazy-install-sheet {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 1080;
  padding: 0.75rem;
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(30, 27, 75, 0.35), transparent);
  animation: ostazy-sheet-up 0.35s ease-out;
}
.ostazy-install-sheet[hidden] { display: none; }
.ostazy-install-sheet__card {
  position: relative;
  max-width: 28rem;
  margin: 0 auto;
  padding: 1rem 1rem 0.5rem;
  border-radius: var(--ostazy-radius-lg);
  background: var(--ostazy-surface);
  color: var(--ostazy-text);
  box-shadow: var(--ostazy-shadow-lg);
}
.ostazy-install-sheet__close { position: absolute; top: 0.75rem; left: 0.75rem; }
.ostazy-install-sheet__icon { border-radius: 0.9rem; box-shadow: var(--ostazy-shadow-sm); }
.ostazy-install-sheet__perks { list-style: none; padding: 0; display: grid; gap: 0.25rem; }
.ostazy-install-sheet__steps { display: grid; gap: 0.35rem; padding-inline-start: 1.25rem; }
.ostazy-install-sheet__share {
  display: inline-block;
  padding: 0 0.3rem;
  border: 1px solid var(--ostazy-line);
  border-radius: 0.35rem;
}
@keyframes ostazy-sheet-up {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ostazy-install-sheet { animation: none; }
}

/* An "enter" button before the room opens: on show, plainly not yet, with when it will be. */
.ostazy-enter-wait {
  cursor: default;
  opacity: 0.85;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.25;
}
.ostazy-enter-wait:hover { background: transparent; color: var(--bs-secondary-color, inherit); }
.ostazy-enter-wait__when { font-size: 0.72rem; font-weight: 400; }

/* The teacher's students, one card each: initials, chips, the next session, three actions. */
.ostazy-student-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); }
.ostazy-student-card {
  padding: 1.1rem 1.2rem;
  border-radius: var(--ostazy-radius-lg);
  background: var(--ostazy-surface);
  border: 1px solid var(--ostazy-line);
  box-shadow: var(--ostazy-shadow);
}
.ostazy-student-card__avatar {
  flex: none;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(var(--ostazy-accent-rgb), 0.14);
  color: var(--ostazy-accent-text);
  font-family: var(--ostazy-font-display);
  font-weight: 700;
  font-size: 1.15rem;
}
.ostazy-student-card__name { font-family: var(--ostazy-font-display); font-weight: 700; font-size: 1.15rem; }
.ostazy-student-card__line { margin-top: 0.6rem; font-size: 0.92rem; }
.ostazy-student-card__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.ostazy-student-card__actions .btn { border-radius: 999px; }
.ostazy-chip {
  display: inline-block;
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  font-size: 0.78rem;
  background: rgba(var(--ostazy-primary-rgb), 0.08);
  color: var(--ostazy-primary);
}
.ostazy-chip--live { background: rgba(22, 163, 74, 0.12); color: var(--ostazy-success); font-weight: 600; }
.ostazy-chip--subject { background: rgba(var(--ostazy-accent-rgb), 0.12); color: var(--ostazy-accent-text); }
.ostazy-plan-form {
  margin-top: 0.9rem;
  padding: 0.9rem;
  border-radius: var(--ostazy-radius);
  background: var(--ostazy-bg);
  border: 1px dashed var(--ostazy-line);
}
.ostazy-day { position: relative; cursor: pointer; }
.ostazy-day input { position: absolute; opacity: 0; pointer-events: none; }
.ostazy-day span {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--ostazy-line);
  background: var(--ostazy-surface);
  font-size: 0.85rem;
}
.ostazy-day input:checked + span { background: var(--ostazy-primary); border-color: var(--ostazy-primary); color: #fff; }
.ostazy-day input:focus-visible + span { box-shadow: var(--ostazy-ring); }