/* Palette/fonts ported from the static quran-halaqah.github.io site */
:root {
  --bg: #fbf7ef;
  --bg-alt: #f3ecdd;
  --surface: #ffffff;
  --text: #2e2a24;
  --text-muted: #6b6258;
  --accent: #2f6f4f;
  --accent-dark: #234f39;
  --gold: #c8a24a;
  --border: #e6dcc8;
  --danger: #b54034;
  --danger-bg: #fbe9e7;
  --shadow: 0 2px 10px rgba(46, 42, 36, 0.06);
  --radius: 14px;
}

* {
  box-sizing: border-box;
}

/* Layout rules like display:flex would otherwise beat the hidden attribute. */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

/* The off-canvas drawer sits at translateX(100%), overflowing the viewport,
   so the whole page could be dragged sideways. `clip` (not `hidden`) trims it
   without turning the root into a scroll container — `hidden` on html+body
   breaks vertical scrolling. */
html {
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: "Tajawal", "Segoe UI", Tahoma, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.8;
  direction: rtl;
}

a {
  color: var(--accent-dark);
  text-decoration: none;
}

a:hover {
  color: var(--accent);
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
}

header.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.site-header .container {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 10px 20px;
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.brand-logo {
  height: 52px;
  width: auto;
  display: block;
}

/* The slot beside the logo: the user's name on the home page, the course's
   name inside a course, nothing anywhere else. */
.header-context {
  font-size: 1.15rem;
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* One nav, two shapes: an inline link row in the desktop header, a fixed
   bottom tab bar on smaller screens (the media query below). */
.main-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 2px;
  margin-inline-start: auto;
  min-width: 0;
}

.main-nav .nav-link,
.main-nav form button,
.main-nav .nav-more {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 10px;
  color: var(--text);
  font-size: 0.98rem;
  font-weight: 500;
  font-family: inherit;
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.main-nav .nav-link:hover,
.main-nav form button:hover,
.main-nav .nav-more:hover {
  background: var(--bg-alt);
  color: var(--accent-dark);
}

.main-nav .nav-link[aria-current="page"] {
  background: var(--bg-alt);
  color: var(--accent-dark);
  font-weight: 700;
}

.main-nav [data-lucide] {
  width: 17px;
  height: 17px;
  stroke-width: 1.75;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  /* Text is enough in the header row; icons return in the tab bar. */
  .main-nav [data-lucide] {
    display: none;
  }

  /* The header row holds only the primary destinations — everything else
     waits in the drawer behind "المزيد", exactly as on the phone. The row
     can never overflow, however many features a course grows. */
  .main-nav .nav-link:not(.is-primary),
  .main-nav form {
    display: none;
  }
}

@media (max-width: 1023.98px) {
  /* iOS Safari force-zooms into any control whose font is under 16px; give
     touch devices exactly 16px so tapping a field never zooms the page. The
     !important is deliberate: this is a device-wide floor that must beat
     every more specific form rule. */
  input, select, textarea {
    font-size: 16px !important;
  }

  .brand-logo {
    height: 42px;
  }

  .main-nav {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 30;
    margin: 0;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: stretch;
    gap: 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 12px rgba(46, 42, 36, 0.07);
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  }

  /* The bar holds only the primary destinations; everything else waits in
     the drawer behind "المزيد". */
  .main-nav .nav-link:not(.is-primary),
  .main-nav form,
  .main-nav .nav-xl {
    display: none;
  }

  .main-nav .nav-link,
  .main-nav .nav-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1 1 0;
    min-width: 0;
    padding: 4px 2px;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-muted);
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
  }

  .main-nav .nav-link[aria-current="page"] {
    background: none;
    color: var(--accent-dark);
    font-weight: 700;
  }

  .main-nav [data-lucide] {
    width: 21px;
    height: 21px;
  }

  .has-app-nav main {
    padding-bottom: 96px;
  }
}

/* Public landing page */
body.landing-page {
  touch-action: pan-y;
}

.landing-page main {
  padding: 0;
}

.landing-page main > .container {
  max-width: none;
  padding: 0;
}

/* The hero fills the first screen; everything after it scrolls normally. It
   stays light because the logo's calligraphy is dark green and would sink
   into a dark background. */
.landing-hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 28px;
  padding: 32px 16px 64px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 18%, rgba(200, 162, 74, 0.22), transparent 58%),
    radial-gradient(circle at 12% 88%, rgba(47, 111, 79, 0.20), transparent 52%),
    linear-gradient(170deg, var(--bg) 0%, var(--bg-alt) 100%);
}

.landing-hero::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--accent), var(--gold), var(--accent));
}

.landing-section {
  padding: 96px 20px;
}

.landing-section--alt {
  background: var(--bg-alt);
}

/* The one full-bleed band: white cards on deep green carry the offering. */
.landing-section--courses {
  background: linear-gradient(160deg, var(--accent-dark), var(--accent));
  color: var(--surface);
}

.landing-section--courses h2,
.landing-section--courses .landing-section-lead {
  color: var(--surface);
}

