/* ============================================================================ */
/* public/src/features/home/index.css */
/* CSS variables at themes.css */
/* All animations are in `public/src/shared/flow-field.js` */
/* ============================================================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
}

body {
  font-family: "IBM Plex Sans Arabic", "Amiri", "Inter", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  padding-top: 16px;
  padding-left: 16px;
  padding-right: calc(var(--sidebar-collapsed-width) + 16px);
  padding-bottom: 40px;
  transition: padding-right 250ms cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

/* Focused metadata editor shared by local and platform quiz/lesson cards. */
.item-metadata-overlay {
  position: fixed; inset: 0; z-index: 12000; display: grid; place-items: center;
  padding: 20px; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .18s ease;
}
.item-metadata-overlay.is-visible { opacity: 1; }
.item-metadata-modal {
  width: min(100%, 620px); position: relative; overflow: hidden; isolation: isolate;
  border: 1px solid var(--color-border);
  border-radius: 24px; color: var(--color-text-primary);
  background: var(--color-surface);
  box-shadow: var(--shadow-xl), 0 0 0 1px color-mix(in srgb, var(--color-primary, #6366f1) 15%, transparent);
  transform: translateY(12px) scale(.985); transition: transform .22s cubic-bezier(.2,.8,.2,1);
}
.is-visible .item-metadata-modal { transform: translateY(0) scale(1); }
.item-metadata-modal__glow {
  position: absolute; z-index: -1; width: 300px; height: 220px; top: -140px; inset-inline-end: 15%;
  border-radius: 50%; background: var(--color-primary); filter: blur(90px); opacity: .12;
}
.item-metadata-modal__header {
  display: flex; align-items: center; gap: 16px; padding: 24px 28px 20px;
  border-bottom: 1px solid var(--color-border);
}
.item-metadata-modal__mark {
  display: grid; place-items: center; flex: 0 0 48px; height: 48px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
  border-radius: 16px; color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  font-size: 25px;
}
.item-metadata-modal__heading { min-width: 0; flex: 1; }
.item-metadata-modal__eyebrow {
  display: block; margin-bottom: 2px; color: var(--color-primary);
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
}
.item-metadata-modal__heading h2 {
  margin: 0; color: var(--color-text-primary); font-size: 22px; font-weight: 800;
}
.item-metadata-modal__item-title {
  unicode-bidi: plaintext; /* truncate by the text's own direction */
  text-align: start;
  margin: 4px 0 0; overflow: hidden; color: var(--color-text-secondary);
  font-size: 13px; text-overflow: ellipsis; white-space: nowrap;
}
.item-metadata-modal__close {
  width: 38px; height: 38px; border: 1px solid var(--color-border); border-radius: 12px;
  color: var(--color-text-secondary); background: var(--color-background-secondary);
  font-size: 24px; cursor: pointer; transition: .18s; display: grid; place-items: center;
}
.item-metadata-modal__close:hover {
  color: var(--color-text-primary); border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
}
.item-metadata-modal__body { display: grid; gap: 20px; padding: 22px 28px 20px; }
.item-metadata-field { display: grid; gap: 8px; }
.item-metadata-field > span:first-child { display: grid; gap: 2px; }
.item-metadata-field strong { color: var(--color-text-primary); font-size: 14px; }
.item-metadata-field small { color: var(--color-text-secondary); font-size: 12px; }
.item-metadata-field textarea, .item-metadata-field input {
  width: 100%; border: 1px solid var(--color-border); border-radius: 14px; outline: 0;
  color: var(--color-text-primary); background: var(--color-background-secondary);
  font: inherit; font-size: 14px; transition: border-color .18s, box-shadow .18s;
  box-sizing: border-box;
}
.item-metadata-field textarea { min-height: 110px; padding: 13px 15px; resize: vertical; line-height: 1.7; }
.item-metadata-field input { height: 48px; padding: 0 15px; }
.item-metadata-field textarea:focus, .item-metadata-field input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}
.item-metadata-field textarea::placeholder, .item-metadata-field input::placeholder {
  color: var(--color-text-tertiary, #9ca3af);
}
.item-metadata-counter { justify-self: start; color: var(--color-text-secondary); font-size: 11px; }
.item-metadata-error {
  margin: 0; padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--color-error) 30%, transparent);
  border-radius: 10px; color: var(--color-error);
  background: color-mix(in srgb, var(--color-error) 12%, transparent);
  font-size: 13px;
}
.item-metadata-modal__footer {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 17px 28px 22px; border-top: 1px solid var(--color-border);
}
.item-metadata-modal__hint { color: var(--color-text-secondary); font-size: 12px; }
.item-metadata-modal__actions { display: flex; align-items: center; gap: 10px; }
.item-metadata-modal__actions button {
  min-height: 42px; padding: 0 18px; border-radius: 12px; font: inherit;
  font-size: 13px; font-weight: 700; cursor: pointer; transition: .18s;
}
.item-metadata-cancel {
  border: 1px solid var(--color-border); color: var(--color-text-secondary);
  background: var(--color-background-secondary);
}
.item-metadata-cancel:hover {
  color: var(--color-text-primary); border-color: var(--color-border-light, var(--color-text-secondary));
  background: color-mix(in srgb, var(--color-surface) 80%, var(--color-text-primary) 10%);
}
.item-metadata-save {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--color-primary);
  color: #fff; background: var(--color-primary);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.item-metadata-save:hover:not(:disabled) {
   background: var(--color-primary-hover);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--color-primary) 40%, transparent);
}
.item-metadata-save:disabled { opacity: .65; cursor: wait; }
@media (max-width:560px) {
  .item-metadata-overlay { padding: 12px; }
  .item-metadata-modal { border-radius: 19px; }
  .item-metadata-modal__header { padding: 20px 18px 17px; gap: 12px; }
  .item-metadata-modal__body { padding: 20px 18px 17px; gap: 18px; }
  .item-metadata-modal__footer { align-items: stretch; flex-direction: column; padding: 15px 18px 18px; }
  .item-metadata-modal__hint { order: 2; }
  .item-metadata-modal__actions { justify-content: flex-end; }
}

body.sidebar-expanded {
  padding-right: calc(var(--sidebar-expanded-width) + 16px);
}

/* Container */
.container {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: var(--z-base);
  display: flex;
  flex-direction: column;
  /* Now meaningful: body is the flex parent (see above), so this actually
     stretches .container to fill the remaining viewport height whenever
     the page's real content is shorter than the screen — which is what
     lets .watermark's own `margin-top: auto` push it all the way down to
     the bottom of the viewport instead of just under a short #contentArea. */
  flex: 1;
  width: 100%;
}

/* Breadcrumb */
#breadcrumb {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: var(--color-surface, #ffffff);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
  border: 1px solid var(--color-border, #e0e0e0);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  width: fit-content;
  cursor: pointer;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-text-primary, #1a1a1a);
  /* Sidebar is on the RIGHT — breadcrumb anchors to the left freely */
  position: fixed;
  z-index: var(--z-higher);
  top: 24px;
  left: 16px;
  right: auto;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#breadcrumb:hover {
  
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  border-color: var(--color-primary, #0088cc);
}

#breadcrumb.show {
  display: inline-flex;
}

.breadcrumb-text {
  font-size: 0.9375rem;
  font-weight: 600;
}

/* ============================================================================
   exam-more-btn — shared 3-dots trigger for the "more actions" dropdown.
   Base size is tuned for QUIZ cards specifically: quiz titles sit close to
   the top-right corner, so the trigger has to stay small/unobtrusive to
   avoid overlapping the title. Courses and folders don't have that overlap
   constraint and read as visually "too small"/fiddly to tap at this size —
   see the --lg modifier below, applied via JS for course/folder contexts
   (category-view.js, root-view.js, user-quizzes-folders.js).
   ============================================================================ */
.exam-more-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  border: 1px solid transparent;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  z-index: 2;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.exam-more-btn svg {
  width: 15px;
  height: 15px;
}

.exam-more-btn:hover {
  border-color: var(--color-primary-hover);
  background: var(--color-border);
}

/* Courses & folders (category-view.js, root-view.js,
   user-quizzes-folders.js) — larger, more clickable, with a visible resting
   border so it reads as a deliberate control rather than a stray dot, matching
   the weight of .course-kebab-btn used elsewhere for the same kind of card. */
.exam-more-btn--lg {
  width: 30px;
  height: 30px;
}

.exam-more-btn--lg svg {
  width: 18px;
  height: 18px;
}

.exam-more-btn--lg:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/*
 * Mobile (≤768px): .exam-more-btn is a DOM child of .exam-card-actions-wrap,
 * sitting alongside .start-btn (which has an inline `flex: 1` style). Taking
 * the dots button out of absolute positioning here makes it a normal flex
 * item in that row instead — vertically centered, no overlap — while
 * order: 1 pins it to the end of the row (the right side) regardless of
 * where it actually falls in DOM order among its .start-btn siblings.
 */
/* ============================================================================
   Course Card Kebab & Info Buttons
   ============================================================================ */
.course-kebab-btn,
.course-info-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--color-background-secondary);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  z-index: 2;
}

.course-kebab-btn:hover,
.course-info-btn:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-color: var(--color-primary);
  transform: scale(1.05);
}

.course-info-container {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: var(--z-base);
}

.course-info-container .course-info-btn {
  position: static;
}

/* Styled as a visual clone of .item-dropdown-menu (see
   item-dropdown-menu.js / floating-position.js) — same card chrome,
   same entrance animation, same z-index tier — so the two "anchored
   popover" patterns in the app look and feel identical. Positioned
   entirely by JS: positionCourseInfoTooltip() (tooltip-position.js)
   always sets `position: fixed` plus explicit top/left pixel
   coordinates inline once it runs, same technique
   positionItemDropdownMenu() uses for .item-dropdown-menu. The
   .course-info-tooltip class itself only needs to exist (this base
   rule) for the brief instant before that JS call lands. */
.course-info-tooltip {
  position: fixed;
  margin: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
  width: max-content;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease,
    visibility 0.15s;
  pointer-events: none;
  direction: rtl;
  text-align: right;
  font-size: 0.85rem;
  color: var(--color-text-primary);
  z-index: var(--z-tooltip);
  box-sizing: border-box;
}

.course-info-tooltip.tooltip-interactive {
  pointer-events: auto;
}

.course-info-tooltip.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* positionCourseInfoTooltip() only ever sets an explicit inline `top`
   (never relies on `bottom`), so — unlike the old absolute-positioned
   layout — no separate flip-above transform is needed here; JS already
   picks the correct `top` value whether it placed the tooltip above or
   below the trigger. */

.course-info-tooltip .tooltip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 6px;
  white-space: nowrap;
}

.course-info-tooltip .tooltip-row span:first-child {
  color: var(--color-text-secondary);
  font-weight: 600;
}

.tooltip-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 4px 4px;
}

/* Styled as a clone of .exam-action-btn--danger so the unsubscribe
   action matches the delete action in .item-dropdown-menu. */
.tooltip-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--color-error-light);
  border: 1.5px solid transparent;
  border-radius: 10px;
  color: var(--color-error);
  padding: 10px 12px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tooltip-delete-btn:hover {
  background: var(--color-error);
  border-color: var(--color-error);
  color: white;
}

/* "اسأل الباشـمبصمج" — same shape/sizing as .tooltip-delete-btn (a full-
   width action row below the divider), primary accent instead of danger
   red since this isn't a destructive action. Sits above the delete
   button when both are present (see course-info-tooltip.js's markup
   order) so the safe action reads before the destructive one. */
.tooltip-ask-ai-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--color-primary-light);
  border: 1.5px solid transparent;
  border-radius: 10px;
  color: var(--color-primary);
  padding: 10px 12px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 6px;
}

.tooltip-ask-ai-btn:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
}

@media (max-width: 640px) {
  .exam-more-btn {
    position: static;
    order: 1;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
  }

  .exam-card:not(.user-quiz-card) .exam-card-actions-wrap {
    align-items: center;
  }
}

@media (max-width: 640px) {

  .course-kebab-btn,
  .course-info-container {
    /* position: relative;  */
    /* was static — kept the tooltip inside the card's
      containing block, which clips it (.category-card has overflow:hidden),
      so it was invisible on phones no matter what JS toggled. Positioning
      it here instead re-anchors the tooltip to this element directly. */
    margin-left: 0;
    margin-right: auto;
    flex-shrink: 0;
  }
}

/* ============================================================================
   exam-actions-overlay — legacy full-screen wrapper, kept only for the
   unused/dead showCourseActionsOverlay(). The live "more actions" menus
   (showExamActionsOverlay / showUserQuizActionsOverlay) no longer use a
   modal-overlay wrapper at all — see .item-dropdown-menu below.
   ============================================================================ */
.exam-actions-overlay .modal-overlay,
.exam-actions-overlay {
  z-index: 9999;
  align-items: flex-end;
}

@media (min-width: 769px) {

  .exam-actions-overlay .modal-overlay,
  .exam-actions-overlay {
    align-items: center;
  }
}

.course-info-modal-card {
  position: relative;
  padding: 28px;
  text-align: right;
  /* Never taller than the viewport — long content scrolls inside the card. */
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.course-info-modal-card h2 {
  padding-left: 40px; /* keep the title clear of the close button */
}

@media (max-width: 640px) {
  .course-info-modal-card {
    max-height: calc(100dvh - var(--bottom-nav-height, 64px) - env(safe-area-inset-bottom, 0px) - 32px);
  }
}

.info-overlay-close {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.info-overlay-close:hover,
.info-overlay-close:focus-visible {
  background: var(--color-bg-hover, rgba(128, 128, 128, 0.18));
  color: var(--color-text-primary);
}

.course-info-modal-card h2 {
  margin: 0 0 18px;
  font-size: 1.35rem;
  line-height: 1.3;
}

.course-info-modal-card .quiz-info-table td {
  text-align: left;
}

.course-info-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.course-info-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 10px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
}

.course-info-stat strong {
  color: var(--color-primary);
  font-size: 1.35rem;
  line-height: 1;
}

.course-info-stat span {
  color: var(--color-text-secondary);
  font-size: 0.82rem;
}

/* ============================================================================
   quiz-info-table-wrap / quiz-info-table — clean structured data table used
   inside the "معلومات المادة" modal (course-actions.js) to present
   key/value fields (نوع التعليم / الكلية / العام / الترم). Previously had no
   styling at all and rendered as an unstyled bare <table>.
   ============================================================================ */
.quiz-info-table-wrap {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-surface);
}

