/* =========================================================
   MAJLIS (مجلس) — Brand Theme
   Online meetings. RTL-first.
   Royal purple for the brand, saffron for the one thing to press.
   Noto Kufi Arabic for headings, Noto Sans Arabic for text.
   ========================================================= */

:root {
  /* Royal purple: the colour of a majlis, a gathering one is invited to. White on it is 9.9:1. */
  --majlis-primary: #5B2A86;
  --majlis-primary-rgb: 91, 42, 134;
  --majlis-primary-600: #4A1F70;
  --majlis-primary-400: #7A45A8;
  /* Links and secondary marks. 7.4:1 on white. */
  --majlis-secondary: #6B3FA0;
  --majlis-secondary-rgb: 107, 63, 160;
  --majlis-secondary-600: #5B2A86;
  --majlis-secondary-300: #CDB3F0;
  /* Saffron: warm, and saved for the call to act ("ابدأ اجتماع").
     Text on it is the ink below, never white - white on saffron is 2.2:1; the ink is 8.1:1. */
  --majlis-accent: #E9A23B;
  --majlis-accent-rgb: 233, 162, 59;
  --majlis-accent-600: #F2B65E;
  /* Saffron dark enough to be text on white (5.4:1). */
  --majlis-accent-text: #9A5B00;
  --majlis-ink: #1F1235;
  /* Green dark enough to be text on white (5:1), not only an icon. */
  --majlis-success: #15803D;
  --majlis-bg: #F8F6FB;
  --majlis-surface: #FFFFFF;
  --majlis-surface-2: #F0EBF6;
  --majlis-text: #1F1235;
  --majlis-muted: #5E5670;
  --majlis-line: #E7E1EF;
  /* The edge of something you type in: 3.5:1 on white, so the box is visible (WCAG 1.4.11). */
  --majlis-input-border: #8E83A3;
  /* Headings: the brand purple in the light, a lifted lilac in the dark (dark purple on the
     dark page is under 4:1). */
  --majlis-heading: #5B2A86;
  /* The purple as text: identical by day, lifted at night so small purple words keep 4.5:1. */
  --majlis-primary-text: #5B2A86;
  /* The ring a keyboard user follows from control to control. */
  --majlis-focus: #6B3FA0;
  --majlis-error: #DC2626;

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

  --majlis-gradient-deep: linear-gradient(135deg, #1F1235 0%, #4A1F70 55%, #5B2A86 100%);
  --majlis-gradient-teal: linear-gradient(135deg, #7A45A8 0%, #B07CD8 100%);
  --majlis-gradient-amber: linear-gradient(135deg, #E9A23B 0%, #F3C27A 100%);

  --majlis-font: "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --majlis-font-display: "Noto Kufi Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
}

/* =========================================================
   Dark mode
   =========================================================
   The brand does not change in the dark - purple is purple. 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.

   #5B2A86 is a dark purple, and dark on dark is a smudge: the primary lifts to
   #8B5CC4, which still carries white text (4.8:1). Links lift further, to
   #CDB3F0, because they are small text.
   ========================================================= */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --majlis-primary: #8B5CC4;
    --majlis-primary-rgb: 139, 92, 196;
    --majlis-primary-600: #7A4BB3;
    --majlis-primary-400: #A57ED6;
    --majlis-secondary: #CDB3F0;
    --majlis-secondary-rgb: 205, 179, 240;
    --majlis-secondary-600: #B58BE0;
    --majlis-accent: #F0B357;
    --majlis-accent-rgb: 240, 179, 87;
    --majlis-accent-600: #E9A23B;
    --majlis-accent-text: #F0B357;
    --majlis-success: #22C55E;
    --majlis-error: #F87171;

    --majlis-bg: #141019;
    --majlis-surface: #1F1A29;
    --majlis-surface-2: #2A2337;
    --majlis-text: #F1EDF7;
    --majlis-muted: #B3A9C4;
    --majlis-line: #342C45;
    --majlis-input-border: #7A6E92;
    --majlis-heading: #CDB3F0;
    --majlis-primary-text: #C3A2EC;
    --majlis-focus: #CDB3F0;

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

    --majlis-gradient-deep: linear-gradient(135deg, #0D0A14 0%, #3A1D57 55%, #5B2A86 100%);

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

:root[data-theme="dark"] {
  --majlis-primary: #8B5CC4;
  --majlis-primary-rgb: 139, 92, 196;
  --majlis-primary-600: #7A4BB3;
  --majlis-primary-400: #A57ED6;
  --majlis-secondary: #CDB3F0;
  --majlis-secondary-rgb: 205, 179, 240;
  --majlis-secondary-600: #B58BE0;
  --majlis-accent: #F0B357;
  --majlis-accent-rgb: 240, 179, 87;
  --majlis-accent-600: #E9A23B;
  --majlis-accent-text: #F0B357;
  --majlis-success: #22C55E;
  --majlis-error: #F87171;

  --majlis-bg: #141019;
  --majlis-surface: #1F1A29;
  --majlis-surface-2: #2A2337;
  --majlis-text: #F1EDF7;
  --majlis-muted: #B3A9C4;
  --majlis-line: #342C45;
  --majlis-input-border: #7A6E92;
  --majlis-heading: #CDB3F0;
  --majlis-primary-text: #C3A2EC;
  --majlis-focus: #CDB3F0;

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

  --majlis-gradient-deep: linear-gradient(135deg, #0D0A14 0%, #3A1D57 55%, #5B2A86 100%);

  --majlis-tint-success: #0D2B22;
  --majlis-tint-danger: #2E1517;
  --majlis-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 --majlis-surface is #FFFFFF and --majlis-text is #1F1235, 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(--majlis-surface);
  color: var(--majlis-text);
  border-color: var(--majlis-input-border);
}

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

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

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

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

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

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

/* A rule between things, not a white bar across them. */
hr,
.dropdown-divider {
  border-color: var(--majlis-line);
  color: var(--majlis-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(--majlis-surface-2) !important;
  color: var(--majlis-text) !important;
}

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

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

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

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

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

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

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

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

.majlis-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--majlis-primary-text) !important;
}
.majlis-brand .majlis-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. */
.majlis-brand__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
}
.majlis-brand__name {
  font-size: 1.35rem;
  font-weight: 800;
}
.majlis-brand__sub {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--majlis-muted);
  white-space: nowrap;
}
.majlis-brand__text.text-white .majlis-brand__sub {
  color: rgba(255, 255, 255, 0.75);
}

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

.majlis-navbar {
  background-color: var(--majlis-surface) !important;
  border-bottom: 1px solid var(--majlis-line);
  box-shadow: var(--majlis-shadow-sm);
}
.majlis-navbar .nav-link {
  color: var(--majlis-text) !important;
  font-weight: 600;
}
.majlis-navbar .nav-link:hover {
  color: var(--majlis-secondary) !important;
}

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

.btn {
  border-radius: var(--majlis-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(--majlis-primary);
  border-color: var(--majlis-primary);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--majlis-primary-600) !important;
  border-color: var(--majlis-primary-600) !important;
}

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

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

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

/* Keyboard focus is always visible, whatever the control: a solid ring in the brand's lilac
   that holds 3:1 on both themes. Mouse clicks do not draw it. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible,
.majlis-tab:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--majlis-focus);
  outline-offset: 2px;
  box-shadow: none;
}
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
  outline: 2px solid var(--majlis-focus);
  outline-offset: 1px;
}

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

/* Bootstrap's grey reads 3.6:1 on the dark surface; the theme's own muted ink reads 7:1. */
.btn-outline-secondary {
  color: var(--majlis-muted);
  border-color: var(--majlis-input-border);
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  color: var(--majlis-text);
  background-color: var(--majlis-surface-2);
  border-color: var(--majlis-input-border);
}

/* Icon-only buttons (theme switch): a square, not a pill with a lonely emoji in it. */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0 !important;
  border-radius: 999px !important;
  line-height: 1;
}

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

.form-control, .form-select {
  border-radius: var(--majlis-radius-sm);
  border-color: var(--majlis-input-border);
}
.form-control:focus, .form-select:focus {
  border-color: var(--majlis-secondary);
}
label, .form-label {
  font-weight: 700;
  color: var(--majlis-text);
}
.form-text {
  color: var(--majlis-muted);
}
/* A placeholder is an example, not an answer: lighter than what the person types. */
.form-control::placeholder {
  color: var(--majlis-muted);
  opacity: 0.7;
}
/* The field that failed says so with its edge as well as the message under it. */
.form-control.input-validation-error,
.form-select.input-validation-error {
  border-color: var(--majlis-error);
}
.form-control.input-validation-error:focus {
  box-shadow: 0 0 0 0.25rem rgba(220, 38, 38, 0.2);
}
.field-validation-error,
.validation-summary-errors {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.875rem;
  font-weight: 600;
}
.validation-summary-errors ul {
  margin: 0 0 0.75rem;
  padding: 0.6rem 0.9rem;
  list-style: none;
  border-radius: var(--majlis-radius-sm);
  background: rgba(220, 38, 38, 0.08);
}
/* Emails, codes and links are left-to-right text in a right-to-left form: they read and type
   from the left. */
input[dir="ltr"],
textarea[dir="ltr"] {
  text-align: left;
}
.text-danger {
  color: var(--majlis-error) !important;
}

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

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

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

.majlis-auth-card {
  max-width: 440px;
  margin: 3rem auto;
}
.majlis-auth-card h1 {
  font-size: 1.6rem;
}
/* The auth pages sit on the public site: a band of space around the card. */
.majlis-auth {
  padding: clamp(1.5rem, 5vw, 3.5rem) 0;
}
.majlis-auth .majlis-auth-card {
  margin: 0 auto;
}
.majlis-auth__alt {
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--majlis-line);
  text-align: center;
  font-size: 0.95rem;
}
.majlis-auth__alt a {
  font-weight: 700;
}