.landing-section--courses h2::after {
  background: var(--gold);
}

.landing-block {
  max-width: 60rem;
  margin: 0 auto;
}

.landing-block h2 {
  margin: 0 0 24px;
  font-size: clamp(2rem, 4.5vw, 2.6rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.landing-block h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin-top: 14px;
  border-radius: 999px;
  background: var(--gold);
}

.landing-block p {
  margin: 0 0 16px;
  color: var(--text-muted);
  font-size: 1.12rem;
  line-height: 2;
}

.landing-section-lead {
  margin-bottom: 34px;
}

/* A tile that is not itself a link — it carries its own action. */
.hub-card {
  cursor: default;
}

.hub-card form {
  margin-top: 12px;
}

.badge {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
}

.badge--open {
  background: rgba(47, 111, 79, 0.12);
  color: var(--accent-dark);
}

.badge--closed {
  background: var(--bg-alt);
  color: var(--text-muted);
}

.badge--teacher {
  background: rgba(200, 162, 74, 0.18);
  color: #8a6a23;
}

.badge--alert {
  background: var(--danger-bg);
  color: var(--danger);
}

/* The accounts overview: enrollment badges at the row's end, wrapping on
   narrow screens. */
.account-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.account-badges .badge {
  margin-top: 0;
}

/* ملفات الدورة — one row per material, the action at the row's end. */
.material-add {
  margin-bottom: 18px;
}

.material-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.material-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  color: var(--text);
}

.material-row [data-lucide] {
  width: 20px;
  height: 20px;
  color: var(--accent-dark);
  stroke-width: 1.75;
  flex-shrink: 0;
}

.material-title {
  font-weight: 600;
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.material-hint {
  color: var(--text-muted);
  font-size: 0.85rem;
}

a.material-row:hover {
  border-color: var(--accent);
  color: var(--accent-dark);
}

.material-row form {
  margin: 0;
}

.member-meta {
  color: var(--text-muted);
  margin: 4px 0;
}

.member-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.member-actions form {
  margin: 0;
}

/* One row per course on the account page: the course, then its labeled
   role/status selects and the save button, bottom-aligned with them. */
.account-enrol-row {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}

.account-enrol-row + .account-enrol-row {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.account-enrol-course {
  font-weight: 600;
  flex: 1;
  min-width: 0;
  align-self: center;
}

.account-enrol-row .btn {
  height: 2.5rem;
}

.account-head .badge {
  margin-top: 4px;
}

@media (max-width: 640px) {
  .material-row {
    flex-wrap: wrap;
  }
  .material-hint {
    display: none;
  }
}

.hub-role {
  display: block;
  margin-top: 4px;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-muted);
}

.landing-subject + .landing-subject {
  margin-top: 48px;
}

.landing-subject-title {
  margin: 0 0 18px;
  font-size: 1.5rem;
  color: var(--surface);
  opacity: 0.92;
}

.landing-subject-title::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin-top: 10px;
  border-radius: 999px;
  background: var(--gold);
}

.landing-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 22px;
  align-items: stretch;
}

.landing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(20, 45, 33, 0.22);
  padding: 30px 28px;
  /* A floor, not a lock: cards in a row already stretch to match, this keeps
     a short one from looking stunted next to the group above it. */
  min-height: 17rem;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}

.landing-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--gold), var(--accent));
  transform: scaleX(0.28);
  transform-origin: right;
  transition: transform .3s ease;
}

.landing-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 44px rgba(20, 45, 33, 0.3);
}

.landing-card:hover::before {
  transform: scaleX(1);
}

.landing-card h4 {
  margin: 0 0 12px;
  font-size: 1.3rem;
  color: var(--accent-dark);
}

.landing-card p {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.9;
}

.landing-card-note {
  margin-top: 14px !important;
  font-size: 0.95rem;
  color: #8a6d20;
}

.landing-card-btn {
  display: inline-block;
  margin-top: auto;
  align-self: center;
  text-align: center;
}

/* Closed courses keep the button's shape so the cards stay level, but it is
   plainly not something you can press. */
.landing-card-btn.is-disabled {
  background: var(--bg-alt);
  border-color: var(--border);
  color: var(--text-muted);
  cursor: default;
  pointer-events: none;
}

.landing-card-btn,
.landing-cta .btn {
  transition: transform .2s ease, box-shadow .2s ease;
}

.landing-card-btn:hover,
.landing-cta .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(35, 79, 57, 0.28);
}

.landing-faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--gold);
  border-radius: 14px;
  margin-bottom: 12px;
  padding: 2px 22px;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.landing-faq details[open] {
  border-inline-start-color: var(--accent);
  box-shadow: var(--shadow);
}

.landing-faq summary {
  cursor: pointer;
  padding: 18px 0;
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--accent-dark);
  list-style: none;
}

.landing-faq summary::-webkit-details-marker {
  display: none;
}

.landing-faq summary::after {
  content: "+";
  float: left;
  color: var(--accent);
  font-size: 1.5rem;
  line-height: 1;
  transition: transform .2s ease;
}