.quiz-info-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.quiz-info-table tr {
  border-bottom: 1px solid var(--color-border);
}

.quiz-info-table tr:last-child {
  border-bottom: none;
}

.quiz-info-table th,
.quiz-info-table td {
  padding: 12px 16px;
  text-align: right;
  vertical-align: middle;
}

.quiz-info-table th {
  width: 40%;
  color: var(--color-text-secondary);
  font-weight: 600;
  background: var(--color-background-secondary);
}

.quiz-info-table td {
  color: var(--color-text-primary);
  font-weight: 500;
}

/* Highlighted "مادة مميزة" value — stands out from regular education-type
   values (جامعي/ثانوي/إعدادي/إبتدائي) in both the full modal table and the
   dropdown submenu preview. */
.quiz-info-table td.featured-value-cell {
  text-align: center;
}

.quiz-info-table td .featured-value,
.submenu-content .tooltip-row span.featured-value,
.submenu-content .tooltip-row span:last-child.featured-value {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #b8860b;
  background: color-mix(in srgb, #f5c518 22%, transparent);
  border: 1px solid color-mix(in srgb, #f5c518 55%, transparent);
  border-radius: 999px;
  padding: 3px 10px;
  font-weight: 700;
  font-size: 0.85em;
  direction: rtl;
  text-align: right;
}

/* ============================================================================
   Submenu — nested popover for "معلومات الامتحان" inside .item-dropdown-menu.
   Shows a quick info preview plus a "كل المعلومات" button that opens the
   full quiz-info-modal-card. Reveals on hover for real pointer/mouse
   devices, and toggles on tap/click everywhere else — see
   createExamInfoSubmenu in index.js.
   ============================================================================ */
.submenu-container {
  position: relative;
}

.submenu-trigger {
  justify-content: space-between;
}

.submenu-trigger-label {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 12px;
  min-width: 0;
  text-align: right;
}

.submenu-caret {
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.submenu-container.submenu-open .submenu-caret {
  transform: rotate(-90deg);
}

.submenu-content {
  position: absolute;
  top: 0;
  right: calc(100% + 8px);
  width: 220px;
  max-width: calc(100vw - 16px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(6px);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease,
    visibility 0.15s;
  pointer-events: none;
  z-index: var(--z-base);
}

.submenu-content.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
}

.submenu-content::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -8px;
  /* Bridges the gap */
  width: 8px;
}

.submenu-content .tooltip-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.85rem;
  direction: rtl;
  text-align: right;
}

.submenu-content .tooltip-row span:first-child {
  color: var(--color-text-secondary);
  font-weight: 600;
}

.submenu-content .tooltip-row span:last-child {
  color: var(--color-text-secondary);
  font-weight: 600;
  direction: rtl;
  text-align: left;
}

/* Rows carrying genuinely LTR content (dates, numeric ids, etc.) opt back
   into LTR alignment explicitly rather than it being the default for every
   value — Arabic labels like "جامعي" or "الترم الأول" were previously forced
   into LTR direction/alignment even though they're plain Arabic text. */
.submenu-content .tooltip-row span.ltr-val {
  direction: ltr;
  text-align: left;
}

.submenu-content .multiline-val {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre-wrap;
  word-break: break-word;
}

.submenu-content .copyable-row {
  cursor: pointer;
  border-radius: 6px;
  margin: -4px -6px;
  padding: 4px 6px;
  transition: background 0.15s ease;
}

.submenu-content .copyable-row:hover {
  background: var(--color-background-secondary);
}

.submenu-content .copyable-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.submenu-content .copy-icon-wrap {
  position: relative;
  display: inline-flex;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.submenu-content .copy-icon {
  position: absolute;
  top: 0;
  right: 0;
  transition: opacity 0.15s ease;
}

.submenu-content .copy-icon--copy {
  opacity: 0.6;
}

.submenu-content .copy-icon--check {
  opacity: 0;
  color: var(--color-success, #38a169);
}

.submenu-content .copyable-row:hover .copy-icon--copy {
  opacity: 1;
}

.submenu-content .copyable-row.copied .copy-icon--copy {
  opacity: 0;
}

.submenu-content .copyable-row.copied .copy-icon--check {
  opacity: 1;
}

.submenu-more-btn {
  margin-top: 4px;
}

/* Admin action-group submenu (تعديل / نقل / إعادة تسمية / حذف…) — same
   popover shell as the info submenu above, but its content is a stack of
   full .exam-action-btn rows instead of read-only tooltip rows, so it needs
   its own padding/width/gap rather than the tighter tooltip-row spacing. */
.submenu-content--actions {
  width: 200px;
  padding: 8px;
  gap: 6px;
}

.submenu-content--actions .exam-action-btn {
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.9rem;
}

@media (max-width: 480px) {
  .submenu-content--actions {
    padding: 8px 0 0;
  }
}

/* "امتحاناتك" root card dropdown — contents breakdown block (quizzes /
   courses / folders). Same tooltip-row layout as the course/folder info
   submenus, but rendered as a plain non-interactive block (no hover state,
   not clickable) since it's just a summary, not an action. */
.root-quizzes-breakdown {
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: default;
  align-items: normal !important;
}

.item-dropdown-menu .root-quizzes-breakdown:hover {
  background: none;
}

.root-quizzes-breakdown .tooltip-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.85rem;
  direction: rtl;
  text-align: right;
}

.root-quizzes-breakdown .tooltip-row span:first-child {
  color: var(--color-text-secondary);
  font-weight: 600;
  text-align: right;
}

.root-quizzes-breakdown .tooltip-row span:last-child {
  color: var(--color-text-primary);
  font-weight: 700;
  text-align: left;
}

/* Soft storage-size warning shown in the "امتحاناتك" card's dropdown once
   the raw user_quizzes value grows large (see getUserQuizzesStorageWarning
   in course-count.js) — styled like a small non-interactive notice, not a
   button, since it's informational only. */
.root-quizzes-storage-warning {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--color-error, #dc2626);
  background: var(--color-error-light, rgba(220, 38, 38, 0.08));
  border-radius: 8px;
  padding: 8px 10px;
  margin: 2px 0;
  direction: rtl;
  text-align: right;
}

/* Narrow viewports don't have room to open the submenu beside the trigger —
   stack it below instead, matching the dropdown's own below-the-button
   placement. */
@media (max-width: 480px) {
  .submenu-content {
    position: static;
    width: 100%;
    margin-top: 6px;
    box-shadow: none;
    border-style: dashed;
    display: none;
    /* Prevents taking up space when hidden */
  }

  .submenu-content.show {
    transform: none;
    display: flex;
    /* Restores layout when visible */
  }
}

@media (min-width: 641px) {
  .mobile-only {
    display: none !important;
  }
}

/* ============================================================================
   BREADCRUMB MOBILE RESPONSIVE FIXES
   ============================================================================ */

/* Tablet styles */
@media (max-width: 768px) {
  #breadcrumb {
    font-size: 0.85rem;
    padding: 8px 12px;
    top: 20px;
    left: 20px;
    max-width: calc(100vw - 40px);
  }

  .breadcrumb-text {
    font-size: 0.85rem;
  }
}

/* Mobile styles */
@media (max-width: 640px) {
  #breadcrumb {
    font-size: 0.8rem;
    padding: 8px 14px;
    top: 16px;
    left: 16px;
    max-width: calc(100vw - 32px);
    gap: 6px;
  }

  .breadcrumb-text {
  unicode-bidi: plaintext; /* truncate by the name's own direction */
  text-align: start;
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100vw - 80px);
  }
}

/* Very small screens */
@media (max-width: 380px) {
  #breadcrumb {
    font-size: 0.75rem;
    padding: 7px 12px;
    top: 12px;
    left: 12px;
    max-width: calc(100vw - 24px);
  }

  .breadcrumb-text {
    font-size: 0.75rem;
    max-width: calc(100vw - 60px);
  }
}

/* Premium Header */
.header {
  border-radius: 24px;
  box-shadow:
    var(--shadow-xl),
    0 0 0 1px rgba(99, 102, 241, 0.06);
  padding: 40px 48px 36px;
  margin-bottom: 28px;
  border: 1px solid var(--color-border-light);
  text-align: center;
  position: relative;
  overflow: visible;
  background: var(--color-surface);
  padding-bottom: 16px;
  transition: padding-bottom 0.2s ease;
}

.header-clip {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.header-clip::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: var(--gradient-accent);
  box-shadow: 0 2px 12px rgba(99, 102, 241, 0.35);
}

/* Subtle radial glow centred behind the title. Same reasoning as above. */
.header-clip::after {
  content: "";
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 480px;
  height: 220px;
  background: radial-gradient(ellipse at center,
      rgba(99, 102, 241, 0.08) 0%,
      transparent 70%);
  pointer-events: none;
  z-index: var(--z-below);
}

.header-content {
  position: relative;
  z-index: var(--z-base);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header h1 {
  font-size: 2.35rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  margin-bottom: 14px;
  line-height: 1.1;
}

.header p {
  font-size: 1rem;
  max-width: 680px;
  margin: 0 auto;
  font-weight: 500;
  color: var(--color-text-secondary);
  line-height: 1.65;
}

/* ============================================================================
HEADER BADGE – GAMIFIED WELCOME
============================================================================ */

.header-badge {
  position: relative;
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 24px;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.6);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  will-change: transform, box-shadow;
}

/* Only when the user has enabled the background animations */
[data-animations="enabled"] .header-badge {
  animation:
    badgePopIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    badgeFloat 6s ease-in-out infinite;
}

/* Make the USERNAME pop */
.header-badge .user-name {
  position: relative;
  font-weight: 700;
  letter-spacing: 0.2px;
  padding: 2px 6px;
  border-radius: 6px;
  margin-inline: 0;
  /* logical: replaces margin-right: 0; margin-left: 0 */
}

[data-animations="enabled"] .header-badge .user-name {
  animation: namePulse 3s ease-in-out infinite;
}

html:not([data-motion="reduced"]) .header-badge::after {
  content: "";
  position: absolute;

  /* 1. Make the width smaller */
  width: 30%;
  height: 55%;

  /* 2. Narrow the white light in the gradient */
  background: linear-gradient(90deg,
      transparent 0%,
      var(--color-user-name-animation) 50%,
      transparent 100%);

  /* Start off-screen */
  transform: translateX(-150%);

  border-radius: inherit;
  pointer-events: none;
  animation: nameShimmer 5s ease-in-out infinite;
}

[data-theme="light"] .header-badge {
  background: var(--glass-bg-light);
  color: var(--color-text-primary);
}

[data-theme="light"] .header-badge .user-name {
  color: var(--color-primary);
  background: var(--color-primary-light);
}

/* For the animation */
[data-theme="light"] .header-badge::after {
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(153, 204, 255, 0.6) 50%,
      transparent 100%);
}

[data-theme="dark"] .header-badge {
  background: var(--glass-bg-light);
  color: var(--color-text-primary);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .header-badge .user-name {
  color: var(--color-primary);
  background: var(--color-primary-light);
}

[data-theme="dark-slate"] .header-badge {
  background: var(--glass-bg-light);
  color: var(--color-text-primary);
}

[data-theme="dark-slate"] .header-badge .user-name {
  color: var(--color-primary);
  background: var(--color-primary-light);
}

/* For the animation */
[data-theme="dark-slate"] .header-badge::after {
  background: linear-gradient(90deg,
      transparent 0%,

      /* Pink animation */
      rgba(255, 192, 203, 0.6) 50%,
      transparent 100%);
}

/* ============================================================================
ANIMATIONS
============================================================================ */

@keyframes badgePopIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.85);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes badgeFloat {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes namePulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.06);
  }
}

@keyframes nameShimmer {
  0% {
    transform: translateX(-110%);
  }

  40% {
    transform: translateX(110%);
  }

  100% {
    transform: translateX(-110%);
  }
}

/* ============================================================================
#Subjects-text — Contextual Section Label
============================================================================ */

/* ============================================================================
   #Subjects-text — Contextual Section Label
   Placement: inside .header-content, below the subtitle <p>
   Theme: Frosted-glass pill with gradient border ring + accent text
   RTL: direction: rtl ensures icon flows after the text (left side in Arabic)
   ============================================================================ */

/* ── Base element ─────────────────────────────────────────────────────────── */
#Subjects-text {
  /* Layout */
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  direction: rtl;
  /* Arabic RTL: icon ends up on the visual left */

  /* Spacing */
  margin-top: 28px;
  padding: 9px 22px 9px 18px;
  border-radius: 999px;

  /* Typography */
  font-size: 0.9375rem;
  /* 15px — matches .breadcrumb-text for scale harmony */
  font-weight: 700;
  letter-spacing: 0.25px;
  line-height: 1;
  color: var(--color-accent);

  /* Frosted glass fill */
  background: rgba(99, 102, 241, 0.07);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  /* Depth */
  box-shadow:
    0 4px 16px rgba(99, 102, 241, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);

  /* Entrance animation (fires once on load / re-render) */

  /* Hover lift */
  transition:
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.25s ease;
}

[data-animations="enabled"] #Subjects-text {
  animation: subjectsReveal 0.5s 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;
}

#Subjects-text:hover {
  
  box-shadow:
    0 8px 24px rgba(99, 102, 241, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* ── Gradient border ring ─────────────────────────────────────────────────── */
/* Technique: set padding on the pseudo-element equal to border width,        */
/* then mask out the content-box so only the ring is painted.                 */
#Subjects-text::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--gradient-accent);

  /* Punch a hole in the middle — only the ring shows */
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;

  /* Standard properties for compatibility */
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;

  pointer-events: none;
  z-index: var(--z-below);
}

/* ── Emoji icon (RTL: rendered on visual-left after the text) ─────────────── */
#Subjects-text::after {
  content: "📚";
  font-size: 0.85rem;
  line-height: 1;
  /* Reset any inherited text effects that could apply to emoji */
  -webkit-text-fill-color: initial;
  color: initial;
  opacity: 0.85;
  position: relative;
  z-index: var(--z-base);
}

[data-theme="dark"] #Subjects-text,
[data-theme="dark-slate"] #Subjects-text {
  background: rgba(99, 102, 241, 0.12);
  box-shadow:
    0 4px 20px rgba(99, 102, 241, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ── Entrance keyframe ────────────────────────────────────────────────────── */
@keyframes subjectsReveal {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── Dark-theme awareness ─────────────────────────────────────────────────── */

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  #Subjects-text {
    font-size: 0.8125rem;
    padding: 6px 14px 6px 10px;
    margin-top: 18px;
    max-width: 100%;
    box-sizing: border-box;
  }

  #Subjects-text:has(.title-breadcrumb) {
    padding: 6px 14px 6px 10px;
    max-width: 100%;
  }
}