/* ---------- Page header: one per page, the same everywhere ----------
   The page's h1 with its one-line purpose under it, and its main actions at the end. */
.majlis-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.majlis-page-head h1 {
  font-size: clamp(1.45rem, 3vw, 1.85rem);
  margin-bottom: 0.25rem;
}
.majlis-page-head p {
  margin: 0;
  color: var(--majlis-muted);
}
.majlis-page-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* A heading over a group of cards, with an optional count or link at its end. */
.majlis-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 2rem 0 0.85rem;
}
.majlis-section-head h2 {
  font-size: 1.2rem;
  margin: 0;
}
.majlis-section-head .count {
  color: var(--majlis-muted);
  font-size: 0.9rem;
}

/* ---------- Empty states: what goes here, and the one thing to do about it ---------- */
.majlis-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2rem 1.25rem;
  text-align: center;
  color: var(--majlis-muted);
}
.majlis-empty__icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--majlis-surface-2);
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
}
.majlis-empty__title {
  color: var(--majlis-text);
  font-weight: 700;
  font-size: 1.05rem;
}
.majlis-empty p {
  margin: 0;
  max-width: 28rem;
}
.majlis-empty .btn {
  margin-top: 0.5rem;
}

/* ---------- Rows in a card: meetings, sessions, team ---------- */
.majlis-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.majlis-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  padding: 1rem 1.25rem;
}
.majlis-list__item + .majlis-list__item {
  border-top: 1px solid var(--majlis-line);
}
.majlis-list__main {
  flex: 1 1 14rem;
  min-width: 0;
}
.majlis-list__title {
  display: block;
  font-weight: 700;
  color: var(--majlis-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.majlis-list__title:hover {
  color: var(--majlis-primary-text);
}
.majlis-list__meta {
  color: var(--majlis-muted);
  font-size: 0.875rem;
  margin-top: 0.15rem;
}
.majlis-list__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ---------- Tables ----------
   Bootstrap 5.1 draws a 2px currentColor rule under the head: a black bar in the light, a
   white one in the dark. A quiet head instead, in the muted ink. */
.table > :not(:first-child) {
  border-top: 1px solid var(--majlis-line);
}
.table > :not(caption) > * > * {
  border-bottom-color: var(--majlis-line);
}
.table > thead th {
  color: var(--majlis-muted);
  font-size: 0.85rem;
  font-weight: 700;
  border-bottom-color: var(--majlis-line);
  white-space: nowrap;
}

/* ---------- Status pills ---------- */
.majlis-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
  background: var(--majlis-surface-2);
  color: var(--majlis-text);
}
.majlis-pill--live {
  background: rgba(22, 163, 74, 0.12);
  color: var(--majlis-success);
}
.majlis-pill--live::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
}
.majlis-pill--accent {
  background: rgba(var(--majlis-accent-rgb), 0.18);
  color: var(--majlis-accent-text);
}