.landing-faq details[open] summary::after {
  content: "\2212";
  transform: rotate(180deg);
}

.landing-faq details p {
  margin: 0 0 16px;
}

.landing-footer {
  background: var(--accent-dark);
  color: var(--surface);
  text-align: center;
  padding: 40px 20px;
}

.landing-footer p {
  margin: 0;
}

.landing-footer-copy {
  margin-top: 8px !important;
  font-size: 0.9rem;
  opacity: 0.75;
}

/* Only hidden once the script says it can reveal them, so without JS the
   page is simply all there. */
.rq-reveal .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .6s ease, transform .6s ease;
}

.rq-reveal .reveal.is-in {
  opacity: 1;
  transform: none;
}

.landing-cards .reveal:nth-child(2) { transition-delay: .08s; }
.landing-cards .reveal:nth-child(3) { transition-delay: .16s; }
.landing-cards .reveal:nth-child(4) { transition-delay: .24s; }
.landing-cards .reveal:nth-child(5) { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  .rq-reveal .reveal,
  .landing-card,
  .landing-card::before,
  .landing-card-btn,
  .landing-cta .btn {
    transition: none;
  }

  .landing-card:hover {
    transform: none;
  }
}

/* The logo is portrait (1055:1600), so cap the width by viewport height too. */
.landing-hero .rq-logo {
  --rq-width: min(300px, 64vw, 32vh);
}

.landing-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transition: opacity .45s ease, transform .45s ease;
}

.landing-cta--inline {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 28px;
}

/* Hold the buttons back until the logo has drawn itself. `rq-anim` is set in
   the head, so the buttons never flash before the script hides them — and
   without JS the class is absent and they are simply there. */
.rq-anim .landing-hero .rq-logo:not(.is-done) ~ .landing-cta {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .rq-anim .landing-hero .rq-logo:not(.is-done) ~ .landing-cta {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

.landing-cta .btn {
  min-width: 240px;
  padding: 12px 26px;
  font-size: 1.05rem;
}

.dawra-select {
  margin: 0;
}

.dawra-select select {
  height: 2.1rem;
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: 0.85rem;
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 40;
}

.sidebar-overlay.is-visible {
  display: block;
}

.sidebar {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  bottom: 0;
  width: 280px;
  max-width: 84vw;
  background: var(--surface);
  border-inline-end: 1px solid var(--border);
  z-index: 50;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 2px;
  overflow-y: auto;
}

.sidebar.is-open {
  transform: translateX(0);
}

.sidebar-close {
  align-self: flex-start;
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted);
  padding: 4px 8px;
  margin-bottom: 8px;
  border-radius: 6px;
}

.sidebar-close:hover {
  background: var(--bg-alt);
  color: var(--text);
}

.sidebar-user {
  font-weight: 700;
  font-size: 1rem;
  padding: 8px 12px 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
  color: var(--text);
}

.sidebar a,
.sidebar form button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
  background: none;
  border: none;
  cursor: pointer;
  text-align: start;
  width: 100%;
  text-decoration: none;
}

.sidebar a [data-lucide],
.sidebar form button [data-lucide] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke-width: 1.75;
}

.sidebar a:hover,
.sidebar form button:hover {
  background: var(--bg-alt);
  color: var(--accent-dark);
}

.sidebar form {
  display: block;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  transition: background 0.15s ease, border-color 0.15s ease,
    box-shadow 0.15s ease, transform 0.05s ease;
}

.btn [data-lucide] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke-width: 1.75;
}

.btn:hover {
  background: var(--bg-alt);
  border-color: #d8cdb6;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(35, 79, 57, 0.18);
}

.btn-primary:hover {
  background: var(--accent-dark);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 8px rgba(35, 79, 57, 0.24);
}

.btn-danger {
  background: var(--danger);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(143, 51, 40, 0.18);
}

.btn-danger:hover {
  background: #8f3328;
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 8px rgba(143, 51, 40, 0.24);
}

.btn-warning {
  background: var(--gold);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(160, 124, 46, 0.18);
}

.btn-warning:hover {
  background: #a07c2e;
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 8px rgba(160, 124, 46, 0.24);
}

.btn-sm {
  padding: 7px 15px;
  font-size: 0.85rem;
}

main {
  padding: 32px 0 60px;
}

/* Every stacked box on a page keeps the same gap the lists use. */
.card + .card,
.card + .session-list,
.session-list + .card,
.session-list + .session-list,
.card + .session-entry--add,
.session-entry--add + .card,
.card + form,
.session-list + form {
  margin-top: 8px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}

.card > summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--accent-dark);
  display: flex;
  align-items: center;
  list-style: none;
}
.card > summary::-webkit-details-marker { display: none; }
.card > summary::marker { display: none; }
.card > summary::after {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-inline-start: auto;
  background-color: var(--text-muted);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transition: transform 0.15s ease;
}

details.card[open] > summary::after {
  transform: rotate(-90deg);
}

.nav-chevron {
  display: inline-block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background-color: var(--text-muted);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}

.card > summary + * {
  margin-top: 14px;
}