/* ── #Subjects-text when it holds a breadcrumb nav ────────────────────────
   When renderTitleBreadcrumb() injects a <nav>, the pill needs to stretch
   to fill available space (not shrink to content) so the ResizeObserver
   can correctly detect overflow and trigger collapse.                     */
#Subjects-text:has(.title-breadcrumb) {
  max-width: min(640px, 100%);
  width: max-content;
  box-sizing: border-box;
  /* Prevent the ::after emoji from pushing the path off-screen */
  gap: 0;
  padding: 7px 16px 7px 12px;
}

.header.is-open #Subjects-text {
  visibility: hidden;
}

/* ============================================================================
   TITLE BREADCRUMB — smart collapsible inline breadcrumb
   Rendered by renderTitleBreadcrumb() (title-breadcrumb.js) inside
   #Subjects-text (and possibly other title elements).
   ============================================================================ */

/* ── Wrapper <nav> ───────────────────────────────────────────────────────── */
.title-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0;
  min-width: 0;
  overflow: hidden;
  /* RTL: items flow right-to-left inside the pill */
  direction: rtl;
  flex: 1;
}

/* ── Path items (<a> links + <span> for current) ─────────────────────────── */
.title-breadcrumb-item {
  unicode-bidi: plaintext; /* truncate by the name's own direction */
  text-align: start;
  display: inline-block;
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  font-size: inherit;
  cursor: pointer;
  transition: color 0.15s ease, opacity 0.15s ease;
}

.title-breadcrumb-item--root {
  flex-shrink: 0;
  max-width: 130px;
}

.title-breadcrumb-item:hover {
  opacity: 0.75;
}

/* Current (last) item — not a link, dimmed */
.title-breadcrumb-item--current {
  color: var(--color-text-primary);
  cursor: default;
  font-weight: 700;
  pointer-events: none;
  max-width: 280px;
  flex-shrink: 1;
}

.title-breadcrumb-item--current:hover {
  opacity: 1;
}

@media (max-width: 480px) {
  .title-breadcrumb-item {
    max-width: 150px;
    font-size: 0.8125rem;
  }

  .title-breadcrumb-item--root {
    max-width: 90px;
  }

  .title-breadcrumb-item--current {
    max-width: 180px;
  }
}

/* ── Separator ───────────────────────────────────────────────────────────── */
.title-breadcrumb-sep {
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
  color: var(--color-text-tertiary, rgba(0, 0, 0, 0.35));
  font-size: 0.8em;
  flex-shrink: 0;
  user-select: none;
}

.title-breadcrumb-sep::before {
  content: "/";
}

/* ── Ellipsis "…" toggle button ─────────────────────────────────────────── */
.title-breadcrumb-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 6px;
  border: 1.5px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: 0.95em;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.title-breadcrumb-ellipsis:hover,