/* ---------- Admin welcome band ---------- */
.majlis-portal-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--majlis-radius-lg);
  box-shadow: var(--majlis-shadow);
  background: var(--majlis-gradient-deep);
  color: #fff;
  padding: 2rem 2.25rem;
}
.majlis-portal-hero h1,
.majlis-portal-hero h2,
.majlis-portal-hero h3 {
  color: #fff;
}
.majlis-portal-hero > p,
.majlis-portal-hero > .small {
  color: rgba(255, 255, 255, 0.82) !important;
}

.majlis-eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 0.75rem;
  background-color: rgba(var(--majlis-primary-rgb), 0.1);
  color: var(--majlis-primary-text);
}
.majlis-portal-hero .majlis-eyebrow {
  background-color: rgba(255, 255, 255, 0.16);
  color: #fff;
}

/* A card that is a link to a section of the panel. */
.majlis-tile {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  height: 100%;
  color: var(--majlis-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.majlis-tile:hover {
  color: var(--majlis-text);
  border-color: rgba(var(--majlis-primary-rgb), 0.45);
  box-shadow: var(--majlis-shadow);
  transform: translateY(-2px);
}
.majlis-tile__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background: var(--majlis-surface-2);
  font-size: 1.2rem;
  margin-bottom: 0.4rem;
}
.majlis-tile__title {
  font-weight: 700;
  font-size: 1.05rem;
}
.majlis-tile__meta {
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--majlis-primary-text);
}
@media (prefers-reduced-motion: reduce) {
  .majlis-tile, .majlis-tile:hover { transition: none; transform: none; }
}




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