.card + .card {
  margin-top: 8px;
}

.page-header {
  margin-bottom: 22px;
}

.page-header h2 {
  margin: 0;
}

.page-header > p {
  margin: 4px 0 0;
  color: var(--text-muted);
}

.section-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Dashboard sections */
.dashboard-section {
  margin-top: 28px;
}

.add-student {
  margin-top: 28px;
}

.teacher-hub {
  display: grid;
  /* Always two per row, so a tile never grows past half the width. */
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 32px;
}

.hub-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 36px 16px;
  border-radius: var(--radius);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  font-size: 1.05rem;
  font-weight: 700;
  transition: background 0.12s ease;
}

.hub-btn:hover {
  background: var(--accent-light, #fbf1d8);
}

.hub-btn [data-lucide] {
  width: 36px;
  height: 36px;
  stroke-width: 1.5;
}

.alpha-group {
  margin-top: 20px;
}

.alpha-letter {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  padding: 0 4px;
  margin-bottom: 0;
}

.section-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6em;
  padding: 0 6px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-alt);
  border-radius: 999px;
}

.section-count.is-alert {
  color: var(--danger, #b54034);
  background: var(--danger-bg, #fbe9e7);
}

/* Student triage list */
.student-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.student-list li + li .student-row {
  border-top: 1px solid var(--border);
}

.student-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  color: var(--text);
  transition: background 0.12s ease;
}

.student-row:hover {
  background: var(--bg-alt);
}

.pending-actions {
  display: flex;
  gap: 8px;
  flex: none;
}

.pending-actions form {
  display: inline;
}

.pending-actions button {
  padding: 6px 14px;
  font-size: 0.85rem;
}

.student-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.student-name {
  font-weight: 700;
}

.student-meta {
  color: var(--text-muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

/* Student stat rings */
.ring-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  /* Same 8px rhythm as the card-to-card spacing, horizontally and below. */
  gap: 8px;
  margin-bottom: 8px;
}

/* The grid's own gap spaces these; the generic card-to-card margin would
   otherwise offset the second card and leave the two boxes unequal heights. */
.ring-grid > .card + .card {
  margin-top: 0;
}

.ring-item {
  text-align: center;
}

.ring {
  position: relative;
  width: 116px;
  height: 116px;
  margin: 0 auto;
  display: grid;
  place-items: center;
}

/* The donut is a masked pseudo-element so the mask does not swallow the
   percentage sitting in the middle. */
.ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    var(--accent) 0 var(--present),
    var(--gold) var(--present) var(--through-excused),
    var(--danger) var(--through-excused) 100%
  );
  -webkit-mask: radial-gradient(farthest-side, transparent 62%, #000 63%);
  mask: radial-gradient(farthest-side, transparent 62%, #000 63%);
}

.ring--single::before {
  background: conic-gradient(var(--accent) 0 var(--present), var(--bg-alt) var(--present) 100%);
}

.ring--empty::before {
  background: var(--bg-alt);
}

.ring-value {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--accent-dark);
}

.ring--empty .ring-value {
  color: var(--text-muted);
}

.ring-title {
  margin: 12px 0 6px;
  font-weight: 700;
}

.ring-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.ring-legend .dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-left: 6px;
}

.dot--ok { background: var(--accent); }
.dot--warn { background: var(--gold); }
.dot--bad { background: var(--danger); }

/* Own points, one bar per category */
.points-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}

.points-label {
  flex: 0 0 40%;
  font-size: 0.9rem;
}

.points-bar {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(to left, var(--accent) var(--width), var(--bg-alt) var(--width));
}

.points-bar.is-negative {
  background: linear-gradient(to left, var(--danger) var(--width), var(--bg-alt) var(--width));
}

.points-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-weight: 700;
}

table.session-table {
  width: 100%;
  border-collapse: collapse;
}

table.session-table th,
table.session-table td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--border);
  text-align: start;
}

.login-form {
  max-width: 380px;
  margin: 48px auto;
}

.login-form h2 {
  text-align: center;
  margin: 0 0 20px;
}

.login-form .btn {
  width: 100%;
  margin-top: 4px;
}

.login-form .auth-links {
  margin: 14px 0 0;
  text-align: center;
}

.login-form .auth-links a {
  display: inline-block;
  padding: 4px 0;
}

/* Login / registration: card fixed and centered, no page scroll. */
/* No header on the auth pages — the box carries the logo itself, so the page
   must stay scrollable for the taller forms on small screens. */
body.auth-page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.auth-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 4px;
}

.auth-logo img {
  height: 76px;
  width: auto;
}

.auth-page main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.auth-page main > .container {
  width: min(380px, 100%);
}

.auth-page .login-form {
  margin: 0;
  width: 100%;
  max-width: none;
}

.login-form input {
  width: 100%;
  padding: 10px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
}

.password-field {
  position: relative;
  display: block;
  margin-bottom: 12px;
}

.password-field input {
  margin-bottom: 0;
  padding-left: 42px;
}

.password-toggle {
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  padding: 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
}

.password-toggle:hover {
  color: var(--text);
}