.title-breadcrumb-ellipsis[aria-expanded="true"] {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ── Floating dropdown ───────────────────────────────────────────────────── */
.title-breadcrumb-dropdown {
  position: absolute;
  z-index: var(--z-tooltip, 6000);
  list-style: none;
  margin: 0;
  padding: 5px 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow:
    0 8px 24px -4px rgba(0, 0, 0, 0.18),
    0 2px 8px -2px rgba(0, 0, 0, 0.1);
  min-width: 140px;
  max-width: 260px;
  direction: rtl;
  animation: titleBcDropIn 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes titleBcDropIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── Dropdown items ──────────────────────────────────────────────────────── */
.title-breadcrumb-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 14px;
  background: none;
  border: none;
  text-align: right;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease;
  box-sizing: border-box;
}

.title-breadcrumb-dropdown-icon {
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.title-breadcrumb-dropdown-label {
  unicode-bidi: plaintext; /* truncate by the name's own direction */
  text-align: start;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  text-align: right;
}

.title-breadcrumb-dropdown-item:hover {
  background: var(--color-background-secondary, rgba(0, 0, 0, 0.05));
  color: var(--color-primary);
}

.title-breadcrumb-dropdown-item:focus-visible {
  outline: none;
  background: var(--color-primary-light);
  color: var(--color-primary);
}

/* ── Dark theme overrides ────────────────────────────────────────────────── */
[data-theme="dark"] .title-breadcrumb-sep,
[data-theme="dark-slate"] .title-breadcrumb-sep {
  color: rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .title-breadcrumb-ellipsis,
[data-theme="dark-slate"] .title-breadcrumb-ellipsis {
  background: rgba(255, 255, 255, 0.07);
}

[data-theme="dark"] .title-breadcrumb-dropdown,
[data-theme="dark-slate"] .title-breadcrumb-dropdown {
  box-shadow:
    0 8px 32px -4px rgba(0, 0, 0, 0.5),
    0 2px 8px -2px rgba(0, 0, 0, 0.3);
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
[data-animations="disabled"] .title-breadcrumb-dropdown {
  animation: none;
}


/* ============================================================================
Container
============================================================================ */

/* Premium Grid */
/* Premium Grid — 4 columns desktop → 2 tablet → stacked list mobile */
.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 48px;
}

@media (max-width: 1280px) {
  .grid-container {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

@media (max-width: 960px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}

/* Mobile: full-width flex column handled in the mobile list-row block below */

/* ── Tablet card padding ── Obj 2B */
@media (max-width: 960px) {

  .card,
  .category-card,
  .exam-card {
    padding: 14px 16px;
  }
}

/* ── .card-text wrapper: transparent on desktop, flex column on mobile ─────── */
/* display:contents makes it invisible to layout — children behave as if     */
/* they are direct children of the card. Perfect for desktop card centering. */
.card-text {
  display: contents;
}

/* ── Obj 1: Mobile List-Row Design (≤640px) ─────────────────────────────── */
@media (max-width: 640px) {

  /* ── Grid becomes a flex column with border wrapping the whole list ──────── */
  .grid-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 100%;
    overflow-x: hidden;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    overflow: hidden;
    /* clip children to the border-radius */
  }

  /* ── Each card becomes a compact horizontal list-row ─────────────────────── */
  .card,
  .category-card,
  .exam-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    min-height: 58px;
    width: 100%;
    box-sizing: border-box;
    border-radius: 0;
    box-shadow: none;
    border: none;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    transition: background-color 0.12s ease;
    overflow: hidden;
    /* LTR physical layout so icon is on the visual left and text flows left→right */
    direction: ltr;
    text-align: left;
  }

  /* First card has no top border */
  .card:first-child,
  .category-card:first-child,
  .exam-card:first-child {
    border-top: none;
  }

  /* Remove the decorative top-accent strip */
  .card::before,
  .category-card::before,
  .exam-card::before {
    display: none;
  }

  /* Subtle hover — no lift and no spotlight on mobile */
  .card::after,
  .category-card::after,
  .exam-card::after {
    display: none;
  }

  .card:hover,
  .category-card:hover,
  .exam-card:hover {
    transform: none;
    box-shadow: none;
    background: var(--color-background-secondary, #f5f5f5);
  }

  /* ── .card-text: takes up remaining middle space ─────────────────────────── */
  .card-text {
  unicode-bidi: plaintext; /* truncate by the text's own direction */
  text-align: start;
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
    /* allows text-overflow: ellipsis */
  }

  /* ── Category card icon: compact emoji on the left ───────────────────────── */
  .category-card .icon {
    font-size: 1.25rem;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    text-align: center;
    margin-bottom: 0;
    filter: none;
    transform: none !important;
    transition: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-background-secondary);
    border-radius: 8px;
  }

  /* ── Title line: LTR, left-aligned, English friendly ────────────────────── */
  .card-text h3,
  .card h3,
  .category-card h3,
  .exam-card h3 {
  unicode-bidi: plaintext; /* truncate by the text's own direction */
    font-size: 0.83rem;
    font-weight: 600;
    margin-bottom: 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: ltr;
    text-align: left;
  }

  /* ── Subtext (question count, types): muted, compact, left-aligned ───────── */
  .card-text p,
  .card p,
  .category-card p,
  .exam-card p {
  unicode-bidi: plaintext; /* truncate by the text's own direction */
    font-size: 0.7rem;
    color: var(--color-text-tertiary, #888);
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    text-align: left;
    direction: ltr;
    font-weight: 400;
  }

  /* ── Exam meta wrapper: row with types · count, pushed to right ─────────── */
  .exam-card-meta {
    position: static !important;
    /* reset desktop absolute */
    display: flex;
    flex-direction: row;
    /* side-by-side (was column) */
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    margin-left: auto;
    margin-right: 4px;
    white-space: nowrap;
  }

  /* ── Exam types and count: same row, muted, right-aligned ───────────────── */
  .exam-types-subtext {
    display: block !important;
    font-size: 0.65rem !important;
    color: var(--color-text-tertiary, #888);
    margin-bottom: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 400;
    text-align: right;
    order: 1 !important;
    /* reset desktop order */
  }

  .exam-question-count:not(.exam-types-subtext) {
    display: block !important;
    font-size: 0.65rem !important;
    color: var(--color-text-tertiary, #888);
    margin-bottom: 0;
    text-align: right;
    order: 2 !important;
    /* count after types in mobile row */
    direction: rtl;
  }

  /* exam-more-btn stays visible on mobile too — it's now the single shared
     trigger for the actions overlay on both desktop and mobile. */

  /* ── Exam card: reset min-height for compact rows ────────────────────────── */
  .exam-card {
    min-height: 52px !important;
  }

  /* ── Start button: compact play icon pill ────────────────────────────────── */
  .exam-card .start-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    padding: 0;
    font-size: 0;
    /* hide text */
    flex: 0 0 32px;
    min-width: 0 !important;
  }

  /* Show a ▶ play icon via ::before instead of the Arabic text */
  .exam-card .start-btn::after {
    content: "▶";
    font-size: 0.75rem;
    color: white;
  }

  /* Download button — also compact */
  .exam-card .start-btn:last-of-type {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3) !important;
  }

  .exam-card .start-btn:last-of-type::after {
    content: "↓";
    font-size: 0.85rem;
  }
}

.user-quizzes-drop-zone {
  position: relative;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.user-quizzes-drop-zone.user-quizzes-drag-over {
  border: 2px dashed var(--color-primary) !important;
  border-radius: 20px !important;
  background: rgba(59, 130, 246, 0.06);
  box-shadow: 0 0 0 1px var(--color-primary-light);
}

/* ============================================================================
 * .drag-over — generic drag-over affordance, toggled by
 * handleDragOver/handleDragLeave (user-quizzes-folders.js) on ANY valid
 * drop target: folder/course cards, the back-breadcrumb (#breadcrumb), and
 * the title-breadcrumb ancestor items. Previously this class was applied by
 * JS but had no matching CSS rule at all, so drop targets gave zero visual
 * feedback while dragging over them.
 * ============================================================================ */
.drag-over {
  outline: 2px dashed var(--color-primary) !important;
  outline-offset: 2px;
  background: rgba(59, 130, 246, 0.08) !important;
  border-radius: 10px;
}

#breadcrumb.drag-over,
.title-breadcrumb-item.drag-over {
  outline: 2px dashed var(--color-primary) !important;
  outline-offset: 3px;
  background: rgba(59, 130, 246, 0.1) !important;
  border-radius: 6px;
  color: var(--color-primary);
}

.create-quiz-inline-modal {
  position: relative;
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease;
}

.create-quiz-inline-modal.create-quiz-inline-modal--drag-over {
  border: 2px dashed var(--color-primary);
  background: rgba(59, 130, 246, 0.06);
  box-shadow: 0 0 0 1px var(--color-primary-light);
}

.lesson-download-options {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.lesson-download-options button {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-background-secondary);
  color: var(--color-text-primary);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.lesson-download-options button:hover,
.lesson-download-options button:focus-visible {
  border-color: var(--color-primary);
  outline-color: var(--color-primary);
}

.lesson-download-options small {
  color: var(--color-text-secondary);
  font-size: 0.82rem;
}

/*
 * The create-quiz card now lives inside .user-quizzes-container (same grid
 * as user quiz cards) so the old margin-bottom spacer is no longer needed.
 */

/*
 * Dedicated wrapper for the quiz-card list. Gets the bordered, rounded
 * treatment that the outer grid-container used to apply to everything
 * (including the sign-in button and create card). Now only quiz cards sit
 * inside this border, keeping the controls above visually separate.
 *
 * Desktop: spans all grid columns and repeats the same column template so
 *   cards flow into a multi-column grid exactly like normal exam cards do.
 * Mobile (≤640px): solid border + border-radius, same list-row style as
 *   normal exam card containers, overriding the outer grid-container border
 *   which is reset to none below so only this inner container shows it.
 */
.user-quizzes-container {
  /* Span all columns of the parent grid */
  grid-column: 1 / -1;
  /* Repeat the same 4-column grid so cards inside flow normally */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 1280px) {
  .user-quizzes-container {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}

@media (max-width: 960px) {
  .user-quizzes-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}

@media (max-width: 640px) {

  /* Inner quiz-card list gets the border */
  .user-quizzes-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    overflow: hidden;
  }

  /* First card: no top border (container border serves as top) */
  .user-quizzes-container>.exam-card:first-child,
  .user-quizzes-container>.category-card:first-child {
    border: none !important;
    border-top: none !important;
  }

  /* Outer drop-zone container: strip the border the global .grid-container
     mobile rule adds — we don't want a double border or the controls wrapped */
  .grid-container.user-quizzes-drop-zone {
    border: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }
}

/* Premium Card Design */
.card,
.category-card,
.exam-card {
  border-radius: 20px;
  padding: 20px 22px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border-light);
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  text-align: center;
  /* Slight inset highlight at top edge */
  background: var(--color-surface);
}

/* Accent strip — starts hidden, animates in on hover */
.card::before,
.category-card::before,
.exam-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-accent);
  border-radius: 20px 20px 0 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover: NO movement and NO scale — the card's hit-box never changes, so the
   cursor can sit on (or slide along) its border without the hover state
   flickering on/off. Feedback = top accent strip (::before) + glow/border tint
   + a cursor-following spotlight (::after, positioned by hover-spotlight.js). */
.card:hover,
.category-card:hover,
.exam-card:hover {
  box-shadow:
    var(--shadow-xl),
    0 0 0 1px rgba(99, 102, 241, 0.08),
    var(--shadow-glow, 0 8px 32px rgba(99, 102, 241, 0.12));
  border-color: rgba(99, 102, 241, 0.2);
}

.card:hover::before,
.category-card:hover::before,
.exam-card:hover::before {
  transform: scaleX(1);
}

/* Spotlight: soft radial highlight that follows the pointer inside the card. */
.card::after,
.category-card::after,
.exam-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none; /* never part of the hover/click target */
  background: radial-gradient(260px circle at var(--spot-x, 50%) var(--spot-y, 0%),
      color-mix(in srgb, var(--type-accent, #6366f1) 16%, transparent),
      transparent 70%);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.card:hover::after,
.category-card:hover::after,
.exam-card:hover::after {
  opacity: 1;
}

.card:active,
.category-card:active,
.exam-card:active {
  box-shadow: var(--shadow-lg);
  transition-duration: 0.1s;
}

.category-card {
  text-align: center;
  padding-bottom: 10px;
}

.category-card .icon {
  font-size: 3.5rem;
  margin-bottom: 20px;
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

.category-card:hover .icon {
  transform: scale(1.1) rotate(5deg);
}

.card h3,
.category-card h3,
.exam-card h3 {
  font-size: 1.375rem;
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  direction: ltr;
}

.card p,
.category-card p,
.exam-card p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 20px;
}

.exam-question-count {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  direction: rtl;
  margin-bottom: 10px !important;
}

/*
 * Desktop exam card meta bar: absolutely positioned above the action buttons.
 * direction:ltr + space-between → count anchored left, types anchored right.
 * CSS order properties ensure correct sides regardless of DOM insertion order.
 */
.exam-card-meta {
  position: absolute;
  bottom: 68px;
  left: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  direction: ltr;
  gap: 8px;
  margin: 0;
  /* Prevent text from bleeding into the share button area at top-left */
  padding: 0;
}

/* Count always on the LEFT side */
.exam-card-meta .exam-question-count:not(.exam-types-subtext) {
  order: 1;
  text-align: left;
  flex-shrink: 0;
}

/* Types always on the RIGHT side */
.exam-card-meta .exam-types-subtext {
  order: 2;
  text-align: right;
  flex: 1;
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*
 * Desktop exam card: min-height ensures room for the absolute-positioned
 * meta bar and button row below the heading.
 */
.exam-card {
  min-height: 200px;
}

/*
 * Desktop btnWrap: flex row of action buttons with top margin, full-width.
 * Absolutely anchored to the bottom of the card on desktop.
 * EXCLUDE .user-quiz-card — those use normal flow layout.
 */
.exam-card:not(.user-quiz-card) .exam-card-actions-wrap {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  position: static;
  margin-top: auto;
  width: 100%;
  /* bottom: 16px; */
  /* left: 16px; */
  /* right: 16px; */
  width: calc(100% - 32px);
}

/*
 * DESKTOP ONLY (≥769px): re-anchor .exam-more-btn to .exam-card instead of
 * .exam-card-actions-wrap.
 *
 * .exam-more-btn is a DOM child of .exam-card-actions-wrap (see
 * createExamCard in JS — moreBtn is appended into btnWrap alongside the
 * start/download buttons). Since that wrap is `position: absolute` above,
 * it — not .exam-card — becomes the nearest positioned ancestor for
 * .exam-more-btn, so the button's own `top`/`right` resolve against the
 * wrap's box (pinned to the bottom of the card) instead of the card's box.
 *
 * Fix: make .exam-card a flex column and pin the wrap to the bottom via
 * `margin-top: auto` (normal flow) instead of `position: absolute`. That
 * removes the wrap as a containing block, so .exam-more-btn's `top`/`right`
 * now correctly resolve against .exam-card.
 *
 * Scoped to min-width:769px ONLY — .exam-card already has its own separate
 * flex-row "list-row" layout at ≤640px (and whatever governs 641-768px),
 * driven by .card-text switching from `display:contents` to its own flex
 * column. Applying flex-column to the unscoped/base .exam-card rule broke
 * that mobile layout, so this change must never reach those widths.
 */
@media (min-width: 769px) {
  .exam-card:not(.user-quiz-card) {
    display: flex;
    flex-direction: column;
  }

  .exam-card:not(.user-quiz-card) .exam-card-actions-wrap {
    position: static;
    bottom: auto;
    left: auto;
    right: auto;
    width: 100%;
    margin-top: auto;
  }
}

/*
 * 641–768px: same fix as the ≥769px block above, for the same reason.
 * This range was previously ungoverned (see note above), so .exam-card
 * stayed a non-flex block and .exam-card-actions-wrap's `margin-top: auto`
 * had no effect — the wrap sat wherever its content pushed it instead of
 * pinned to the card bottom, and (lacking justify-content) wasn't
 * horizontally centered either. Mirrors the desktop fix: flex-column card
 * + wrap pinned to the bottom via margin-top: auto, with justify-content
 * added so the buttons center horizontally within the wrap.
 */
@media (min-width: 641px) and (max-width: 768px) {
  .exam-card:not(.user-quiz-card) {
    display: flex;
    flex-direction: column;
  }

  .exam-card:not(.user-quiz-card) .exam-card-actions-wrap {
    position: static;
    bottom: auto;
    left: auto;
    right: auto;
    width: 100%;
    margin-top: auto;
    justify-content: center;
  }
}

/* Mobile: restore to normal flex flow so btnWrap sits on the RIGHT */
@media (max-width: 640px) {

  /*
 * Clip the shared .exam-card::before hover-accent strip so it never bleeds
 * outside the card's rounded corners.  The card itself keeps overflow:visible
 * (needed for the action-menu / admin-upload absolutely-positioned children),
 * so we clip the strip on its own pseudo-element instead.
 */
  .exam-card.user-quiz-card::before {
    overflow: hidden;
    border-radius: 20px 20px 0 0;
    /* match the card's top corners */
  }

  .exam-card:not(.user-quiz-card) .exam-card-actions-wrap {
    position: static;
    width: auto;
    bottom: auto;
    left: auto;
    right: auto;
    margin-top: 0;
    margin-left: auto;
    /* push to the right end of the flex row */
    flex-shrink: 0;
    flex-wrap: nowrap;
    gap: 4px;
  }
}

/* ── user-quiz-card btnWrap: desktop-only — full-width row at the card bottom.
   Scoped to ≥641px so the mobile list-row layout never fights this rule.      */
@media (min-width: 641px) {
  .exam-card.user-quiz-card .exam-card-actions-wrap {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: auto;
    width: 100%;
  }
}

/* ── User-quiz cards: full flex-column layout ────────────────────────────── */
/*
 * Ensure the grid does not stretch the card height to match its tallest
 * sibling (e.g. the tall "create new quiz" card).  align-self: start lets
 * the card shrink-wrap its own content while the action buttons still pin
 * to the bottom via margin-top: auto on the actions div.
 */
.exam-card.user-quiz-card {
  align-self: start;
  overflow: hidden;
  /* clip the ::before accent strip to the card's border-radius */
  /* No text-align override here — inherits "center" from base .exam-card,
     keeping the title centred on desktop to match normal quiz cards. */
}

/*
 * Re-enable the shared .exam-card::before hover-accent strip on user-quiz-card.
 * The card now uses overflow:hidden (above) so the strip is properly clipped.
 * Match the card's own border-radius (12px from the USER QUIZ CARD section)
 * so the strip's corners align exactly with the card's top corners.
 */
.exam-card.user-quiz-card::before {
  border-radius: 12px 12px 0 0;
}

/* Types-row (badge chips): right-justify within the meta bar so the chips
   sit flush right — mirroring text-align:right on plain .exam-types-subtext.
   display:flex overrides text-align, so justify-content is what actually
   controls which side the chips stack toward. */
.user-quiz-types-row.exam-types-subtext {
  justify-content: flex-end;
}

.exam-types-subtext {
  font-size: 0.85rem;
  color: var(--color-text-tertiary, #888);
  letter-spacing: 0.2px;
}

/*
 * ============================================================================
 * MOBILE CARD OVERRIDE — MUST come AFTER the base card styles above.
 *
 * CSS cascade ordering problem: The mobile @media (max-width: 640px) block
 * that sets up the compact list-row layout lives at an earlier position in
 * this file (~line 522). The base .card / .category-card / .exam-card rules
 * directly above (font-size: 3.5rem, padding: 20px 22px, text-align: center,
 * etc.) are in the normal flow and appear AFTER that mobile block. Since both
 * blocks have equal specificity, source order wins — the base styles override
 * the mobile styles on small screens, producing the "ginormous card" bug.
 *
 * Solution: re-declare only the conflicting overrides here, later in the
 * file, so cascade ordering now works in our favour. No !important needed.
 * ============================================================================
 */
@media (max-width: 640px) {

  /* ── Card shell: compact horizontal row ─────────────────────────────────── */
  .card,
  .category-card,
  .exam-card {
    padding: 0 10px;
    border-radius: 0;
    box-shadow: none;
    border: none;
    border-top: 1px solid var(--color-border);
    text-align: left;
    direction: ltr;
    /* Suppress desktop hover lift */
    transform: none !important;
    /* The base rule sets overflow:hidden (to clip the ::before accent
       strip to the card's rounded corners), but that also clips the
       course-info-tooltip popover, which needs to escape the card's
       bounds to be visible/reachable on phones. Clip the strip on its
       own pseudo-element instead (mirrors .exam-card.user-quiz-card
       below) and let the card itself overflow. */
    overflow: visible;
  }

  .card::before,
  .category-card::before,
  .exam-card::before {
    overflow: hidden;
    border-radius: inherit;
  }

  .card:first-child,
  .category-card:first-child,
  .exam-card:first-child {
    border-top: none;
  }

  /* Also kill the tablet override padding that fires at ≤960px */
  .category-card {
    padding: 0 10px;
    padding-bottom: 0;
    text-align: left;
  }

  /* ── Category icon: small pill on the left ───────────────────────────────── */
  .category-card .icon,
  .phone-only-emoji,
  .user-quiz--phone-only-emoji,
  .category-icon {
    font-size: 1.25rem;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    transform: none !important;
    transition: none;
    filter: none;
    background: inherit;
    border-radius: 8px;
  }

  /* Suppress desktop hover icon animation */
  .category-card:hover .icon {
    transform: none !important;
  }

  /* ── Heading: small, LTR, left-aligned ──────────────────────────────────── */
  .card h3,
  .category-card h3,
  .exam-card h3 {
    font-size: 0.83rem;
    margin-bottom: 0;
    text-align: left;
    direction: ltr;
  }

  /* ── Paragraph / subtext: tiny muted label ───────────────────────────────── */
  .card p,
  .category-card p,
  .exam-card p {
    font-size: 0.7rem;
    margin-bottom: 0;
    line-height: 1.2;
  }
}

/* Premium Button */
.start-btn {
  background: var(--gradient-success);
  color: white;
  border: none;
  padding: 13px 24px;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow:
    var(--shadow-md),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  width: 100%;
  position: relative;
  overflow: hidden;
  letter-spacing: 0.01em;
}

.start-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.2) 0%,
      transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.start-btn:hover {
  
  box-shadow: var(--shadow-lg);
}

.start-btn:hover::before {
  opacity: 1;
}

.start-btn:active {
  transform: translateY(0);
}

/* Mobile: shrink .start-btn into a compact 32px icon button.
 * The base rule (width: 100%) comes before this in the file, so we need
 * this block after it to win the cascade at ≤640px. */
@media (max-width: 640px) {
  .exam-card .start-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 0 !important;
    flex: 0 0 32px !important;
    padding: 0 !important;
    border-radius: 8px !important;
    font-size: 0 !important;
    /* hide Arabic text */
    line-height: 1 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
  }

  /* ▶ play icon for the start button */
  .exam-card .start-btn::after {
    content: "▶";
    font-size: 0.75rem;
    color: white;
  }

  /* ↓ download icon for the (red) download button */
  .exam-card .start-btn[style*="dc2626"]::after,
  .exam-card .start-btn[style*="b91c1c"]::after {
    content: "↓";
    font-size: 0.85rem;
  }

  /* Suppress the hover lift on mobile buttons */
  .exam-card .start-btn:hover {
    transform: none !important;
  }

  /* The btnWrap div: reset absolute, keep it flex inline in the row */
  .exam-card div[style*="margin-top"] {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    margin-top: 0 !important;
    gap: 4px !important;
    width: auto !important;
    flex-shrink: 0;
  }

  /* Reset exam-card min-height and meta absolute positioning */
  .exam-card {
    min-height: 52px !important;
  }

  .exam-card-meta {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
  }
}

/* Modal Styles */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal, 6000);
}

/* Phones show a fixed bottom-nav bar over the page. Reserve its height (plus
   the home-indicator safe area) as bottom padding on the overlay so a
   vertically-centered modal card is centered in the space ABOVE the nav,
   not the full viewport — otherwise a tall card's bottom edge can land
   underneath the nav bar. --bottom-nav-height falls back to a safe generic
   estimate if the layout stylesheet hasn't set it. */
@media (max-width: 640px) {
  .modal-overlay {
    padding-bottom: calc(var(--bottom-nav-height, 64px) + env(safe-area-inset-bottom, 0px));
    align-items: center;
    box-sizing: border-box;
  }
}

.modal-card {
  padding: 32px;
  border-radius: 20px;
  max-width: 500px;
  width: 90%;
  text-align: center;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.modal-card p {
  direction: rtl;
}

/* ============================================================================
 * MOVE-TO DIALOG — folder-tree picker opened from "نقل إلى" (context menu
 * and card ⋮ overlay). Renders an actual indented tree (see
 * user-quizzes-folders.js's addNode/appendChildren): a header with title +
 * subtitle + close button, then one .move-to-dialog-node button per
 * folder/course, a "current location" badge, and a disabled state (with a
 * title= tooltip explaining why) for invalid destinations instead of
 * hiding them outright.
 *
 * Guide lines (the vertical/elbow strokes showing the tree's shape,
 * modeled on a real file-tree explorer / this project's own context-map
 * doc) are drawn per ROW, not per sibling-group wrapper. Each row carries
 * one .move-to-dialog-guide span per ancestor level, absolutely positioned
 * at that level's own indent via the `--level` custom property the JS
 * sets inline. Because every row independently draws its own full guide
 * set from its own top to its own bottom, a level's line is pixel-
 * continuous from the row after a fork to the row before the next one
 * regardless of how many children any single ancestor happens to have —
 * unlike an earlier version that shared one border-right per sibling-group
 * wrapper, which produced visibly disconnected segments the moment any
 * ancestor folder had only one child (an extremely common shape).
 * ============================================================================ */
.move-to-dialog-card {
  padding: 0;
  max-width: 400px;
  width: 100%;
  display: flex;
  flex-direction: column;
  max-height: min(560px, 80vh);
  overflow: hidden;
}

.move-to-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.move-to-dialog-header-text {
  min-width: 0;
}

.move-to-dialog-title {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

.move-to-dialog-subtitle {
  unicode-bidi: plaintext; /* truncate by the text's own direction */
  text-align: start;
  margin: 0;
  font-size: 0.82rem;
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.move-to-dialog-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text-secondary);
  border-radius: 8px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.move-to-dialog-close:hover,
.move-to-dialog-close:focus-visible {
  background: var(--color-bg-hover, rgba(0, 0, 0, 0.06));
  color: var(--color-text-primary);
}

.move-to-dialog-close:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.move-to-dialog-tree {
  display: flex;
  flex-direction: column;
  padding: 8px;
  overflow-y: auto;
}

.move-to-dialog-status {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 10px 16px 4px;
  color: var(--color-primary);
  font-size: 0.85rem;
  font-weight: 600;
}

.move-to-dialog-status[hidden] {
  display: none;
}

.move-to-dialog-status::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: move-to-dialog-spin 0.7s linear infinite;
}

.move-to-dialog-status--error {
  color: var(--color-error);
}

.move-to-dialog-status--error::before {
  display: none;
}

@keyframes move-to-dialog-spin {
  to {
    transform: rotate(360deg);
  }
}

.move-to-dialog-node {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: 0.88rem;
  text-align: right;
  cursor: pointer;
  transition: background-color 0.12s ease;
  position: relative;
}

.move-to-dialog-node:hover:not(.move-to-dialog-node--disabled) {
  background: var(--color-bg-hover, rgba(0, 0, 0, 0.06));
}

.move-to-dialog-node:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

/* Root row (depth 0, "امتحاناتك الرئيسية") reads as a distinct, permanent
   top-level destination rather than just another tree row. */
.move-to-dialog-node[data-depth="0"] {
  font-weight: 600;
  margin-bottom: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
  border-radius: 8px 8px 0 0;
}

.move-to-dialog-node-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  font-size: 1.05rem;
  line-height: 1;
}

.move-to-dialog-node-label {
  unicode-bidi: plaintext; /* truncate by the text's own direction */
  text-align: start;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.move-to-dialog-node-badge {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-primary-soft, rgba(99, 102, 241, 0.12));
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.move-to-dialog-node--current {
  background: var(--color-bg-hover, rgba(0, 0, 0, 0.04));
}

.move-to-dialog-node--disabled {
  cursor: not-allowed;
  color: var(--color-text-tertiary, var(--color-text-secondary));
  opacity: 0.55;
}

.move-to-dialog-node--disabled .move-to-dialog-node-icon {
  opacity: 0.7;
}

.move-to-dialog-node:disabled:not(.move-to-dialog-node--disabled) {
  cursor: wait;
  opacity: 0.6;
}

.move-to-dialog-node--loading {
  background: var(--color-bg-hover, rgba(0, 0, 0, 0.06));
}

/* Rows need extra right padding per ancestor level so the label doesn't
   sit under the deepest guide line; `--depth` is set inline by the JS. */
.move-to-dialog-node {
  padding-right: calc(10px + var(--depth, 0) * 18px);
}

html[dir="ltr"] .move-to-dialog-node {
  padding-right: 10px;
  padding-left: calc(10px + var(--depth, 0) * 18px);
}

/* One guide per ancestor level, positioned by that level's own `--level`
   (0 = the level right under root). Each level's horizontal slot is 18px
   wide, mirroring the old branch indent, right-aligned in RTL (flipped to
   left-aligned in LTR) so nested levels stack inward toward the label. */
.move-to-dialog-guide {
  position: absolute;
  right: calc(18px * var(--level) + 8px);
  background: var(--color-text-tertiary, var(--color-border));
  pointer-events: none;
}

@supports (background: color-mix(in srgb, red, transparent)) {
  .move-to-dialog-guide {
    background: color-mix(in srgb, var(--color-text-tertiary, var(--color-border)) 55%, transparent);
  }
}

html[dir="ltr"] .move-to-dialog-guide {
  right: auto;
  left: calc(18px * var(--level) + 8px);
}

/* Ancestor pass-through: a straight vertical line running this row's full
   height, since an ancestor level either keeps going past this row
   entirely (more of that ancestor's own siblings still to come further
   down) or isn't drawn at all for this row (see addNode — omitted rather
   than styled-away, so there's never a stray zero-height fragment). */
.move-to-dialog-guide--pass {
  top: 0;
  bottom: 0;
  width: 1.5px;
}

/* This row's OWN level: an elbow — vertical line down to this row's
   mid-height, then a short horizontal stub into the icon/label. */
.move-to-dialog-guide--elbow {
  top: 0;
  height: 50%;
  width: 1.5px;
}

.move-to-dialog-guide--elbow::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  width: 10px;
  height: 1.5px;
  background: currentColor;
  color: inherit;
}

html[dir="ltr"] .move-to-dialog-guide--elbow::after {
  right: auto;
  left: 0;
}

/* When a later sibling still follows this row at its own level, extend
   the vertical line past this row's mid-height down to its full height so
   the next sibling's own pass-through/elbow guide has a continuous line
   to join — this is what keeps consecutive siblings' guides from ever
   visibly breaking between rows. */
.move-to-dialog-guide--elbow.move-to-dialog-guide--continues {
  height: 100%;
}

/* ============================================================================
   LUCIDE ICON NORMALIZATION — ported from create-quiz.css. Was missing here
   entirely, which is why inline <svg class="page-data-lucide"> icons (e.g.
   the download modal's header icon and its close-X) rendered at their raw
   intrinsic size instead of a normalized 1em — the giant unstyled icon and
   missing circular close button on this page's download popup.
   ============================================================================ */
.page-data-lucide {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  stroke-width: 2;
  flex-shrink: 0;
  display: inline-block;
}

/* ============================================================================
   MODAL HEADER / CLOSE BUTTON — also ported from create-quiz.css (missing
   here for the same reason as above). Used by the download modal and any
   other .modal-card that includes a .modal-header row.
   ============================================================================ */
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 2px solid var(--color-border);
  flex-shrink: 0;
}

.modal-header h2 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 1.2rem;
  /* Tight line-height + flex keeps the h2's box hugging its icon+text
     content, so .modal-header's align-items:center lines it up with the
     36px close button instead of centering an inflated line-box (the same
     fix applied on the create-quiz page's .modal-header h2). */
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.2;
}

.close-btn {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--color-text-secondary);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 0.2s,
    color 0.2s;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  line-height: 1;
}

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

/* ============================================================================
   DOWNLOAD MODAL — extracted to its own component. Styles for
   .dl-modal-card / .mode-grid / .export-card etc. now live in
   public/src/components/download-quiz-modal/download-quiz-modal.css,
   linked directly in index.html.
   ============================================================================ */

/* Close modal button */
.close-modal {
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  margin-top: 16px;
  color: var(--color-text-secondary);
}

.close-modal:hover {
  color: var(--color-text-primary);
}

/* ── Download password prompt ─────────────────────────────────────────────── */

.download-password-form {
  margin: 20px 0 8px;
  direction: rtl;
}

.download-password-input {
  width: 100%;
  padding: 14px 16px;
  direction: ltr;
  text-align: center;
  letter-spacing: 0.15em;
  border: 1.5px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-background);
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: 1rem;
  transition: all 0.2s;
  outline: none;
  box-sizing: border-box;
}