.majlis-footer {
  color: var(--majlis-muted);
  border-top: 1px solid var(--majlis-line);
  font-size: 0.9rem;
}
.majlis-footer a {
  color: var(--majlis-muted);
}
.majlis-footer a:hover {
  color: var(--majlis-primary-text);
}

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

.text-muted {
  color: var(--majlis-muted) !important;
}
.text-secondary-majlis {
  color: var(--majlis-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. */
.majlis-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='%235B2A86' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

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

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

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

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


/* The offer to install on a phone: a card rising from the bottom, above the tab bar. */
.majlis-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(31, 18, 53, 0.35), transparent);
  animation: majlis-sheet-up 0.35s ease-out;
}
.majlis-install-sheet[hidden] { display: none; }
.majlis-install-sheet__card {
  position: relative;
  max-width: 28rem;
  margin: 0 auto;
  padding: 1rem 1rem 0.5rem;
  border-radius: var(--majlis-radius-lg);
  background: var(--majlis-surface);
  color: var(--majlis-text);
  box-shadow: var(--majlis-shadow-lg);
}
.majlis-install-sheet__close { position: absolute; top: 0.75rem; left: 0.75rem; }
.majlis-install-sheet__icon { border-radius: 0.9rem; box-shadow: var(--majlis-shadow-sm); }
.majlis-install-sheet__perks { list-style: none; padding: 0; display: grid; gap: 0.25rem; }
.majlis-install-sheet__steps { display: grid; gap: 0.35rem; padding-inline-start: 1.25rem; }
.majlis-install-sheet__share {
  display: inline-block;
  padding: 0 0.3rem;
  border: 1px solid var(--majlis-line);
  border-radius: 0.35rem;
}
@keyframes majlis-sheet-up {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .majlis-install-sheet { animation: none; }
}

.majlis-chip {
  display: inline-block;
  padding: 0.15rem 0.65rem;
  border-radius: 999px;
  font-size: 0.78rem;
  background: rgba(var(--majlis-primary-rgb), 0.08);
  color: var(--majlis-primary-text);
}

/* Bootstrap 5.1 has no text-bg-info either: the plan "from a team" badge drew no background. */
.text-bg-info {
  color: var(--majlis-ink) !important;
  background-color: var(--majlis-secondary-300) !important;
}

/* The menu icon in the dark: the light lilac, not the dark purple it is drawn in by day. */
:root[data-theme="dark"] .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='%23CDB3F0' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .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='%23CDB3F0' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
  }
}

/* ---------- The signed-in header (members and the panel) ---------- */
.majlis-navbar .navbar-nav .nav-link {
  padding-inline: 0.75rem;
  border-radius: var(--majlis-radius-sm);
  white-space: nowrap;
}
.majlis-navbar .navbar-nav .nav-link.active {
  color: var(--majlis-primary-text) !important;
  background: rgba(var(--majlis-primary-rgb), 0.08);
}
.majlis-navbar .majlis-user {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.majlis-navbar .btn-sm {
  border-radius: 999px;
}

/* The eye in a password box (password-field.js): a whole thumb-sized target at the box's end. */
.position-relative > input + .btn-link.position-absolute {
  inset-inline-end: 0 !important;
  width: 2.75rem;
  height: 100%;
  min-height: 0;
  top: 0 !important;
  transform: none !important;
  display: grid;
  place-items: center;
}

/* Bootstrap 5.1 paints table text #212529 and navbar-light links rgba(0,0,0,.55) in its own
   stylesheet, whatever the theme: dark text on the dark page. Both follow the palette. */
.table {
  color: var(--majlis-text);
}
.majlis-topbar .navbar-nav .nav-link {
  color: var(--majlis-text);
}
.majlis-topbar .navbar-nav .nav-link:hover,
.majlis-topbar .navbar-nav .nav-link.active {
  color: var(--majlis-primary-text);
}

/* Bootstrap's red is 4.2:1 as text; the theme's error red holds 4.5:1 on both themes. */
.btn-outline-danger {
  color: var(--majlis-error);
  border-color: var(--majlis-error);
}
.btn-outline-danger:hover,
.btn-outline-danger:focus {
  color: #fff;
  background-color: #DC2626;
  border-color: #DC2626;
}