.wizard-actions {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}

.wizard-actions .btn {
  flex: 1;
  width: auto;
  margin-top: 0;
}

.page-header--actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.page-header--actions .page-header-sub {
  margin: 4px 0 0;
  color: var(--text-muted);
}

.page-actions {
  display: flex;
  gap: 8px;
}

.password-toggle svg {
  width: 18px;
  height: 18px;
}

.empty-state {
  color: var(--text-muted);
}

.grading-form .form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 14px;
}

.grading-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.grading-form input,
.grading-form textarea,
.grading-form select {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  min-width: 120px;
  height: 2.5rem;
}

.grading-form select:not([multiple]) {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b6258'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 10px center;
  padding-left: 28px;
}

.grading-form .list-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.grading-form select[multiple] {
  height: auto;
  min-width: 180px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  min-height: unset;
}

#surah-ranges-container {
  margin: 4px 0 10px;
}

.surah-range-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.surah-range-label {
  font-size: 0.875rem;
  font-weight: 500;
  min-width: 100px;
}

.surah-range-row label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.surah-range-row input[type="number"] {
  width: 70px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  min-width: unset;
}

.surah-range-row .surah-range-errors {
  width: 56px;
}

.session-entry-link {
  flex: 1;
  color: inherit;
  text-decoration: none;
}

.session-entry--meeting {
  cursor: pointer;
  transition: background 0.12s ease;
}

.session-entry--meeting:hover {
  background: var(--bg-alt);
}

.session-entry--meeting.is-scheduled {
  background: #f2faf5;
  border-color: #c6dece;
}

.session-entry--meeting.is-cancelled {
  background: #fdf3f2;
  border-color: #ecc8c5;
}

.session-entry--meeting.is-activity {
  background: #fef9e7;
  border-color: #e8d78a;
}

.meeting-status-select {
  padding: 3px 6px;
  border: none;
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 0.82rem;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b6258'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 8px center;
  padding-left: 22px;
  cursor: pointer;
}

.meeting-status-select.status-scheduled { background-color: #f2faf5; }
.meeting-status-select.status-cancelled { background-color: #fdf3f2; }
.meeting-status-select.status-activity  { background-color: #fef9e7; }

.session-entry--add {
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px dashed var(--border);
  background: var(--bg-alt);
  color: var(--text-muted);
}

.session-entry--add summary {
  display: flex;
  align-items: center;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.session-entry--add summary::-webkit-details-marker {
  display: none;
}

.session-entry--add summary span {
  flex: 1;
  font-size: 0.9rem;
}

.session-entry--add summary [data-lucide] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke-width: 1.75;
  transition: opacity 0.12s ease;
}

.session-entry--add summary:hover [data-lucide] {
  opacity: 0.7;
}

.btn-edit-session {
  display: flex;
  align-items: center;
  color: var(--text-muted);
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
  opacity: 0.5;
}

.btn-edit-session:hover {
  opacity: 1;
}

.btn-edit-session [data-lucide] {
  width: 15px;
  height: 15px;
  stroke-width: 2;
}

.btn-delete-session {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
  opacity: 0.5;
}

.btn-delete-session:hover {
  opacity: 1;
}

.session-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.session-entry {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
}

.session-entry.is-pass {
  background: #f2faf5;
  border-color: #c6dece;
}

.session-entry.is-fail {
  background: #fdf3f2;
  border-color: #ecc8c5;
}

.session-entry-date {
  font-size: 0.82rem;
  color: var(--text-muted);
  white-space: nowrap;
  padding-top: 2px;
  min-width: 6rem;
}

.session-entry-type {
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  padding-top: 2px;
  min-width: 3.5rem;
}

.session-entry-details {
  flex: 1;
  font-size: 0.875rem;
  line-height: 1.7;
}

.session-entry-errors {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.session-entry-notes {
  font-size: 0.8rem;
  color: var(--text-muted);
  /* Same width on every row so the remarks all start at the same edge,
     but capped so a narrow screen doesn't squeeze the surah column. */
  width: 12rem;
  max-width: 30%;
  flex-shrink: 0;
  padding-top: 2px;
}

.session-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  background: #fbf1d8;
  color: #9c7a2e;
  border: 2px solid #e8d49a;
}

.tag-chip.is-selected {
  border-color: #9c7a2e;
}

.tag-chip-x {
  display: none;
  opacity: 0.65;
  font-size: 0.85rem;
  line-height: 1;
}

.tag-chip.is-selected .tag-chip-x {
  display: inline;
}

.session-grade-slot {
  /* Reserved so a مراجعة row (no grade) lines up with the others. */
  min-width: 5.5rem;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}

.session-grade-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.session-grade-badge.grade-pass {
  background: #d6f0e0;
  color: #1d6b40;
}

.session-grade-badge.grade-fail {
  background: #fcdede;
  color: #9b2020;
}

.meta-list {
  margin: 0 0 14px;
  font-size: 0.85rem;
}

.meta-list span + span {
  margin-inline-start: 24px;
}

.meta-list .meta-label {
  color: var(--text-muted);
}

.messages {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.messages li {
  padding: 10px 16px;
  border-radius: var(--radius);
  margin-bottom: 8px;
}

.messages .success {
  background: #e3f3e8;
  color: var(--accent-dark);
  border: 1px solid #bfe0cb;
}

.messages .error {
  background: #fbe9e7;
  color: #b3261e;
  border: 1px solid #f0c4c0;
}

.surah-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.surah-list a {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  color: var(--text);
}

.surah-list a:hover {
  border-color: var(--accent);
}

.surah-list .due-badge {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.8rem;
  color: var(--accent-dark);
  font-weight: 600;
}

.search-box {
  margin: 16px 0 24px;
}

.search-box input[type="search"] {
  width: 100%;
  padding: 14px 18px;
  font-size: 1rem;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.search-box input[type="search"]:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47, 111, 79, 0.12);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
  margin-top: 16px;
}

.card-grid .card h3 {
  margin: 0 0 8px;
  font-size: 1.1rem;
}

.card-grid .card .word {
  font-family: "Amiri", serif;
  font-size: 1.4rem;
  color: var(--accent-dark);
}

.card-grid .card p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.word-list {
  list-style: none;
  margin: 16px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.word-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  box-shadow: var(--shadow);
}

.word-item .word {
  font-family: "Amiri", serif;
  font-size: 1.4rem;
  color: var(--accent-dark);
  margin-bottom: 6px;
}

.word-item .meaning {
  color: var(--text);
}

.word-item .ayah-ref {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.toc {
  margin: 0 0 24px;
  padding: 14px 20px;
  background: var(--bg-alt);
  border-radius: var(--radius);
}

.toc h2 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.toc ul {
  margin: 0;
  padding-inline-start: 20px;
}

.toc li + li {
  margin-top: 4px;
}

/* Attendance page */
.attendance-list {
  display: flex;
  flex-direction: column;
}

.attendance-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
}

.att-options {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.att-opt input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.att-opt span {
  display: inline-block;
  padding: 5px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-muted);
  transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease;
  white-space: nowrap;
  user-select: none;
}

.att-opt-present input:checked ~ span {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent-dark);
}

.att-opt-excused input:checked ~ span {
  background: var(--gold);
  color: #fff;
  border-color: #9c7a2e;
}

.att-opt-absent input:checked ~ span {
  background: var(--danger);
  color: #fff;
  border-color: #8f3328;
}

/* Badge groups (tajweed / ghareeb / rafiq) — single-select chips */
.badge-group-row {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin: 10px 0;
}

.badge-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.badge-group-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
}

.badge-group-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.badge-chip {
  display: inline-block;
  padding: 5px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-muted);
  transition: background 0.1s, color 0.1s, border-color 0.1s;
  user-select: none;
}