.download-password-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-light);
}

.download-password-error {
  margin-top: 10px;
  color: var(--color-error, #dc2626);
  font-size: 0.85rem;
}

.download-password-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.download-password-actions .btn-primary {
  width: 100%;
  padding: 14px;
  background: var(--gradient-accent);
  color: white;
  border: none;
  border-radius: 12px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  box-shadow:
    var(--shadow-md),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.download-password-actions .btn-primary:hover {
  
  box-shadow: var(--shadow-lg);
}

.download-password-actions .btn-primary:active {
  transform: translateY(0);
}

/* Lock badge on download triggers for password-protected quizzes */
.is-password-protected {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
}

/* =============================================================================
   DB-sourced quiz card — accent border
   ============================================================================= */

/* ── Accent border on the whole card ──────────────────────────────────────── */
.exam-card--db {
  border-inline-start: 3px solid var(--color-primary);
  /* RTL-aware left border */
  position: relative;
  /* already set in JS, but safe to repeat */
}

/* ============================================================================
   WATERMARK
   ============================================================================ */
.watermark {
  text-align: center;
  margin-top: auto;
  padding-top: 40px;
  border-top: 1px solid var(--color-border-light);
  font-size: 0.8rem;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
}

.watermark p {
  margin: 0;
}

.watermark a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
}

.watermark a:hover {
  text-decoration: underline;
}

/* Loading State */
.loading {
  text-align: center;
  padding: 80px 32px;
  font-size: 1.125rem;
}

/* "نسخ لامتحاناتي" button loading state — spinner shown in place of the
   duplicate icon while a copy (single quiz or a whole course/folder tree)
   is in flight. See withCopyButtonLoadingState() in copy-to-my-quizzes.js. */
.copy-btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid color-mix(in srgb, currentColor 30%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: copy-btn-spin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes copy-btn-spin {
  to {
    transform: rotate(360deg);
  }
}

.exam-action-btn.is-copying {
  cursor: progress;
  opacity: 0.85;
}

/* All-courses fallback banner — shown above the grid when the user has an
   academic stage set but no specific course subscriptions, so every course
   is being shown as a fallback (see renderRootCategories() in root-view.js). */
.all-courses-banner {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 14px 18px;
  margin-bottom: 20px;
  border-radius: 12px;
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary);
  color: var(--color-text-primary);
}

.all-courses-banner-icon {
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
}

.all-courses-banner-text {
  flex: 1 1 240px;
  font-size: 0.9rem;
  line-height: 1.5;
}

.all-courses-banner-link {
  flex-shrink: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: underline;
  white-space: nowrap;
}

.all-courses-banner-link:hover {
  opacity: 0.85;
}

/* "Not subscribed to this course" banner (category-view.js) — reuses the
   .all-courses-banner shell; only the subscribe button is new. */
.course-subscribe-banner-btn {
  flex-shrink: 0;
  padding: 8px 18px;
  border: none;
  border-radius: 8px;
  background: var(--color-primary);
  color: #fff;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.course-subscribe-banner-btn:hover {
  opacity: 0.9;
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: 80px 32px;
  margin: 0 auto;
  grid-column: 1 / -1;
  width: 100%;
  max-width: 480px;
}

.empty-state-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
  opacity: 0.35;
  color: var(--color-text-secondary);
}

.empty-state-icon svg {
  width: 56px;
  height: 56px;
}

/* "panel" variant — standalone card (e.g. "no quizzes yet"), not inside a
   results grid, so it needs its own surface/shadow instead of inheriting
   the grid's. */
.empty-state--panel {
  background: var(--color-surface);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  padding: 60px 20px;
}

.empty-state--panel h3 {
  margin-bottom: 10px;
  color: var(--color-text-primary);
}

.empty-state--panel p {
  color: var(--color-text-secondary);
}

/* ============================================================================
   ERROR STATE
   ============================================================================ */
.error-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 32px;
  background: rgba(220, 38, 38, 0.05);
  border: 1px solid rgba(220, 38, 38, 0.18);
  border-radius: 20px;
  color: var(--color-text-primary);
  position: relative;
  overflow: hidden;
}

.error-state::before {
  content: "⚠️";
  display: block;
  font-size: 3.5rem;
  margin-bottom: 20px;
  opacity: 0.7;
}

.error-state p {
  color: #dc2626;
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: 20px;
  line-height: 1.6;
}

.error-state button {
  display: inline-block;
  padding: 11px 28px;
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.95rem;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.error-state button:hover {
  
  box-shadow: 0 6px 18px rgba(220, 38, 38, 0.4);
}

.empty-state h3 {
  font-size: 1.5rem;
  margin-bottom: 12px;
}

@media (max-width: 768px) {
  body {
    padding-top: 16px;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: calc(var(--bottom-nav-height, 54px) + env(safe-area-inset-bottom, 0px) + 16px);
  }

  body.sidebar-expanded {
    padding-right: 16px;
  }

  .header {
    padding: 28px 20px;
    /* Match desktop's tight default: just enough to clear the button/border
       while closed (see .header's 16px base padding-bottom in this file's
       desktop rule) — no extra reservation needed. Only grows while search
       is open (below). */
    padding-bottom: 16px;
    border-radius: 18px;
  }

  .header.summary-is-open {
    padding-bottom: 76px;
  }

  .header h1 {
    font-size: 1.75rem;
  }

  .header p {
    font-size: 0.9rem;
  }

  #breadcrumb {
    top: 12px;
    left: 12px;
    padding: 8px 14px;
    gap: 6px;
  }

  .header-badge {
    display: none;
  }
}

/*
 * 480px: only header/controls adjustments — all card rules removed.
 * Rationale: the @media (max-width: 640px) mobile list-row block handles every
 * card at ≤640px (including ≤480px). Any card overrides here (padding:15px,
 * font-size:2.5rem, margin-bottom:5px) would reverse the compact list layout
 * since this block appears later in the file and has higher cascade priority.
 */
@media (max-width: 480px) {
  .header {
    padding: 24px 20px;
    padding-bottom: 16px;
  }

  .header.summary-is-open {
    padding-bottom: 76px;
  }

  .header h1 {
    font-size: 1.6rem;
  }

  .header p {
    font-size: 0.92rem;
  }

  #breadcrumb {
    top: 10px;
    left: 10px;
    padding: 6px 12px;
    font-size: 0.8rem;
    gap: 4px;
    border-radius: 8px;
  }
}

/* Accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ========== Course Data styles ========== */
.course-meta {
  display: flex;
  gap: 8px;
  margin: 8px 0;
  flex-wrap: wrap;
  justify-content: center;
}

.course-meta-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Light mode colors */
.course-meta-badge.faculty {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
}

.course-meta-badge.year {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
}

.course-meta-badge.term {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: white;
}