.badge-chip.is-selected {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent-dark);
}

.badge-chip.badge-chip--pos.is-selected,
.tag-chip.tag-chip--pos.is-selected {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent-dark);
}

.badge-chip.badge-chip--mid.is-selected,
.tag-chip.tag-chip--mid.is-selected {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
}

.badge-chip.badge-chip--neg.is-selected,
.tag-chip.tag-chip--neg.is-selected {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}

/* Naqqat (points) pages */
.naqqat-sub-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.88rem;
  margin: 18px 0 6px;
  color: var(--text);
}

.naqqat-hint {
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.naqqat-auto-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  background: var(--gold, #c9a227);
  color: #fff;
}

.card > summary.auto-summary .naqqat-auto-badge { margin-inline-start: auto; }
.card > summary.auto-summary::after { margin-inline-start: 8px; }

.section-chips-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
  white-space: nowrap;
}

.naqqat-student-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.naqqat-student-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.naqqat-student-name { font-weight: 500; flex: 1; }

.naqqat-points-badge {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.naqqat-points-badge.points-pos { color: var(--accent-dark); }
.naqqat-points-badge.points-neg { color: var(--danger); }
.naqqat-points-badge.points-zero { color: var(--text-muted); }

.naqqat-points-input {
  width: 80px;
  text-align: center;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 6px);
  background: var(--input-bg, var(--card-bg));
  color: var(--text);
  font-size: 0.9rem;
}

.naqqat-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  cursor: pointer;
}

.badge-group-chips--inline { align-items: center; }

/* ── Tech console (English / LTR) ─────────────────────────────────────────── */
body.tech {
  direction: ltr;
  text-align: left;
}

.tech-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tech-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
}

.tech-heading {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0;
  flex: 1;
}

.tech-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tech-section {
  margin-bottom: 32px;
}

.tech-section h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 1rem;
}

.tech-count {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-alt);
  border-radius: 999px;
  padding: 2px 10px;
}

.tech-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.tech-table th,
.tech-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
  vertical-align: middle;
}

.tech-table thead th {
  background: var(--bg-alt);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.tech-table tr:last-child td {
  border-bottom: none;
}

.tech-actions-col {
  width: 1%;
  white-space: nowrap;
}

.tech-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.tech-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 9px;
  background: var(--bg-alt);
  color: var(--text-muted);
}

.tech-tag.is-teacher {
  background: rgba(47, 111, 79, 0.12);
  color: var(--accent-dark);
}

/* الجلسات: the dawra picker rides in the summary row, far left, and only
   while the card is open. */
.sessions-card > summary {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sessions-card > summary > span {
  flex: 1;
}

.sessions-dawra-select {
  margin: 0;
  display: none;
  gap: 8px;
}

.sessions-card[open] > summary .sessions-dawra-select {
  display: flex;
}

.sessions-dawra-select select {
  height: 2.1rem;
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: 0.85rem;
}

/* The site-wide dropdown (dropdown.js). The native select stays for the
   value and for validation, so it is hidden without being display:none. */
.dropdown {
  position: relative;
  display: inline-block;
  min-width: 120px;
}

/* Fixed, so the field does not grow as more options are ticked. */
.dropdown--multi {
  width: 180px;
}

.dropdown select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.dd-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 2.5rem;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  text-align: start;
  cursor: pointer;
}

.dd-toggle:hover:not(:disabled) {
  border-color: var(--accent);
}

.dd-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.dd-toggle:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.dd-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dd-label.is-placeholder {
  color: var(--text-muted);
}

.dd-caret {
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-inline: 5px solid transparent;
  border-top: 6px solid var(--text-muted);
}

.dropdown:has(.dd-panel:not([hidden])) .dd-caret {
  transform: rotate(180deg);
}

.dd-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  inset-inline-end: 0;
  width: max-content;
  min-width: 100%;
  max-width: min(320px, 80vw);
  max-height: 264px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 6px 20px rgba(46, 42, 36, 0.14);
}

.dropdown.is-up .dd-panel {
  top: auto;
  bottom: calc(100% + 4px);
}