/* Dark mode adjustments */
[data-theme="dark"] .course-meta-badge,
[data-theme="dark-slate"] .course-meta-badge {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .course-meta-badge.faculty,
[data-theme="dark-slate"] .course-meta-badge.faculty {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

[data-theme="dark"] .course-meta-badge.year,
[data-theme="dark-slate"] .course-meta-badge.year {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
}

[data-theme="dark"] .course-meta-badge.term,
[data-theme="dark-slate"] .course-meta-badge.term {
  background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
}

/* Empty state for no options */
.no-options-message {
  text-align: center;
  padding: 32px;
  opacity: 0.7;
  font-style: italic;
}

.ltr {
  direction: ltr;
}

/* ============================================================================
   SHIMMER SKELETON LOADER
   ============================================================================ */
@keyframes shimmer {
  0% {
    background-position: -1200px 0;
  }

  100% {
    background-position: 1200px 0;
  }
}

.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-bottom: 48px;
}

@media (max-width: 1280px) {
  .skeleton-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 960px) {
  .skeleton-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 640px) {
  .skeleton-grid {
    display: flex;
    flex-direction: column;
    gap: 0px;
  }
}

.skeleton-card {
  border-radius: 20px;
  padding: 32px;
  border: 1px solid var(--color-border-light, #e5e7eb);
  background: var(--color-surface, #ffffff);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-height: 180px;
}

.skeleton-block {
  border-radius: 10px;
  background-color: var(--color-background-secondary);
  background-image: var(--gradient-loading-skeleton);
  background-size: 1200px 100%;
  background-repeat: no-repeat;
  /* Loading skeletons stay animated regardless of "الأداء الفائق" /
     reduced-motion mode, so this is unconditional rather than gated
     behind html[data-motion="normal"]. */
  animation: shimmer 1.6s ease-in-out infinite;
}

.skeleton-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  flex-shrink: 0;
}

.skeleton-title {
  height: 20px;
  width: 70%;
}

.skeleton-text {
  height: 13px;
  width: 45%;
}

/*
 * Mobile skeleton re-override — placed AFTER the base skeleton rules above.
 * The base .skeleton-card (flex-direction: column, padding: 32px, etc.) sits
 * later in the file than the @media (max-width: 640px) block at line ~521,
 * so the base rules would override the mobile ones without this block.
 * Cascade rule: later source order wins at equal specificity — so this
 * block, placed after the base rules, correctly wins at ≤640px.
 */
@media (max-width: 640px) {
  .skeleton-grid {
    border: 1px solid var(--color-border);
    border-radius: 14px;
    overflow: hidden;
  }

  .skeleton-card {
    flex-direction: row;
    align-items: center;
    padding: 0 14px;
    min-height: 52px;
    border-radius: 0;
    gap: 12px;
    border-bottom: none;
    border-top: 1px solid var(--color-border);
    box-shadow: none;
    direction: ltr;
  }

  .skeleton-card:first-child {
    border-top: none;
  }

  .skeleton-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    flex-shrink: 0;
    margin: 0;
  }

  .skeleton-title {
    height: 11px;
    width: 50%;
    border-radius: 6px;
    flex-shrink: 0;
  }

  .skeleton-text {
    height: 9px;
    width: 30%;
    border-radius: 6px;
    flex-shrink: 0;
  }
}

/* ============================================================================
   USER QUIZ CARD
   ============================================================================ */

/* Card shell */
.exam-card.user-quiz-card {
  background: var(--color-surface);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
  border: 2px solid var(--color-border);
  position: relative;
  overflow: hidden;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
}

.exam-card.user-quiz-card:hover {
  
  box-shadow: var(--shadow-lg);
}

/* ── Folder & course category cards in user quizzes view ──
   Size and layout behave identically to user quiz cards on desktop */
.user-quizzes-container .category-card {
  background: var(--color-surface);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
  border: 2px solid var(--color-border);
  position: relative;
  overflow: hidden;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  min-height: 200px;
  align-self: start;
  text-align: center;
}

.user-quizzes-container .category-card:hover {
  
  box-shadow: var(--shadow-lg);
}

.user-quizzes-container .category-card::before {
  border-radius: 12px 12px 0 0;
}

/* Category icon on desktop within user quizzes */
.user-quizzes-container .category-card .category-icon {
  font-size: 2.75rem;
  margin: 10px auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease;
  line-height: 1;
}

.user-quizzes-container .category-card:hover .category-icon {
  transform: scale(1.08);
}

.user-quizzes-container .category-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 8px 0;
  line-height: 1.3;
  color: var(--color-text-primary);
  text-align: center;
  direction: ltr;
}

/* Subtext in user quizzes category card */
.user-quizzes-container .category-card .category-card-subtext {
  margin-top: auto;
  padding-top: 12px;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  direction: rtl;
  text-align: center;
}

/* More options button (⋮) on folder card */
.user-quizzes-container .category-card .category-card-actions-wrap {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
}

.user-quizzes-container .category-card .category-card-actions-wrap .exam-more-btn.exam-more-btn--lg {
  position: static;
  width: 26px;
  height: 26px;
  border-radius: 6px;
}

.user-quizzes-container .category-card .category-card-actions-wrap .exam-more-btn.exam-more-btn--lg svg {
  width: 16px;
  height: 16px;
}

/* Gradient accent bar at the top of the card */
.user-quiz-accent-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-accent);
  border-radius: 10px 10px 0 0;
}

/* Quiz title */
.user-quiz-title {
  margin: 0 0 8px 0;
  color: var(--color-text-primary);
  font-size: 1.1rem;
}

/* Desktop: keep quiz-card titles on a single truncated line */
.exam-card.user-quiz-card h3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

/* Metadata row (question count + date) */
.user-quiz-metadata {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 15px;
}

/* Question count span */
.user-quiz-count {
  color: var(--color-text-secondary);
  font-size: 0.85rem;
}

/* Question type chips row */
.user-quiz-types-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.admin-log-in-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--color-background-secondary);
  border: 1.5px solid var(--color-border);
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.88rem;
  transition: all 0.2s;
  margin-left: 10px;
}

.admin-log-in-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.admin-log-in-btn:hover svg {
  fill: var(--color-primary);
}