.dd-group {
  padding: 8px 10px 4px;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.dd-option {
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 0.92rem;
  white-space: nowrap;
  cursor: pointer;
}

.dd-option.is-active {
  background: var(--bg-alt);
}

.dd-option.is-selected {
  color: var(--accent-dark);
  font-weight: 700;
}

.dropdown--multi .dd-option.is-selected::after {
  content: "✓";
  margin-inline-start: 8px;
}

.dd-option.is-disabled {
  color: var(--text-muted);
  cursor: not-allowed;
}

/* Contexts that sized the native select have to size the toggle instead. */
.dawra-select .dd-toggle,
.sessions-dawra-select .dd-toggle {
  height: 2.1rem;
  font-size: 0.85rem;
}

/* The status pill hugs its label instead of filling the form-field width. */
.dropdown:has(.meeting-status-select) {
  min-width: 0;
}

.meeting-status-select ~ .dd-toggle {
  height: auto;
  padding: 3px 8px;
  border: none;
  font-size: 0.82rem;
}

.meeting-status-select.status-scheduled ~ .dd-toggle { background: #f2faf5; }
.meeting-status-select.status-cancelled ~ .dd-toggle { background: #fdf3f2; }
.meeting-status-select.status-activity  ~ .dd-toggle { background: #fef9e7; }

/* Invalid inputs, last so it beats the per-form field styling. */
input.is-invalid,
select.is-invalid,
textarea.is-invalid,
.grading-form select[multiple].is-invalid,
select.is-invalid ~ .dd-toggle {
  border-color: var(--danger);
  background: var(--danger-bg);
}

/* تقييم اللقاء: section headings and the per-category calculation rule. */
.taqyeem-section {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--accent-dark);
  margin: 34px 0 12px;
}

.taqyeem-section:first-child {
  margin-top: 0;
}

.category-rule {
  margin: 6px 0 10px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* الرفيق القرآني: a pair row opens into its own edit form. */
.session-list > .card {
  /* The list already spaces its items; drop the card's own margin. */
  margin: 0;
}

.rifqaa-pair > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.rifqaa-names {
  font-weight: 500;
}
/* Flashcards (ported from the static site) */
.flashcard-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.flashcard {
  position: relative;
  width: 100%;
  max-width: 480px;
  min-height: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  text-align: center;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
}

.fc-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  width: 100%;
}

.flashcard .face-content {
  font-size: 1.6rem;
}

.flashcard .card-hint {
  display: none;
  position: absolute;
  bottom: 12px;
  left: 16px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.flashcard.is-front .card-hint {
  display: block;
}

.flashcard.is-front .face-content {
  font-family: "Amiri", serif;
  font-size: 2.2rem;
  color: var(--accent-dark);
}

.flashcard-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  max-width: 480px;
}

.flashcard-rating {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  border-top: 1px solid var(--border);
  padding: 14px 16px;
  background: var(--bg-alt);
  width: 100%;
}

.flashcard-rating[hidden] {
  display: none;
}

.flashcard-rating .btn-again { border-color: #b5563f; color: #b5563f; }
.flashcard-rating .btn-hard { border-color: var(--gold); color: #9c7a2e; }
.flashcard-rating .btn-good { border-color: var(--accent); color: var(--accent-dark); }
.flashcard-rating .btn-easy { border-color: #3f7d8c; color: #3f7d8c; }
.flashcard-rating .btn-again:hover { background: #b5563f; color: #fff; }
.flashcard-rating .btn-hard:hover { background: var(--gold); color: #fff; }
.flashcard-rating .btn-good:hover { background: var(--accent); color: #fff; }
.flashcard-rating .btn-easy:hover { background: #3f7d8c; color: #fff; }

.flashcard-progress {
  color: var(--text-muted);
  font-size: 0.9rem;
  min-width: 64px;
  text-align: center;
}

#flashcard-container:fullscreen,
#flashcard-container:-webkit-full-screen {
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vh 5vw;
}

#flashcard-container:fullscreen .flashcard-stage,
#flashcard-container:-webkit-full-screen .flashcard-stage {
  width: 100%;
  max-width: 700px;
}

#flashcard-container:fullscreen .flashcard,
#flashcard-container:-webkit-full-screen .flashcard {
  min-height: 50vh;
  max-width: 700px;
}

#flashcard-container:fullscreen .flashcard .face-content,
#flashcard-container:-webkit-full-screen .flashcard .face-content {
  font-size: 2.4rem;
}

#flashcard-container:fullscreen .flashcard.is-front .face-content,
#flashcard-container:-webkit-full-screen .flashcard.is-front .face-content {
  font-size: 3.2rem;
}

.fc-range-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.fc-range-filter input[type="number"] {
  width: 58px;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 0.88rem;
  text-align: center;
}


.fc-end-screen {
  text-align: center;
  gap: 12px;
}

.fc-score {
  font-size: 4rem;
  font-weight: 700;
  line-height: 1;
}

.fc-score-label {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0;
}

.fc-score-msg {
  font-size: 1.05rem;
  margin: 8px 0 16px;
}


.target-history {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* A value line that opens into its own small edit form. */
.inline-edit > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  cursor: pointer;
  list-style: none;
}

.inline-edit > summary::-webkit-details-marker {
  display: none;
}

.inline-edit > summary [data-lucide] {
  width: 15px;
  height: 15px;
  stroke-width: 2;
  color: var(--text-muted);
  opacity: 0.5;
  flex-shrink: 0;
}

.inline-edit > summary:hover [data-lucide] {
  opacity: 1;
}

.inline-edit + .inline-edit {
  border-top: 1px solid var(--border);
}

.form-row--inline {
  align-items: flex-end;
}

.target-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* ---- Student report download (#7) ---- */
/* stretch matches the button to the select's height — don't set an explicit
   height here, that would opt the button out of stretching. */
.report-download { display: flex; gap: 8px; align-items: stretch; }
.report-download .btn { padding-top: 0; padding-bottom: 0; }

/* ---- Student leaderboard: top 5 + own row ---- */
.leaderboard-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
}
/* The student's own row: outlined, not filled — it should read as "you are
   here", not as the winner. */
.leaderboard-row.is-me {
  border-color: var(--accent-dark);
  background: var(--bg-alt);
}
.leaderboard-rank {
  min-width: 1.6rem;
  font-weight: 700;
  color: var(--text-muted);
  font-size: 0.9rem;
}
.leaderboard-name { flex: 1; }
/* The ellipsis marks the skipped ranks, so it belongs in the rank column
   rather than centred across the row. */
.leaderboard-gap {
  padding: 0 10px;
}
.leaderboard-gap .leaderboard-rank {
  color: var(--text-muted);
  letter-spacing: 1px;
  line-height: 1;
}

/* ---- Phones (#11) ---- */
@media (max-width: 640px) {
  .container { padding: 0 12px; }

  .header-context { font-size: 1rem; }

  /* A session row is a wide flex of fixed-width columns; on a phone those
     minimums leave the surah text a few pixels, so let it wrap into rows. */
  .session-entry { flex-wrap: wrap; gap: 6px 10px; padding: 10px 12px; }
  .session-entry-date,
  .session-entry-type { min-width: 0; padding-top: 0; order: 1; }
  .session-grade-slot { min-width: 0; order: 2; margin-inline-start: auto; }
  .btn-edit-session,
  .btn-delete-session,
  .session-entry form { order: 2; }
  .session-entry-details { flex: 1 1 100%; order: 3; }
  .session-entry-notes { flex: 1 1 100%; width: auto; max-width: none; order: 4; }

  /* Headers that pair a title with a dawra select / action button. */
  .page-header--with-dawra { flex-wrap: wrap; gap: 8px; }
  .report-download { flex: 1 1 100%; }
  .report-download select { flex: 1; min-width: 0; }

  /* A card summary holds a title plus filter selects; on a phone they don't
     fit on one line and pushed the collapse chevron off the edge. */
  .card > summary { flex-wrap: wrap; }
  /* order pushes the filters below the title so the collapse chevron stays
     on the title's line instead of dropping to one of its own. */
  .sessions-dawra-select { flex: 1 1 100%; order: 1; }
  .sessions-dawra-select select { flex: 1; min-width: 0; }
}