.admin-log-out-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  background: var(--color-error-light, #fed7d7);
  border: 1.5px solid var(--color-error, #f56565);
  color: var(--color-error, #c53030);
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.88rem;
  transition: all 0.2s;
  margin-left: 10px;
}

.admin-log-out-btn:hover {
  background: var(--color-error, #e53e3e);
  border-color: var(--color-error, #e53e3e);
  color: #ffffff;
}

.admin-log-out-btn:hover svg {
  stroke: #ffffff;
}

/* ============================================================================
   SUBSCRIBE BUTTON
   ============================================================================ */

.subscribe-btn-container {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

.subscribe-btn {
  width: 100%;
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
}

.subscribe-btn--add {
  background: var(--gradient-accent);
  color: white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.subscribe-btn--add:hover {
  
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.subscribe-btn--subscribed {
  background: var(--color-success-light, #d1fae5);
  color: var(--color-success, #059669);
  cursor: default;
}

@media (max-width: 640px) {
  .subscribe-btn-container {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;

    /* Leave area for the `course-info-btn` button */
    margin-right: 40px;
  }
}

/* ============================================================================
   USER QUIZ SEARCH / CREATE ACTIONS BAR
   Hidden on desktop (the right-click context menu handles folder/course
   creation there). Shown exclusively on mobile where the context menu is
   less accessible.
   ============================================================================ */

.user-quiz-search-actions {
  grid-column: 1 / -1;
  display: none;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .user-quiz-search-actions {
    display: flex;
  }
}

@media (max-width: 640px) {
  .user-quiz-search-actions {
    margin-bottom: 28px;
  }
}

@media (max-width: 480px) {
  .user-quiz-search-actions {
    gap: 5px;
  }
}

/* ============================================================================
   CREATE FOLDER BUTTON — premium pill-shaped style matching the theme
   ============================================================================ */

.create-folder-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: var(--radius-full, 9999px);
  border: 1.5px solid var(--color-primary, #0088cc);
  background: var(--color-primary-light, rgba(0, 136, 204, 0.1));
  color: var(--color-primary, #0088cc);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    background var(--transition-fast, 0.15s ease),
    border-color var(--transition-fast, 0.15s ease),
    box-shadow var(--transition-fast, 0.15s ease),
    transform var(--transition-fast, 0.15s ease);
  white-space: nowrap;
}

.create-folder-btn:hover {
  background: var(--color-primary, #0088cc);
  color: #fff;
  box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--color-primary, #0088cc) 50%, transparent);
  
}

.create-folder-btn:active {
  transform: translateY(0);
}

.create-folder-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* ============================================================================
   QUESTION TYPE BADGES (exam cards)
   ============================================================================ */
.exam-question-types {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: 10px 0 4px;
}

.question-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  border: 1px solid transparent;
  transition: transform 0.15s ease;
}

.question-type-badge:hover {
  transform: scale(1.05);
}

.question-type-badge[data-type="MCQ"] {
  background: rgba(59, 130, 246, 0.1);
  color: #2563eb;
  border-color: rgba(59, 130, 246, 0.25);
}

.question-type-badge[data-type="Essay"] {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
  border-color: rgba(16, 185, 129, 0.25);
}

.question-type-badge[data-type="True/False"] {
  background: rgba(245, 158, 11, 0.1);
  color: #d97706;
  border-color: rgba(245, 158, 11, 0.25);
}

/* Fallback for any other type */
.question-type-badge:not([data-type="MCQ"]):not([data-type="Essay"]):not([data-type="True/False"]) {
  background: rgba(99, 102, 241, 0.08);
  color: var(--color-accent, #6366f1);
  border-color: rgba(99, 102, 241, 0.2);
}

/* ============================================================================
   Responsive adjustments
   ============================================================================ */
@media (max-width: 768px) {
  .watermark {
    margin-bottom: 20px;
    padding-top: 20px;
  }

  .watermark p {
    font-size: small;
  }
}

/* ============================================================================
   Custom utility classes for responsive visibility & Mobile Layout Fixes
   ============================================================================ */
.phone-only-emoji,
.user-quiz--phone-only-emoji {
  display: none;
}

@media (max-width: 640px) {

  .phone-only-emoji,
  .user-quiz--phone-only-emoji,
  .category-icon {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .user-quizzes-container.selection-mode-active .user-quiz--phone-only-emoji,
  .user-quizzes-container.selection-mode-active .category-icon {
    visibility: hidden !important;
  }

  .start-btn.desktop-download-btn {
    display: none !important;
  }

  .course-meta,
  .new-badge {
    display: none;
  }

  /* ── User-quiz and folder cards: same compact list-row as normal exam cards ── */

  /* Card shell */
  .exam-card.user-quiz-card,
  .user-quizzes-container .category-card {
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 0 10px !important;
    min-height: 52px !important;
    height: auto !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
    border-top: 1px solid var(--color-border) !important;
    margin-top: 0 !important;
    text-align: left !important;
    direction: ltr !important;
    overflow: hidden !important;
  }

  /* No decorative gradient bar — no room in compact row */
  .exam-card.user-quiz-card .user-quiz-accent-bar {
    display: none !important;
  }

  /* No lift animation on mobile */
  .exam-card.user-quiz-card:hover,
  .user-quizzes-container .category-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  /* card-text: override display:contents (desktop base) → flex column
     so it participates in the horizontal flex row as the stretchy middle */
  .exam-card.user-quiz-card .card-text,
  .user-quizzes-container .category-card .card-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    flex: 1 !important;
    min-width: 0 !important;
    align-items: flex-start !important;
  }

  /* Title: compact, single line, truncated */
  .exam-card.user-quiz-card h3,
  .user-quizzes-container .category-card h3 {
  unicode-bidi: plaintext; /* truncate by the text's own direction */
    font-size: 0.83rem !important;
    font-weight: 600 !important;
    margin-bottom: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: left !important;
    direction: ltr !important;
    width: 100% !important;
  }

  /* Folder subtext on mobile */
  .user-quizzes-container .category-card .category-card-subtext {
    font-size: 0.65rem !important;
    color: var(--color-text-tertiary, #888) !important;
    direction: rtl !important;
    margin: 0 0 6px 0 !important;
    text-align: right !important;
    flex-shrink: 0 !important;
  }

  /* Actions wrap on mobile */
  .user-quizzes-container .category-card .category-card-actions-wrap {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
    margin-top: 0 !important;
    margin-left: auto !important;
    width: auto !important;
  }

  .user-quizzes-container .category-card .category-card-actions-wrap .exam-more-btn.exam-more-btn--lg {
    position: static !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .user-quizzes-container .category-card .category-card-actions-wrap .exam-more-btn.exam-more-btn--lg svg {
    width: 18px !important;
    height: 18px !important;
  }

  /* Ensure .category-icon aligns identically to .user-quiz--phone-only-emoji */
  .user-quizzes-container .category-card .category-icon {
    font-size: 1.25rem !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    flex-shrink: 0 !important;
    transform: none !important;
    transition: none !important;
    filter: none !important;
    background: inherit !important;
    border-radius: 8px !important;
  }

  /* Meta bar: reset absolute desktop positioning → static sub-row under title */
  .exam-card.user-quiz-card .exam-card-meta {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin: 0 !important;
    width: 100% !important;
    white-space: nowrap !important;
  }

  /* Question count: compact muted text, after the chips */
  .exam-card.user-quiz-card .exam-question-count {
    font-size: 0.65rem !important;
    color: var(--color-text-tertiary, #888) !important;
    order: 2 !important;
    direction: rtl !important;
    flex-shrink: 0 !important;
    margin-bottom: 8px !important;
  }

  /* Type chips row: stays as badges, smaller, left-to-right reading order */
  .exam-card.user-quiz-card .user-quiz-types-row {
    order: 1 !important;
    flex-wrap: wrap !important;
    gap: 3px !important;
    margin-top: 0 !important;
    justify-content: flex-start !important;
    margin-bottom: 7px !important;
  }

  /* Individual chips: smaller font + tighter padding for compact row */
  .exam-card.user-quiz-card .user-quiz-types-row span {
    font-size: 0.6rem !important;
    padding: 1px 6px !important;
    border-radius: 10px;
    margin-left: 3px;
  }

  /* Actions wrap: static, pushed to far right, horizontal pill buttons */
  .exam-card.user-quiz-card .exam-card-actions-wrap {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
    margin-top: 0 !important;
    margin-left: auto !important;
    width: auto !important;
    flex-wrap: nowrap !important;
  }

  /* Play button: compact icon-only pill */
  .exam-card.user-quiz-card .start-btn {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    font-size: 0 !important;
    flex: 0 0 32px !important;
    min-width: 0 !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .exam-card.user-quiz-card .start-btn::after {
    content: "▶";
    font-size: 0.75rem;
    color: white;
  }

  /* Download button: hidden on mobile (same as normal exam cards) */
  .exam-card.user-quiz-card .start-btn.desktop-download-btn {
    display: none !important;
  }
}

/* ============================================================================
   NEW BADGE — recently added content indicator
   ============================================================================ */
.new-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 4px;
  border-radius: var(--radius-full, 9999px);
  background: var(--gradient-accent,
      linear-gradient(135deg, #dc2626 0%, #b91c1c 100%));
  color: #fff;
  font-size: var(--font-size-xs, 0.72rem);
  font-weight: 700;
  letter-spacing: 0.3px;
  pointer-events: none;
  z-index: 3;
  box-shadow: var(--shadow-sm);
}

/* Ensure the card has relative positioning for the badge anchor */
.card,
.category-card,
.exam-card {
  position: relative;
}

/* ============================================================================
   SHORTCUTS OVERLAY
   ============================================================================ */
.shortcuts-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: var(--space-lg);
}

.shortcuts-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-xl) var(--space-2xl);
  box-shadow: var(--shadow-xl);
  max-width: 420px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.shortcuts-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
}

.shortcuts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.shortcuts-table td {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border-light);
  vertical-align: middle;
}

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

.shortcuts-table td:first-child {
  width: 55%;
  font-family: monospace;
}

kbd {
  display: inline-block;
  padding: 2px 7px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-background-secondary);
  color: var(--color-text-primary);
  font-size: 0.78rem;
  font-family: inherit;
  box-shadow: 0 1px 0 var(--color-border);
  line-height: 1.4;
}

.shortcuts-close {
  align-self: flex-end;
  padding: var(--space-sm) var(--space-lg);
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  font-size: var(--font-size-sm);
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.shortcuts-close:hover {
  background: var(--color-primary-hover);
}

/* ============================================================================
   INLINE CREATE QUIZ MODAL
   ============================================================================ */
.create-quiz-inline-modal {
  padding: 28px;
  border-radius: 20px;
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  max-width: min(550px, calc(100vw - 24px));
  width: 90%;
  min-width: 0;
  transform: translateY(20px);
  opacity: 0;
  animation: modalPopIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  /* Leave room above/below so the card never touches the viewport edges —
     the overlay already centers it, this just caps its own height. */
  max-height: min(90vh, 720px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.inline-quiz-textarea {
  flex-shrink: 1;
  min-height: 100px;
}

.create-quiz-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
}

.create-quiz-actions .main-actions {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  width: 100%;
}

.inline-quiz-btn {
  padding: 12px 24px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 600;
  font-size: 0.95rem;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
}

/* Tablet / small-desktop: trim the outer padding a bit before the phone
   breakpoint kicks in, so the modal doesn't feel oversized on narrow
   windows that aren't quite "phone" width. */
@media (max-width: 640px) {
  .create-quiz-inline-modal {
    padding: 20px;
    max-height: 92vh;
  }
}

@media (max-width: 480px) {
  .create-quiz-inline-modal {
    padding: 14px 16px;
    width: 94vw;
    /* Cap relative to the *dynamic* viewport height where supported, so
       mobile browser chrome (address bar) doesn't cause the modal to
       overflow the visible area; falls back to 92vh otherwise. */
    max-height: 92vh;
    max-height: 92dvh;
    border-radius: 16px;
    gap: 2px;
  }

  .create-quiz-modal__title {
    font-size: 1.15rem;
    gap: 8px;
  }

  .create-quiz-modal__title-icon {
    width: 20px;
    height: 20px;
  }

  /* Header now holds 3 items (title, Prompt button, close button) instead
     of 2 — on very narrow phones, drop the Prompt button's text label and
     keep just its icon so the title still has room to breathe. */
  .create-quiz-modal__copy-prompt-btn {
    padding: 4px 8px;
  }

  .create-quiz-modal__copy-prompt-btn-label {
    display: none;
  }

  .create-quiz-modal__form-group--content {
    /* Let the textarea's own flex-shrink do the work instead of a fixed
       margin eating into the shrinking height budget. */
    margin-bottom: 14px;
  }

  .inline-quiz-textarea {
    height: auto !important;
    min-height: 90px;
    flex: 1 1 auto;
  }

  .inline-quiz-btn {
    width: 100%;
    padding: 9px 15px;
  }

  .create-quiz-modal__main-actions {
    flex-direction: column;
  }
}

@media (max-height: 640px) and (max-width: 480px) {

  /* Short phones in the wild (older/smaller devices, or a phone rotated
     with a keyboard open) — shrink chrome further rather than clipping. */
  .create-quiz-inline-modal {
    padding: 10px 14px;
  }

  .create-quiz-modal__subtitle {
    margin-bottom: 12px;
    font-size: 0.85rem;
  }

  .create-quiz-modal__form-group {
    margin-bottom: 10px;
  }

  .inline-quiz-textarea {
    min-height: 60px;
  }
}

/* ==========================================================================
   Prompt Selection Modal
   (opened from .create-quiz-modal__copy-prompt-btn — pick one of the 3 AI
   prompt presets to copy). Previously closed only via a text "إغلاق"
   button in a footer row; now uses the same `x` icon-button convention as
   every other modal in the app (.create-quiz-modal__close-btn), placed at
   the modal's top-left corner (the RTL "start" corner is top-right, where
   the title begins — top-left mirrors where .create-quiz-modal__close-btn
   sits relative to its own header, just without a header row to share
   here, so it's positioned absolutely against the card itself instead).
   ========================================================================== */
.prompt-selection-modal {
  position: relative;
  width: min(520px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: min(90vh, 720px);
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
}

.prompt-selection-modal > * {
  min-width: 0;
  max-width: 100%;
}

.prompt-selection-modal .prompt-buttons-container,
.prompt-selection-modal .prompt-btn {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.prompt-selection-modal .prompt-btn > div,
.prompt-selection-modal .prompt-btn > div > div {
  min-width: 0;
  overflow-wrap: anywhere;
}

.prompt-selection-modal__close-btn {
  position: absolute;
  top: 16px;
  left: 16px;
}

/* ==========================================================================
   Create Quiz Modal
   (inline-create-quiz flow triggered from the profile "New Quiz" action)
   ========================================================================== */

.create-quiz-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  min-width: 0;
  max-width: 100%;
}

.create-quiz-modal__title {
  /* Let the Prompt button and the close button keep their own size instead
     of being squeezed — the title is the one that should truncate/wrap
     first if the header ever gets tight. */
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.create-quiz-modal__close-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition:
    background-color 0.2s,
    color 0.2s;
}

.create-quiz-modal__close-btn:hover {
  background: var(--color-background-secondary);
  color: var(--color-text-primary);
}

.create-quiz-modal__title {
  margin-bottom: 0;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text-primary);
  overflow: visible;
}

.create-quiz-modal__title-icon {
  flex-shrink: 0;
  color: var(--color-primary);
}

.create-quiz-modal__copy-prompt-btn {
  position: relative;
  font-size: 0.7rem;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1.5px solid var(--color-border);
  background: var(--color-background-secondary);
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  font-weight: 600;
  /* Now a direct child of .create-quiz-modal__header (a row flex
     container, see above) rather than of the column-flex modal card
     itself, so it no longer needs the old align-self: flex-start /
     margin-bottom hack that used to keep it from being stretched to the
     modal's full width — the header's own `align-items: center` and
     `justify-content: space-between` place it correctly between the title
     and the close button. Living inside the header (rather than as its own
     block below it) also frees up room to its right for the hint arrow to
     bounce into, per the header's flex gap. */
  flex-shrink: 0;
}

.create-quiz-modal__copy-prompt-btn:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.create-quiz-modal__copy-prompt-btn-icon {
  flex-shrink: 0;
}

.create-quiz-modal__subtitle {
  margin-bottom: 24px;
  color: var(--color-text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.create-quiz-modal__subtitle code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--color-background-secondary);
  font-size: 0.9em;
}

.create-quiz-modal__form-group {
  margin-bottom: 18px;
  min-width: 0;
  max-width: 100%;
}

.create-quiz-modal__form-group--content {
  margin-bottom: 24px;
}

.create-quiz-modal__label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--color-text-primary);
  font-size: 0.9rem;
}

.create-quiz-modal__input,
.create-quiz-modal__textarea {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  direction: ltr;
  border: 1.5px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-background);
  color: var(--color-text-primary);
  font-family: inherit;
  transition: all 0.2s;
  outline: none;
  box-sizing: border-box;
}

.create-quiz-modal__input {
  padding: 14px 16px;
  font-size: 1rem;
}

.create-quiz-modal__textarea {
  padding: 16px;
  font-size: 0.95rem;
  line-height: 1.6;
  resize: vertical;
  overflow-x: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.create-quiz-modal__input:focus,
.create-quiz-modal__textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-light);
}

.create-quiz-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
}

.create-quiz-modal__main-actions {
  display: flex;
  align-items: stretch;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}

.create-quiz-modal__main-actions .create-quiz-modal__btn {
  flex: 1;
  justify-content: center;
}

.create-quiz-modal__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 0;
  box-sizing: border-box;
}

.create-quiz-modal__btn--import {
  border: 1.5px solid var(--color-border);
  background: var(--color-background-secondary);
  color: var(--color-text-primary);
}

.create-quiz-modal__btn--import:hover {
  border-color: var(--color-primary);
  background: var(--color-background);
}

.create-quiz-modal__btn--create {
  background: var(--gradient-accent);
  color: white;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.4);
  border: none;
}

.create-quiz-modal__btn--create:hover {
  
  box-shadow: 0 6px 18px rgba(220, 38, 38, 0.5);
}

.create-quiz-modal__file-input {
  display: none;
}

/* --- Bouncing hint arrow pointing at the "Prompt" button --- */

.create-quiz-modal__prompt-hint-arrow {
  position: absolute;
  top: 50%;
  right: -52px;
  transform: translateY(-50%);
  color: var(--color-primary);
  pointer-events: none;
  animation: create-quiz-modal-arrow-bounce 1.2s ease-in-out infinite;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.create-quiz-modal__prompt-hint-arrow--hidden {
  opacity: 0;
  transform: translateY(-50%) translateX(-6px) scale(0.8);
  animation: none;
}

@keyframes create-quiz-modal-arrow-bounce {

  0%,
  100% {
    transform: translateY(-50%) translateX(0);
  }

  50% {
    transform: translateY(-50%) translateX(-6px);
  }
}

#errorBoundary {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  z-index: 9999;
  min-width: 300px;
  max-width: 90vw;
  width: 420px;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-left: 5px solid #dc2626;
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow:
    0 10px 25px -5px rgba(220, 38, 38, 0.25),
    0 8px 10px -6px rgba(220, 38, 38, 0.15);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-family: "IBM Plex Sans Arabic", Tajawal, sans-serif;
  animation: errorBoundarySlideIn 0.35s ease-out forwards;
}

#errorBoundary p {
  margin: 0;
  color: #991b1b;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}

#errorBoundary button {
  flex-shrink: 0;
  background: #dc2626;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition:
    background-color 0.15s ease,
    transform 0.1s ease;
}

#errorBoundary button:hover {
  background: #b91c1c;
}

#errorBoundary button:active {
  transform: scale(0.97);
}

@keyframes errorBoundarySlideIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Dark theme support, matching your data-theme attribute pattern */
[data-theme="dark"] #errorBoundary,
[data-theme="dark-slate"] #errorBoundary {
  background: #2a1216;
  border-color: #7f1d1d;
  box-shadow:
    0 10px 25px -5px rgba(0, 0, 0, 0.5),
    0 8px 10px -6px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] #errorBoundary p,
[data-theme="dark-slate"] #errorBoundary p {
  color: #fca5a5;
}

[data-animations="disabled"] #errorBoundary {
  animation: none;
}

/* Elevate a card above its siblings on hover (pure visual affordance, e.g.
   so a lifted/shadowed card isn't overlapped by the next row).
   NOTE: this used to also fire on `:has(.course-info-tooltip.show)`, but
   the tooltip itself is switched to `position: fixed` by
   positionCourseInfoTooltip() (see tooltip-position.js), which positions
   it relative to the viewport, not this card. Including the open tooltip
   here promoted the CARD into its own stacking context via z-index, and
   a `position: fixed` descendant is still subject to an ancestor's
   stacking context — so that trapped the tooltip inside this low
   z-above layer instead of letting --z-tooltip govern it against the
   rest of the page, and it painted behind later cards. Dropped so an
   open tooltip no longer touches the card's z-index at all. */
.card:hover,
.category-card:hover,
.exam-card:hover {
  z-index: var(--z-above);
}

/* ============================================================================
   BULK ACTION & QUIZ SELECTION — custom checkbox, toggle button, action bar
   ============================================================================ */

/* ── Selection toggle button ──
   Styled as a distinct, pill-shaped control that clearly communicates a
   toggle state (idle vs. active/"selection mode on"). */
.btn.selection-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: var(--space-sm, 8px) var(--space-lg, 16px);
  border-radius: var(--radius-full, 9999px);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-weight: 600;
  font-size: var(--font-size-sm, 0.875rem);
  cursor: pointer;
  transition:
    background var(--transition-fast, 0.15s ease),
    border-color var(--transition-fast, 0.15s ease),
    color var(--transition-fast, 0.15s ease),
    box-shadow var(--transition-fast, 0.15s ease),
    transform var(--transition-fast, 0.15s ease);
}

.btn.selection-toggle-btn svg {
  flex-shrink: 0;
  transition: transform var(--transition-fast, 0.15s ease);
}

.btn.selection-toggle-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-light);
  box-shadow: var(--shadow-sm);
  
}

.btn.selection-toggle-btn:active {
  transform: translateY(0);
}

.btn.selection-toggle-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-primary-light);
  border-color: var(--color-primary);
}

/* Active ("selection mode on") state — solid primary fill so it reads
   unmistakably as "on". */
.btn.selection-toggle-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  box-shadow:
    0 4px 12px -2px color-mix(in srgb, var(--color-primary) 45%, transparent),
    var(--shadow-sm);
}

.btn.selection-toggle-btn.active svg {
  transform: scale(1.05);
}

.btn.selection-toggle-btn.active:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: #fff;
  
  box-shadow:
    0 6px 16px -2px color-mix(in srgb, var(--color-primary) 55%, transparent),
    var(--shadow-md);
}

@media (max-width: 480px) {

  .btn.selection-toggle-btn,
  .admin-log-in-btn {
    gap: 4px;
  }
}

/* ── Per-card selection checkbox ──
   Replaces the raw native checkbox with a custom control that sits
   comfortably on top of card content and gives clear hover/checked
   feedback, drawn without relying on accent-color. */
.user-quizzes-container .user-quiz-select-checkbox {
  display: none;
  position: absolute;
  top: 10px;
  left: 10px;
  width: 22px;
  height: 22px;
  margin: 0;
  z-index: 5;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  border-radius: var(--radius-sm, 6px);
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition:
    background var(--transition-fast, 0.15s ease),
    border-color var(--transition-fast, 0.15s ease),
    box-shadow var(--transition-fast, 0.15s ease),
    transform var(--transition-fast, 0.15s ease);
}

.user-quizzes-container.selection-mode-active .user-quiz-select-checkbox {
  display: block;
}

.user-quizzes-container .user-quiz-select-checkbox:hover {
  border-color: var(--color-primary);
  transform: scale(1.08);
}

.user-quizzes-container .user-quiz-select-checkbox:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow:
    0 2px 8px -1px color-mix(in srgb, var(--color-primary) 50%, transparent),
    var(--shadow-sm);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 8.5L6.5 11.5L12.5 4.5'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 65%;
}

.user-quizzes-container .user-quiz-select-checkbox:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* ── Floating bulk action bar ── */
.bulk-action-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full, 9999px);
  padding: 10px 12px 10px 24px;
  box-shadow:
    0 12px 32px -8px rgba(0, 0, 0, 0.28),
    var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 20px;
  z-index: var(--z-tooltip, 6000);
  animation: slideUp 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.bulk-action-bar .bulk-count {
  font-weight: 700;
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-primary);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bulk-action-bar .bulk-count::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.bulk-action-bar .bulk-actions {
  display: flex;
  gap: 8px;
}

.bulk-action-bar .btn {
  border: none;
  border-radius: var(--radius-full, 9999px);
  padding: 8px 18px;
  font-weight: 600;
  font-size: var(--font-size-sm, 0.875rem);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background var(--transition-fast, 0.15s ease),
    box-shadow var(--transition-fast, 0.15s ease),
    transform var(--transition-fast, 0.15s ease);
}

.bulk-action-bar .btn:hover {
  background: var(--color-text-secondary);
  color: var(--color-surface);
  box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--color-text-primary) 45%, transparent);
  
}

.bulk-action-bar .bulk-delete-btn {
  background: var(--color-error-light, #fed7d7);
  color: var(--color-error, #e53e3e);
  padding: 8px 12px;
}

.bulk-action-bar .bulk-delete-btn:hover {
  background: var(--color-error, #e53e3e);
  color: var(--color-surface);
  box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--color-error, #e53e3e) 45%, transparent);
  
}

.bulk-action-bar .bulk-extract-btn {
  background: var(--color-primary-light);
  color: var(--color-primary);
  padding: 8px 12px;
}

.bulk-action-bar .bulk-upload-btn {
  background: var(--color-primary-light);
  color: var(--color-admin);
}

.bulk-action-bar .bulk-extract-btn:hover {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--color-primary) 45%, transparent);
  
}

.bulk-action-bar .bulk-upload-btn:hover {
  background: var(--color-admin-hover);
  color: #fff;
  box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--color-primary) 45%, transparent);
  
}

.bulk-action-bar .btn:active {
  transform: translateY(0);
}

.bulk-action-bar .btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* Clear selection (✕) button — neutral, secondary style */
.bulk-action-bar .bulk-clear-btn {
  background: var(--color-background-secondary, rgba(0, 0, 0, 0.06));
  color: var(--color-text-secondary);
  padding: 8px 12px;
  font-size: 0.85rem;
  font-weight: 700;
}

.bulk-action-bar .bulk-clear-btn:hover {
  background: var(--color-border);
  color: var(--color-text-primary);
  box-shadow: none;
  transform: none;
}

/* Select all button — subtle neutral base */
.bulk-action-bar .bulk-select-all-btn {
  background: var(--color-background-secondary, rgba(0, 0, 0, 0.06));
  color: var(--color-text-primary);
}

.bulk-action-bar .bulk-select-all-btn.all-selected {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

[data-animations="disabled"] .btn.selection-toggle-btn,
[data-animations="disabled"] .user-quiz-select-checkbox,
[data-animations="disabled"] .bulk-action-bar,
[data-animations="disabled"] .bulk-action-bar .btn {
  transition: none;
  animation: none;
}

@media (max-width: 768px) {
  .bulk-action-bar {
    bottom: calc(24px + var(--bottom-nav-height, 0px) + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 600px) {
  .bulk-action-bar {
    /* Keep it centered but narrower than full-width so it doesn't reach
       under the FAB's right-anchored 56px+20px footprint. */
    width: calc(90% - 76px);
    max-width: 420px;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    border-radius: var(--radius-xl, 20px);
  }

  .bulk-action-bar .bulk-actions {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }
}

.exam-card.user-lesson-card {
  border-color: color-mix(in srgb, var(--color-success) 38%, var(--color-border));
}

.exam-card.user-lesson-card .start-btn:not(.desktop-download-btn) {
  background: var(--color-success);
  color: #fff;
}

.exam-card.user-lesson-card .desktop-download-btn {
  background: var(--color-primary);
  color: #fff;
}

.lesson-card-description {
  margin: .25rem 0 .45rem;
  color: var(--color-text-secondary);
  font-size: .84rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 600px) {
  .lesson-card-description {
    font-size: .8rem;
  }
}

/* Lesson cards contain user supplied titles and descriptions. Keep their
   metadata in document flow so it cannot overlap content as cards grow. */
@media (min-width: 641px) {
  .exam-card.lesson-card,
  .exam-card.user-lesson-card {
    min-height: 210px;
    align-self: stretch;
  }

  .exam-card.lesson-card .card-text,
  .exam-card.user-lesson-card .card-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    width: 100%;
  }

  .exam-card.lesson-card h3,
  .exam-card.user-lesson-card h3 {
  unicode-bidi: plaintext; /* truncate by the text's own direction */
  text-align: start;
    margin-bottom: .5rem;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .exam-card.lesson-card .lesson-card-description,
  .exam-card.user-lesson-card .lesson-card-description {
  unicode-bidi: plaintext; /* truncate by the text's own direction */
  text-align: start;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
    overflow-wrap: anywhere;
    text-overflow: ellipsis;
  }

  .exam-card.user-lesson-card .exam-card-meta,
  .exam-card.lesson-card .exam-card-meta {
    position: static;
    inset: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    width: 100%;
    margin: .5rem 0 0;
    white-space: normal;
  }

  .exam-card.user-lesson-card .exam-question-count,
  .exam-card.lesson-card .exam-question-count {
    margin: 0 !important;
  }
}

/* Phase 4a: local-only completion summary shown at a course's root. */
.course-lesson-progress {
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--color-success) 35%, var(--color-border));
  border-radius: var(--radius-md, 12px);
  color: var(--color-text, #1f2937);
  background: color-mix(in srgb, var(--color-success) 8%, transparent);
  font-weight: 700;
  text-align: center;
}

.lesson-card .start-btn {
  background: var(--color-success);
  color: #fff;
}

.exam-card.notebook-card .desktop-download-btn {
  background: var(--color-primary);
  color: #fff;
}

/* Folder/course info modal: the card already has its own padding, so drop the
   section's extra padding and let the creator card shrink/wrap on phones. */
.course-info-modal-card .quiz-info-section {
  padding: 16px 0 0;
  border-bottom: none;
}

.course-info-modal-card .quiz-creator-card {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.course-info-modal-card .quiz-creator-info {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  .course-info-modal-card {
    padding: 20px 16px;
  }

  .course-info-modal-card .quiz-creator-card {
    flex-wrap: wrap;
    padding: 12px;
    gap: 10px 12px;
  }

  .course-info-modal-card .quiz-creator-cta {
    flex-basis: 100%;
    justify-content: flex-end;
  }
}


/* Phones: workspace lesson card — wrap description/meta so nothing clips or
   runs under the play button. */
@media (max-width: 640px) {
  .exam-card.user-lesson-card .card-text {
    min-width: 0 !important;
    max-width: 100%;
  }

  .exam-card.user-lesson-card .lesson-card-description {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0 0 4px;
    direction: rtl;
    text-align: start;
    white-space: nowrap;
    overflow-wrap: anywhere;
    -webkit-line-clamp: 1;
    line-clamp: 1;
  }

  .exam-card.user-lesson-card .exam-card-meta,
  .exam-card.lesson-card .exam-card-meta {
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 2px 10px !important;
    width: 100% !important;
    margin: 0 !important;
    white-space: normal !important;
    direction: rtl !important;
  }

  .exam-card.user-lesson-card .exam-question-count,
  .exam-card.user-lesson-card .exam-types-subtext,
  .exam-card.lesson-card .exam-question-count,
  .exam-card.lesson-card .exam-types-subtext {
    order: 0 !important;
    flex: 0 1 auto !important;
    margin: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-align: start !important;
    direction: rtl !important;
  }
}

/* Quiz/lesson/notebook titles stay on one truncated line so mixed cards
   share a stable height. Full title is on the element's title tooltip. */
.exam-card .card-text > h3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
  overflow-wrap: anywhere;
  text-overflow: ellipsis;
  unicode-bidi: plaintext;
  text-align: start;
}

/* ---- "دفتر جديد" modal (create-notebook-modal.js) --------------------------
   The card clips (rounded corners) and an inner wrapper scrolls, so the
   scrollbar sits inside the rounded border instead of overflowing it. */
.create-notebook-modal.create-quiz-inline-modal {
  padding: 0;
  overflow: hidden;
}
.create-notebook-modal__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 28px;
  scrollbar-width: thin;
  scrollbar-gutter: stable both-edges;
}
@media (max-width: 640px) { .create-notebook-modal__scroll { padding: 20px; } }
@media (max-width: 480px) { .create-notebook-modal__scroll { padding: 14px 16px; } }
.create-notebook-modal .create-quiz-modal__subtitle code { direction: ltr; unicode-bidi: isolate; }
.create-notebook-modal__file {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 10px; padding: 8px 12px; border-radius: 10px; font-size: .85rem;
  border: 1px dashed var(--color-border); background: var(--color-background-secondary);
  color: var(--color-text-primary); overflow-wrap: anywhere; text-align: start;
}
.create-notebook-modal__file[hidden], .create-notebook-modal__feedback[hidden] { display: none; }
.create-notebook-modal__file button {
  flex: none; border: 0; background: transparent; color: inherit; cursor: pointer;
  font: inherit; font-weight: 600; text-decoration: underline;
}
.create-notebook-modal__feedback {
  margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; text-align: start;
  font-size: .9rem; line-height: 1.6; min-width: 0; overflow-wrap: anywhere;
  border: 1.5px solid var(--color-border); background: var(--color-background-secondary);
  color: var(--color-text-primary);
}
.create-notebook-modal__feedback--error {
  border-color: #dc2626; background: color-mix(in srgb, #dc2626 9%, var(--color-surface));
}
.create-notebook-modal__feedback--info {
  border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
}
.create-notebook-modal__feedback strong { display: block; margin-bottom: 4px; }
.create-notebook-modal__feedback ul { margin: 0; padding-inline-start: 20px; }
.create-notebook-modal__feedback pre {
  margin: 8px 0 0; padding: 8px 10px; border-radius: 8px; overflow-x: auto; text-align: left;
  font: 12px/1.5 ui-monospace, Menlo, Consolas, monospace;
  background: var(--color-background); border: 1px solid var(--color-border); white-space: pre;
}

@media (min-width: 641px) {
  .exam-card,
  .exam-card.user-quiz-card {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    min-height: 210px;
    text-align: start;
    margin-top: 0;
  }

  .exam-card.lesson-card,
  .exam-card.user-lesson-card,
  .exam-card.notebook-card,
  .exam-card.user-notebook-card {
    min-height: 210px;
  }

  .exam-card .card-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    min-width: 0;
    text-align: start;
  }

  .exam-card .card-text > h3 {
    margin: 0;
  }

  .exam-card.lesson-card,
  .exam-card.user-lesson-card {
    border-color: color-mix(in srgb, var(--color-success) 38%, var(--color-border));
  }

  .exam-card.notebook-card,
  .exam-card.user-notebook-card {
    border-color: color-mix(in srgb, var(--color-primary) 38%, var(--color-border));
  }

  .exam-card .exam-card-meta {
    position: static;
    inset: auto;
    width: 100%;
    margin: auto 0 0;
    white-space: nowrap;
  }

  .exam-card .exam-card-actions-wrap {
    position: static;
    inset: auto;
    width: 100%;
    margin-top: 12px;
  }

  .exam-card:not(.user-quiz-card) .exam-card-actions-wrap {
    width: 100%;
  }
}

.exam-card .lesson-card-description {
  margin: 0;
  min-width: 0;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  unicode-bidi: plaintext;
  text-align: start;
}

.category-card[data-user-quizzes-card="true"] .card-text p {
  margin-bottom: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 640px) {
  .exam-card .lesson-card-description {
    display: none;
  }
}

/* ── New item from an MCP link: pulsing glow + «جديد» badge (mcp-draft-import.js) ──
   The glow is a box-shadow (the card has overflow:hidden, which would clip an
   outside badge/outline), so the badge lives INSIDE the card's top corner. */
.exam-card.user-quiz-card.mcp-new-item {
  --mcp-glow: var(--color-primary, #6366f1);
  border-color: var(--mcp-glow);
  background-image: linear-gradient(color-mix(in srgb, var(--mcp-glow) 14%, transparent), color-mix(in srgb, var(--mcp-glow) 5%, transparent));
  box-shadow:
    0 0 0 3px var(--mcp-glow),
    0 0 22px 4px color-mix(in srgb, var(--mcp-glow) 70%, transparent),
    0 0 60px 14px color-mix(in srgb, var(--mcp-glow) 35%, transparent);
  animation: mcp-new-pulse 1.4s ease-in-out infinite;
  z-index: 2;
}
.mcp-new-badge {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--color-primary, #6366f1);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0.02em;
  pointer-events: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.mcp-new-badge::before {
  content: "✦";
  font-size: 11px;
}
@keyframes mcp-new-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 3px var(--mcp-glow),
      0 0 18px 3px color-mix(in srgb, var(--mcp-glow) 55%, transparent),
      0 0 44px 8px color-mix(in srgb, var(--mcp-glow) 25%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 4px var(--mcp-glow),
      0 0 30px 8px color-mix(in srgb, var(--mcp-glow) 85%, transparent),
      0 0 80px 22px color-mix(in srgb, var(--mcp-glow) 45%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .exam-card.user-quiz-card.mcp-new-item { animation: none; }
}