/* public/src/features/create-quiz/create-quiz.css */
/* CSS variables at themes.css */

/* ============================================================================
   LUCIDE ICON NORMALIZATION
   ============================================================================ */

.page-data-lucide {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  stroke-width: 2;
  flex-shrink: 0;
  display: inline-block;
}

.empty-icon-svg {
  width: 4rem;
  height: 4rem;
  stroke-width: 1.5;
  color: var(--color-primary);
}

.spin {
  animation: spin 1s linear infinite;
}

/* ============================================================================
         LAYOUT & CONTAINER
         ============================================================================ */
* {
  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", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  padding-top: 40px;
  padding-bottom: 40px;
  padding-left: 16px;
  padding-right: calc(var(--sidebar-collapsed-width) + 16px);
  transition: padding-right 250ms cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow-x: hidden;
}

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

/* body.quiz-form-active is toggled by showQuizForm()/showEntryScreen() —
   only present while the fixed app-title-bar + menu-bar are actually
   visible (the entry screen hides both and doesn't need this). It zeroes
   out body's normal top padding so the bars have a true, unpadded run from
   the very top of the viewport; .container gets an explicit margin-top
   instead, further down, to give the rest of the page's content the same
   clearance body's padding used to provide. */
body.quiz-form-active {
  padding-top: 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  /* Push the footer to the bottom of the viewport regardless of how much
     content the active screen (#entryScreen or #quizCreatorForm) has —
     including the brief moment before entry-screen tiles have rendered. */
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 80px);
  /* 80px = body's 40px top + 40px bottom padding */
}

/* Autosave Indicator */
.autosave-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 75px;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--color-success-light);
  color: var(--color-success);
  font-size: 0.75rem;
  font-weight: 600;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.autosave-indicator .save-icon svg {
  width: 13px;
  height: 13px;
}

.autosave-indicator.saving {
  background: var(--color-warning-light);
  color: var(--color-warning);
}

.autosave-indicator.error {
  background: var(--color-error-light);
  color: var(--color-error);
}

.save-icon {
  display: inline-flex;
  align-items: center;
  animation: pulse 2s infinite;
}

.autosave-indicator.saving .save-icon {
  animation: spin 1s linear infinite;
}

/* ============================================================================
   UNIFIED TOP BAR (merged app-title-bar + menu-bar)
   Single 44px fixed bar spanning full width (left:0 → right:sidebar-width).
   Contains: home button + title (RTL start) | embedded menu nav (center) |
   autosave indicator (far left).
   ============================================================================ */

.app-title-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: var(--sidebar-collapsed-width);
  height: 44px;
  padding-left: 12px;
  padding-right: 12px;
  transition: right 250ms cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  z-index: 50;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 8px;
}

body.sidebar-expanded .app-title-bar {
  right: var(--sidebar-expanded-width);
}

/* Far side (RTL start): home + title + autosave indicator, grouped so the
   autosave indicator sits right next to the title as its own cluster,
   separate from the menu bar which lives in the remaining flex space. */
.app-title-start {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  min-width: 0;
}

.app-title-home {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
  padding: 0;
}

.app-title-home svg {
  width: 18px;
  height: 18px;
  display: block;
}

.app-title-home:hover,
.app-title-home:focus-visible {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.app-title-home:disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.undo-redo-group {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.app-title-text {
  unicode-bidi: plaintext; /* truncate by the text's own direction */
  text-align: start;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 260px;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  line-height: 1.4;
  flex-shrink: 0;
}

.app-title-text:hover {
  border-color: var(--color-border);
  background: var(--color-background);
}

.app-title-text:focus-visible:not(.editing) {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.app-title-text.editing {
  cursor: text;
  /* While renaming, the box grows with the text up to a cap and then
     scrolls INSIDE itself. It used to be `overflow: visible`, so a long title
     spilled out of its 260px box and was painted on top of the autosave
     indicator and the undo/redo buttons next to it. */
  max-width: min(46vw, 440px);
  overflow-x: auto;
  overflow-y: hidden;
  text-overflow: clip;
  white-space: nowrap;
  scrollbar-width: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
  background: var(--color-surface);
  outline: none;
}

.app-title-text.editing::-webkit-scrollbar {
  display: none;
}

/* The embedded menu nav inside the unified bar — fills remaining space.
   min-width: 0 is what actually stops this flex item from forcing the bar
   wider than its slot; it must NOT have overflow: hidden, since that would
   clip every position:absolute dropdown inside it (the top-level menu
   dropdowns and the nested templates submenu) the moment they extend past
   this element's own box — which is exactly what dropdowns do. */
.app-bar-menu {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Legacy: .menu-bar is now a <nav> inside .app-title-bar
   but keep selector for JS that queries it */
.menu-bar {
  /* overridden — no longer a fixed top-level bar */
  all: unset;
  display: contents;
}

/* Content spacer: unified bar is 44px + global md bar is 40px = 84px total
   plus 10px breathing room = 94px. Scoped to body.quiz-form-active. */
body.quiz-form-active .container {
  margin-top: 94px;
}

.menu-bar-inner {
  display: flex;
  align-items: center;
  /* File should read as the left-most item in the bar. The markup stays in
     its natural (File, Insert, View, Help) DOM/reading order — only the
     visual placement is mirrored, via row-reverse, so screen readers and
     keyboard tab order still follow the logical File→Help sequence. */
  flex-direction: row-reverse;
  gap: 2px;
}

/* Own class (.menu-bar-item, not .menu-item) so this can never collide
   with the sidebar nav, which reuses the .menu-item class name for its own
   completely different links/buttons (see side-menu markup) — that name
   clash, not anything about #menuBar's own rules, was the real source of
   the "two buttons stacked inside each other" look, since the sidebar's
   external stylesheet could paint its own chrome onto this element too.
   Now: a plain positioning wrapper around one .menu-trigger button, with
   no visible box of its own — the trigger is the only interactive box,
   Google-Docs style. */
.menu-bar-item {
  position: relative;
}

/* Google-Docs-style top menu trigger: small, tight padding, no visible
   chrome until hovered/open — and the *only* element in this cluster that
   ever shows a background, so there's exactly one hoverable box per item. */
#menuBar .menu-trigger {
  display: block;
  padding: 6px 10px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
  line-height: 1.4;
}

#menuBar .menu-trigger:hover {
  background: var(--color-background);
}

/* Browser default focus ring (thick blue halo in Chrome) was stacking on
   top of the .menu-item-open highlight below, making the open trigger look
   like it had two different hover states and a much bigger hit box than
   its siblings. Keep a visible ring for keyboard users, but only via
   :focus-visible, and keep it tight to the button's own box. */
#menuBar .menu-trigger:focus {
  outline: none;
}

#menuBar .menu-trigger:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.menu-bar-item.menu-item-open .menu-trigger {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

/* .menu-dropdown uses position:fixed (set via inline top/left in JS, see
   positionMenuDropdown in create-quiz.js) instead of position:absolute.
   The old absolute positioning was relative to .menu-item, which lives
   inside .app-title-bar — a horizontally-scrolling container on phones.
   An absolutely-positioned dropdown that overflows a scrolling ancestor's
   box gets clipped/carried by that scroll instead of escaping it, which is
   why dropdowns used to render off-screen once the bar was scrolled.
   position:fixed + JS placement (same technique #globalMdBar already uses)
   anchors the dropdown to the viewport instead, so it's always fully
   visible regardless of the bar's scroll position. */
.menu-dropdown {
  display: none;
  position: fixed;
  min-width: 240px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 60;
}

.menu-item-open>.menu-dropdown {
  display: block;
}

/* ── Submenu (nested dropdown inside a .menu-dropdown) ───────────────────── */

/* The submenu trigger row: kept position:relative (harmless now that the
   dropdown itself is fixed) so any non-JS fallback still has a frame. */
.menu-item-submenu {
  position: relative;
}

/* The submenu trigger is a .menu-option like any other row — force it back
   to the same box as its siblings. It previously rendered oversized because
   it's the only .menu-option with three children (icon + label + caret),
   which stretched it to align-items: stretch's cross-size by default; fix
   the row height/padding explicitly so it matches every other option. */
.menu-item-submenu>.menu-option {
  min-height: 0;
  height: auto;
  padding: 5px 10px;
  box-sizing: border-box;
}

/* Submenu open state is now driven by JS (toggleSubmenu), matching the
   top-level menu's click-driven .menu-item-open pattern — hover-only
   toggling doesn't work once the submenu is position:fixed and placed by
   JS on open, since there's no continuous CSS box connecting trigger and
   submenu to hover across. */
.menu-item-submenu.menu-item-open>.menu-submenu-dropdown {
  display: block;
}

.menu-submenu-dropdown {
  min-width: 200px;
}

.menu-submenu-caret {
  width: 14px !important;
  height: 14px !important;
  margin-right: auto;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

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

.menu-item-submenu.menu-item-open>.menu-option {
  background: var(--color-background);
}

.menu-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 10px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: 0.8125rem;
  text-align: right;
  cursor: pointer;
  transition: background-color 0.15s ease;
  line-height: 1.4;
}

.menu-option svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-text-secondary);
}

.menu-option:hover,
.menu-option:focus-visible {
  background: var(--color-background);
}

.menu-option-shortcut {
  margin-right: auto;
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  direction: ltr;
}

.menu-option-danger {
  color: var(--color-error);
}

.menu-option-danger svg {
  color: var(--color-error);
}

.menu-option-danger:hover,
.menu-option-danger:focus-visible {
  background: var(--color-error-light);
}

.menu-separator {
  height: 1px;
  background: var(--color-border);
  margin: 4px 4px;
}

/* ============================================================================
   GLOBAL MARKDOWN + LATEX TOOLBAR (#globalMdBar)
   Fixed below the unified top bar (top: 44px, matching .app-title-bar's
   actual height — was hardcoded to a stale 48px, leaving a 4px gap between
   the two bars). Visible only while body.quiz-form-active. Applies
   formatting to the last focused .md-source.
   ============================================================================ */

.global-md-bar {
  position: fixed;
  top: 44px;
  left: 0;
  right: var(--sidebar-collapsed-width);
  height: 40px;
  z-index: 49;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  transition: right 250ms cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}

/* When background animations are enabled, --color-surface becomes
   semi-transparent (see themes.css) so the animated shader shows through
   panels/cards — appropriate for large surfaces, but this toolbar's text
   (.gmd-btn-latex in particular) was contrast-checked against an OPAQUE
   surface color; layering it over a moving, unpredictable background
   could silently drop it below AA depending on what's rendered behind it
   at any given moment. backdrop-filter's blur keeps the same "shows
   through" feel without ever letting the raw background color show
   through at full strength under the text itself. */
html[data-animations="enabled"] .global-md-bar {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Same reasoning as .global-md-bar above, but for the dropdown POPOVERS
   themselves (.gmd-dropdown-menu, .menu-dropdown incl. its submenu
   variant) — these render position:fixed, detached from the toolbar/menu
   bar's own DOM box, so they don't inherit that bar's blur just because
   the bar has one. Each is its own semi-transparent --color-surface panel
   in Lightfall mode and needs the same treatment, or .gmd-btn-latex's
   label (and every .menu-option label) is only contrast-safe against an
   opaque surface that Lightfall mode never actually gives it. */
html[data-animations="enabled"] .gmd-dropdown-menu,
html[data-animations="enabled"] .menu-dropdown {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.global-md-bar::-webkit-scrollbar {
  display: none;
}

body.sidebar-expanded .global-md-bar {
  right: var(--sidebar-expanded-width);
}

.gmd-group {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.gmd-separator {
  width: 1px;
  height: 20px;
  background: var(--color-border);
  margin: 0 6px;
  flex-shrink: 0;
}

.gmd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 8px;
  min-width: 30px;
  height: 28px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--color-text-secondary);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.gmd-btn:hover,
.gmd-btn:focus-visible,
.gmd-btn[aria-expanded="true"],
.gmd-btn.gmd-btn-active {
  background: var(--color-primary-light);
  color: var(--color-primary);
  outline: none;
}

.gmd-btn:active {
  transform: scale(0.93);
}

/* LaTeX buttons — real icons (see .gmd-icon-math below for the
   superscript/subscript/fraction/inline-math glyphs, which render their
   mathematical notation as SVG <text> rather than plain button text: this
   keeps their exact visual shape — "x" raised/lowered relative to a small
   exponent, a fraction bar between two glyphs — independent of the
   surrounding page's font/line-height, which plain text content inside a
   26px button could not guarantee). Slightly different accent color than
   the plain-markdown .gmd-btn group so the two toolbar sections stay
   visually distinguishable at a glance. */
.gmd-btn-latex {
  color: var(--color-text-secondary);
}

.gmd-btn-latex:hover,
.gmd-btn-latex:focus-visible,
.gmd-btn-latex[aria-expanded="true"],
.gmd-btn-latex.gmd-btn-active {
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
}

/* The four math buttons whose icon is built from SVG <text> (sup/sub/frac/
   inline-math) rather than <path> strokes — text needs fill, not stroke.
   The page is dir="rtl" (Arabic UI), and SVG <text> inherits CSS
   `direction`; with no explicit text-anchor, RTL direction reverses the
   glyph's flow from its x coordinate, pushing it off the left edge of the
   viewBox entirely (this is what made #gmdSup / #gmdSub render as empty
   buttons). Forcing ltr here keeps every math glyph anchored the way its
   x/y coordinates were authored, independent of page direction. */
.gmd-icon-math text {
  fill: currentColor;
  direction: ltr;
  unicode-bidi: bidi-override;
}

/* Tooltip for "no field focused" state — shown via JS as a brief flash */
.gmd-no-field-tip {
  position: fixed;
  top: calc(44px + 40px + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-text-primary);
  color: var(--color-surface);
  font-size: 0.82rem;
  padding: 5px 14px;
  border-radius: 6px;
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
  white-space: nowrap;
}

.gmd-no-field-tip.visible {
  opacity: 1;
}

/* ── Dropdown toggles (heading levels, "more" LaTeX symbols) ────────────── */
/* .gmd-dropdown-menu uses position:fixed (set via inline top/left in JS,
   anchored to its toggle button) rather than position:absolute. The
   toolbar itself scrolls horizontally (overflow-x: auto) and clips
   vertical overflow (overflow-y: hidden) so its buttons don't visually
   spill past the fixed bar's height — an absolutely-positioned dropdown
   anchored inside it would be clipped by that same overflow:hidden and
   never actually appear. Fixed positioning escapes the clipping ancestor
   entirely. */
.gmd-dropdown {
  position: relative;
}

.gmd-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.gmd-dropdown-toggle .gmd-caret {
  width: 9px;
  height: 9px;
  opacity: 0.7;
}

/* Icon glyphs inside .gmd-btn (bold/italic/heading/etc.) — sized to sit
   comfortably inside the 26px-tall button without the button growing. */
.gmd-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.gmd-dropdown-menu {
  position: fixed;
  z-index: 200;
  display: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  padding: 4px;
  box-sizing: border-box;
  max-width: calc(100vw - 16px);
}

.gmd-dropdown-menu.open {
  display: flex;
}

/* Heading menu: single column list, one level per row */
.gmd-dropdown-menu--headings {
  flex-direction: column;
  min-width: 130px;
}

.gmd-dropdown-menu--headings .gmd-btn {
  width: 100%;
  justify-content: flex-start;
  padding: 6px 10px;
  height: auto;
}

/* LaTeX "more" menu: one symbol per row, label next to it, so each command
   is identifiable without hovering for the tooltip. */
.gmd-dropdown-menu--latex {
  flex-direction: column;
  gap: 2px;
  min-width: 210px;
  max-width: 260px;
  max-height: 60vh;
  overflow-y: auto;
}

.gmd-dropdown-menu--latex .gmd-btn-latex {
  width: 100%;
  justify-content: flex-start;
  gap: 12px;
  height: auto;
  padding: 4px 12px;
  border-radius: 6px;
}

.gmd-dropdown-menu--latex .gmd-btn-latex-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  flex-shrink: 0;
}

.gmd-dropdown-menu--latex .gmd-btn-latex-symbol .gmd-icon {
  width: 16px;
  height: 16px;
}

/* Mathematical notation (Σ, ∫, π, ±, ≤, ≥, ≠, ∞) has no meaningful icon
   beyond the symbol itself, so these render as styled glyphs rather than
   plain inline text — sized and weighted to match the SVG icons next to
   them in the same menu. */
.gmd-dropdown-menu--latex .gmd-btn-latex-symbol--char {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1;
}

.gmd-dropdown-menu--latex .gmd-btn-latex-label {
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--color-text-primary);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .app-title-bar {
    padding-left: 8px;
    padding-right: 8px;
    /* The whole bar scrolls horizontally on phones — same behavior as
       #globalMdBar — instead of trapping the menu inside its own
       vertically-scrolled dropdown. */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
  }

  .app-title-bar::-webkit-scrollbar {
    display: none;
  }

  .app-title-start {
    flex-shrink: 0;
  }

  .app-title-text {
    max-width: 120px;
  }

  .app-title-text.editing {
    max-width: min(62vw, 260px);
  }

  .app-bar-menu {
    flex: 0 0 auto;
  }

  .menu-bar-inner {
    /* No longer scrolls internally — the parent .app-title-bar scrolls. */
    overflow: visible;
  }
}

/* ============================================================================
         QUIZ CREATOR SECTIONS
         ============================================================================ */

/* ============================================================================
   ENTRY SCREEN (Google-Docs-style "start a new document" grid)
   ============================================================================ */

.entry-screen {
  padding: 8px 0 0 0;
}

/* Plain stacking container for the entry screen's sections (new / drafts /
   saved). Deliberately NOT a grid — each .entry-section stacks top-to-bottom;
   the grid layout only applies inside each section's own .entry-items-grid. */
.entry-sections {
  display: block;
  margin-bottom: 20px;
}

.entry-section {
  margin-bottom: 20px;
}

.entry-section:last-child {
  margin-bottom: 0;
}

.entry-screen-heading {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 14px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}

.entry-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 20px;
}

/* Draft tile — subtle warm tint to distinguish from saved quizzes */
.entry-item.entry-item-draft .entry-item-thumb {
  background: color-mix(in srgb, var(--color-warning-light) 30%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-warning) 30%, var(--color-border));
}

.entry-item.entry-item-draft:hover .entry-item-thumb,
.entry-item.entry-item-draft:focus-visible .entry-item-thumb {
  border-color: var(--color-warning);
}

/* Grid cell wrapper — holds the clickable tile plus the sibling "more" (⋮)
   button. .entry-item is itself a <button>, so the ⋮ trigger can't nest
   inside it (buttons can't nest); it lives here instead, positioned over
   the tile's corner. */
.entry-item-wrap {
  position: relative;
}

.entry-item,
.entry-item-new {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: 8px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: right;
}

.entry-item-thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text-tertiary);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.entry-item-thumb svg {
  width: 30%;
  height: 30%;
}

.entry-item-thumb-new {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-style: dashed;
  border-width: 2px;
}

/* ── Skeleton loader (drafts/saved sections only — the "new quiz" tile is
   static HTML and never needs one; see #entryScreen markup) ──────────────
   Shimmering placeholder blocks shaped like the real heading + tile grid
   they'll be replaced by, so the page has real content-shaped structure
   on first paint instead of a blank gap while localStorage is read. */
.entry-skeleton-heading {
  width: 140px;
  height: 14px;
  margin: 0 0 14px 0;
  border-radius: 4px;
  background: var(--color-border);
  overflow: hidden;
  position: relative;
}

.entry-skeleton-tile {
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  background: var(--color-border);
  overflow: hidden;
  position: relative;
}

.entry-skeleton-heading::after,
.entry-skeleton-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      transparent,
      color-mix(in srgb, var(--color-surface) 60%, transparent),
      transparent);
  animation: skeletonShimmer 1.5s ease-in-out infinite;
}

/* Shimmer sweeps right-to-left, matching this page's RTL reading direction. */
@keyframes skeletonShimmer {
  0% {
    transform: translateX(100%);
  }

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

/* .entry-skeleton-heading / .entry-skeleton-tile shimmer stays animated
   under reduced motion — the loading skeleton keeps sweeping even in
   "الأداء الفائق" (High Performance) mode. */

.entry-item:hover .entry-item-thumb,
.entry-item:focus-visible .entry-item-thumb,
.entry-item-new:hover .entry-item-thumb,
.entry-item-new:focus-visible .entry-item-thumb {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.entry-item:focus-visible .entry-item-thumb,
.entry-item-new:focus-visible .entry-item-thumb {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.entry-item-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--color-warning-light);
  color: var(--color-warning);
  font-size: 0.7rem;
  font-weight: 600;
}

/* "More" (⋮) trigger — always visible in the tile's top-right corner (RTL:
   the far side from the draft badge, which sits top-left), per design
   decision to keep it discoverable rather than hover-only. */
.entry-item-more-wrap {
  position: absolute;
  top: 8px;
  right: 8px;
}

.entry-item-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

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

.entry-item-more-btn:hover,
.entry-item-more-btn:focus-visible {
  background: var(--color-background);
  color: var(--color-primary);
}

.entry-item-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 160px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 40;
}

.entry-item-menu.open {
  display: block;
}

.entry-item-menu-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: 0.875rem;
  text-align: right;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.entry-item-menu-option svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--color-text-secondary);
}

.entry-item-menu-option:hover,
.entry-item-menu-option:focus-visible {
  background: var(--color-background);
}

.entry-item-menu-option-danger {
  color: var(--color-error);
}

.entry-item-menu-option-danger svg {
  color: var(--color-error);
}

.entry-item-menu-option-danger:hover,
.entry-item-menu-option-danger:focus-visible {
  background: var(--color-error-light);
}

.entry-item-title {
  unicode-bidi: plaintext; /* truncate by the text's own direction */
  text-align: start;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.entry-item-new .entry-item-title {
  color: var(--color-text-secondary);
}

.entry-item-meta {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
}

@media (max-width: 480px) {
  .entry-items-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 14px;
  }
}

.quiz-creator {
  display: flex;
  flex-direction: column;
  gap: 18px;
  background-color: var(--quiz-creator-bg);
  margin-bottom: 30px;
}

.card {
  padding: 20px;
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  transition: all 0.3s ease;
}

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

.quiz-metadata h2,
.section-header h2 {
  margin: 0 0 12px 0;
  font-size: 1.5rem;
}

#quizSource {
  direction: ltr
}

#quizDescription,
#quizPassword {
  direction: rtl
}

/* AI-chat-style growing textarea (see autoResizeMdSource in create-quiz.js):
   starts at one line, grows with content up to a max height, then scrolls.
   Manual resize is disabled since the height is already handled
   automatically — a drag handle would just fight the JS-driven height.
   Selector is `.form-group textarea.autosize-textarea` (not just
   `.autosize-textarea`) so it wins over the later, equally-specific
   `.form-group textarea { resize: vertical }` rule in the cascade. */
.form-group textarea.autosize-textarea,
.autosize-textarea {
  resize: none;
  overflow-y: hidden;
  transition: height 0.08s ease-out;
}

.section-subhint {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--color-text-secondary);
}

.quiz-metadata,
.questions-section,
.action-bar {
  background-color: var(--quiz-card-bg);
  border-color: var(--quiz-card-border);
}

/* Character Counter */
.char-count {
  float: left;
  font-size: 0.875rem;
  color: var(--color-text-tertiary);
  font-weight: 400;
}

.char-count.warning {
  color: var(--color-warning);
}

.char-count.error {
  color: var(--color-error);
}

/* ============================================================================
         FORM ELEMENTS
         ============================================================================ */

.form-group {
  margin-bottom: 12px;
}

.form-group label {
  display: block;
  margin-bottom: 4px;
  color: var(--color-text-primary);
  font-weight: 600;
  font-size: 0.95rem;
}

.form-group input[type="text"],
.form-group input[type="url"],
.form-group input[type="search"],
.form-group input[type="password"],
.form-group textarea {
  width: 100%;
  padding: 9px 14px;
  border: 2px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-background);
  color: var(--color-text-primary);
  font-size: 1rem;
  font-family: "Inter", sans-serif;
  transition:
    border-color 0.2s,
    box-shadow 0.2s,
    transform 0.2s;
}

/* Password field: input + a cluster of two action buttons (copy, show/hide)
   sitting inside the input's own box instead of next to it. dir="auto" on
   the input can render the value LTR or RTL depending on content, so the
   button cluster is placed with `inset-inline-end` (not `left`/`right`) to
   always land on the field's trailing edge regardless of text direction —
   which in this RTL page's own reading order is the left. */
.password-field {
  position: relative;
}

.password-field input[type="password"],
.password-field input[type="text"] {
  /* Room for two 30px buttons + gap + a little breathing space. */
  padding-inline-end: 72px;
}

.password-field-actions {
  position: absolute;
  inset-inline-end: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
}

.password-action-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.password-action-btn:hover,
.password-action-btn:focus-visible {
  background: var(--color-background);
  color: var(--color-primary);
  outline: none;
}

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

/* Copy confirmation: swap to a green check briefly (JS toggles display on
   the two svg children) — colored via a class on the button itself so it
   doesn't depend on hover/focus state. */
.password-action-btn.copied {
  color: var(--color-success);
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
  transform: translateY(-1px);
}

.form-group textarea {
  resize: vertical;
  min-height: 60px;
}

/* .wp-textarea fields (question text, explanation, option text — see
   mdEditorHtml()) are sized entirely by autoResizeMdSource() in JS, which
   sets an explicit inline height starting around one line tall and grows
   with content. The min-height: 60px above still applied to them too
   (same cascade weight as the more specific .wp-textarea rule below, which
   never set its own min-height to override it), forcing every field open
   at ~2 lines tall no matter how little text it held — this is what made
   "نصّ السؤال" and "الشرح (اختياري)" start too big. Undo it here so JS is
   the only thing controlling their height. */
.form-group textarea.wp-textarea {
  min-height: 0;
}

.form-group input,
.form-group textarea {
  background-color: var(--quiz-input-bg);
  border-color: var(--quiz-card-border);
  color: var(--color-text-primary);
}

.form-group small {
  display: block;
  margin-top: 6px;
  color: var(--color-text-tertiary);
  font-size: 0.85rem;
  line-height: 1.4;
}

/* ============================================================================
   CREATE-PAGE QUESTION NAVIGATOR
   ============================================================================ */

.create-question-navigator {
  width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  overflow: hidden;
  direction: rtl;
}

html[data-animations="enabled"] .create-question-navigator {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.create-question-navigator-toggle {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
}

.create-question-navigator-toggle:hover,
.create-question-navigator-toggle:focus-visible {
  background: var(--color-background);
  outline: none;
}

/* When the grid is visible, only round the exposed top corners. When it is
   collapsed, the button keeps the navigator's full rounded outline. */
.create-question-navigator.is-open .create-question-navigator-toggle {
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}

.create-question-navigator-toggle>svg:first-child {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.create-question-navigator-count {
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 0.72rem;
  text-align: center;
}

.create-question-navigator-chevron {
  width: 15px;
  height: 15px;
  margin-right: auto;
  transition: transform 0.2s ease;
}

.create-question-navigator:not(.is-open) .create-question-navigator-chevron {
  transform: rotate(90deg);
}

.create-question-navigator-panel {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  max-height: min(38vh, 330px);
  overflow-y: auto;
  padding: 8px;
  border-top: 1px solid var(--color-border);
}

.create-question-navigator-panel:empty {
  display: none;
}

/* This component normally renders as a grid, which would otherwise override
   the browser's low-priority [hidden] stylesheet when the toggle closes it. */
.create-question-navigator-panel[hidden] {
  display: none;
}

.create-question-nav-item {
  aspect-ratio: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  background: var(--color-background-secondary);
  color: var(--color-text-primary);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.create-question-nav-item:hover {
  transform: scale(1.04);
  border-color: var(--color-primary);
}

.create-question-nav-item.current {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.create-question-nav-item.incomplete:not(.current) {
  border-color: var(--color-warning);
  color: var(--color-warning);
}

body:not(.quiz-form-active) .create-question-navigator {
  display: none;
}

/* ============================================================================
         QUESTIONS SECTION - ENHANCED
         ============================================================================ */

.questions-section {
  padding: 20px;
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  position: relative;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 15px;
}

.section-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.question-badge {
  background: var(--gradient-accent);
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 700;
  min-width: 32px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

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

/* Templates Panel */
.templates-panel {
  margin-bottom: 16px;
  padding: 14px;
  background: var(--color-background);
  border-radius: 10px;
  border: 2px dashed var(--color-border);
  animation: slideDown 0.3s ease;
}

.templates-panel h3 {
  margin: 0 0 10px 0;
  font-size: 1.1rem;
  color: var(--color-text-primary);
}

.templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.template-card {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: 10px;
  padding: 15px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.template-card:hover {
  
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg);
  background: var(--color-primary-light);
}

.template-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--color-primary);
}

.template-icon [data-lucide] {
  width: 2rem;
  height: 2rem;
}

.template-name {
  font-weight: 600;
  color: var(--color-text-primary);
  font-size: 0.95rem;
}

.template-desc {
  font-size: 0.8rem;
  color: var(--color-text-tertiary);
}

/* Question Controls - Enhanced */
.question-controls {
  margin-bottom: 25px;
  animation: slideDown 0.3s ease;
}

.controls-row {
  display: flex;
  gap: 12px;
  margin-bottom: 15px;
  flex-wrap: wrap;
  align-items: center;
}

.search-box {
  flex: 1;
  min-width: 250px;
  position: relative;
}

.search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  pointer-events: none;
  z-index: 1;
  color: var(--color-text-tertiary);
}

.search-box input {
  width: 100%;
  padding: 10px 40px 10px 16px;
  padding-right: 40px;
  padding-left: 16px;
  border: 2px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-background);
  color: var(--color-text-primary);
  font-size: 0.95rem;
  transition: all 0.2s ease;
}

/* #questionSearch is type="search", which WebKit/Blink browsers decorate
   with their own built-in "clear" (x) button once the field has text —
   rendering it alongside the custom #clearSearch button below and
   producing two visible x's. Suppress the native one; #clearSearch is the
   only clear affordance the UI shows. */
.search-box input[type="search"]::-webkit-search-cancel-button,
.search-box input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.search-box input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.clear-search {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--color-border);
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  cursor: pointer;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  font-size: 0.9rem;
}

.clear-search:hover {
  background: var(--color-error);
  color: white;
  transform: translateY(-50%) scale(1.1);
}

.btn-action {
  padding: 10px 12px;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.1rem;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
}

.btn-action:hover {
  border-color: var(--color-primary);
  
  box-shadow: var(--shadow-md);
  background: var(--color-primary-light);
}

/* Bulk Actions Bar */
.bulk-actions-bar {
  background: var(--color-primary-light);
  border: 2px solid var(--color-primary);
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  animation: slideDown 0.3s ease;
}

.bulk-info {
  font-weight: 600;
  color: var(--color-primary);
  font-size: 0.95rem;
}

.bulk-info span {
  font-size: 1.2rem;
  font-weight: 700;
}

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

.btn-bulk {
  padding: 8px 16px;
  background: white;
  border: 2px solid var(--color-primary);
  border-radius: 6px;
  color: var(--color-primary);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 0.9rem;
}

.btn-bulk:hover {
  background: var(--color-primary);
  color: white;
  
  box-shadow: var(--shadow-md);
}

.btn-bulk-danger {
  border-color: var(--color-error);
  color: var(--color-error);
}

.btn-bulk-danger:hover {
  background: var(--color-error);
  color: white;
}

/* Questions Container */
#questionsContainer {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Enhanced Question Card */
.question-card {
  background: var(--color-background);
  border: 2px solid var(--color-border);
  border-radius: 12px;
  padding: 16px;
  position: relative;
  transition:
    box-shadow 0.3s,
    transform 0.2s,
    border-color 0.2s;
  direction: rtl;
}

.question-card:hover {
  box-shadow: var(--shadow-lg);
  
  border-color: var(--color-primary);
}

.question-card.selected {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.question-card.collapsed .form-group:not(:first-child) {
  display: none;
}

.question-card.incomplete {
  border-left: 4px solid var(--color-warning);
}

.question-card.incomplete::before {
  content: "غير مكتمل";
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--color-warning);
  color: white;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Question Header Enhanced */
.question-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  direction: rtl;
  flex-wrap: wrap;
  gap: 10px;
  /* .question-actions is absolutely positioned (top-left of the card) and
     out of this flow, but still needs the title/number column to leave it
     clearance so long question previews don't run underneath it. */
  padding-left: 44px;
}

.question-number {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.question-select-checkbox {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--color-primary);
}

.question-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  /* Pinned to the card's top-left corner via absolute positioning rather
     than participating in .question-header's flex layout — the header
     switches to flex-direction: column at several narrow breakpoints
     (480px, 400px, and the general mobile breakpoint below), and as a
     flex child .question-actions would then fall wherever DOM order
     placed it (below the question title), moving around depending on
     screen size. Absolute positioning keeps it in the same corner at
     every width. RTL layout: "left" is the trailing/far side. */
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
}

/* ── Reorder mode: drag handle + dragging/placeholder states ─────────────
   Only exists in the DOM while body.reorder-mode-active (see
   renderQuestion's reorderModeActive ternary) — a dedicated toggleable
   mode rather than an always-visible handle, since native HTML5 DnD was
   deliberately removed for breaking on touch (see the comment above
   moveQuestion). Dragging itself is Pointer-Events-based (setupReorderHandles),
   which fires consistently across mouse/touch/pen. ── */
.question-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 6px;
  background: var(--color-background);
  color: var(--color-text-tertiary);
  cursor: grab;
  flex-shrink: 0;
  touch-action: none;
  padding: 0;
  transition: background 0.12s ease, color 0.12s ease;
}

.question-drag-handle svg {
  width: 18px;
  height: 18px;
}

.question-drag-handle:hover,
.question-drag-handle:focus-visible {
  background: var(--color-primary-light);
  color: var(--color-primary);
  outline: none;
}

.question-drag-handle:active {
  cursor: grabbing;
}

.question-card.dragging {
  box-shadow: var(--shadow-lg);
  opacity: 0.95;
  cursor: grabbing;
}

.question-drag-placeholder {
  border: 2px dashed var(--color-primary);
  border-radius: 12px;
  background: var(--color-primary-light);
  box-sizing: border-box;
}

body.reorder-mode-active .question-card {
  scroll-margin-top: 90px;
}

#reorderModeBtn.active,
#bulkModeBtn.active {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

/* Title-bar "إجراءات" (Actions) menu mirrors of the same toggle buttons —
   .menu-option rows, so "active" needs its own look distinct from the
   .btn-secondary treatment above (a solid fill would clash with the
   dropdown's row styling). Highlight like the currently-open submenu row
   instead, plus a colored icon/label so the state reads at a glance. */
#actionsMenuSelectBtn.active,
#actionsMenuReorderBtn.active,
#actionsMenuSearchBtn.active {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

#actionsMenuSelectBtn.active svg,
#actionsMenuReorderBtn.active svg,
#actionsMenuSearchBtn.active svg {
  color: var(--color-primary);
}

/* ── Question card "more" (⋮) menu — replaces the old row of separate
   move/duplicate/delete/collapse icon buttons with a single dropdown.
   Visually modeled on .entry-item-menu (the same pattern used for the
   home-screen quiz tiles), so the two "more" menus in the app feel
   consistent. ── */
.question-more-wrap {
  position: relative;
}

.question-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.question-more-btn svg {
  width: 16px;
  height: 16px;
}

.question-more-btn:hover,
.question-more-btn:focus-visible {
  background: var(--color-background);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.question-more-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 190px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 40;
}

.question-more-menu.open {
  display: block;
}

.question-menu-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: 0.875rem;
  text-align: right;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.question-menu-option svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-text-secondary);
}

.question-menu-option:hover,
.question-menu-option:focus-visible {
  background: var(--color-background);
}

.question-menu-option-danger {
  color: var(--color-error);
}

.question-menu-option-danger svg {
  color: var(--color-error);
}

.question-menu-option-danger:hover,
.question-menu-option-danger:focus-visible {
  background: var(--color-error-light);
}

/* Enhanced Empty State */
.empty-state {
  text-align: center;
  padding: 36px 20px;
}

.empty-illustration {
  position: relative;
  display: inline-block;
  margin-bottom: 16px;
}

.empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  animation: float 3s ease-in-out infinite;
  opacity: 0.4;
}

[data-theme="dark-slate"] .empty-icon {
  opacity: 0.3;
}

[data-theme="dark"] .empty-icon {
  opacity: 0.25;
}

.empty-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  background: var(--color-primary);
  opacity: 0.1;
  border-radius: 50%;
  filter: blur(30px);
  animation: pulse 2s ease-in-out infinite;
}

.empty-state h3 {
  color: var(--color-text-primary);
  margin: 0 0 10px 0;
  font-size: 1.5rem;
}

.empty-state p {
  color: var(--color-text-secondary);
  margin: 0 0 20px 0;
  font-size: 1rem;
}

.empty-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.btn-large {
  padding: 14px 28px;
  font-size: 1.05rem;
}

.empty-state.hidden {
  display: none;
}

/* Add Question Bottom Button */
.add-question-bottom {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 2px dashed var(--color-border);
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-add-question {
  padding: 14px 28px;
  font-size: 1.05rem;
  box-shadow: var(--shadow-lg);
}

.btn-add-question:hover {
  
  box-shadow: var(--shadow-xl);
}

/* Floating Action Button (FAB) — markup removed; "add question" now lives in
   the menu bar's إدراج menu. Rules kept (unreferenced) rather than pruned,
   since other selectors in this file are known to overlap by type/class. */
.fab-container {
  position: fixed;
  bottom: 30px;
  left: 30px;
  z-index: 999;
  animation: fadeInUp 0.3s ease;
}

.fab {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--gradient-accent);
  color: white;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: var(--shadow-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.fab:hover {
  transform: scale(1.1) rotate(90deg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.fab:active {
  transform: scale(0.95) rotate(90deg);
}

.fab-tooltip {
  position: absolute;
  top: 50%;
  left: 70px;
  transform: translateY(-50%);
  background: var(--color-text-primary);
  color: var(--color-background);
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 0.875rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.fab-container:hover .fab-tooltip {
  opacity: 1;
}

.fab-tooltip::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right-color: var(--color-text-primary);
}

/* Question Validation Indicators */
.validation-indicator {
  position: absolute;
  top: 15px;
  right: 15px;
  display: flex;
  gap: 6px;
}

.indicator-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-border);
}

.indicator-dot.complete {
  background: var(--color-success);
  animation: ping 2s ease-in-out infinite;
}

.indicator-dot.incomplete {
  background: var(--color-warning);
}

/* Quick Actions Menu */
.quick-actions {
  position: absolute;
  top: 60px;
  left: 15px;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: 8px;
  padding: 8px;
  box-shadow: var(--shadow-lg);
  display: none;
  flex-direction: column;
  gap: 4px;
  z-index: 10;
  min-width: 150px;
}

.quick-actions.show {
  display: flex;
  animation: slideDown 0.2s ease;
}

.quick-action-item {
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: right;
  font-size: 0.9rem;
  color: var(--color-text-primary);
  transition: background 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.quick-action-item:hover {
  background: var(--color-background);
}

/* Animations */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

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

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

@keyframes ping {

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

  50% {
    opacity: 0.5;
    transform: scale(1.1);
  }
}

/* Responsive Adjustments for Questions Section */
@media (max-width: 768px) {
  body {
    padding-right: 16px;
    padding-bottom: calc(var(--bottom-nav-height, 54px) + env(safe-area-inset-bottom, 0px) + 16px);
  }

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

  .section-title-group {
    flex-direction: row;
  }

  .section-actions {
    width: 100%;
  }

  .section-actions .btn {
    flex: 1;
  }

  .templates-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .controls-row {
    flex-direction: column;
  }

  .search-box {
    width: 100%;
  }

  .bulk-actions-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .bulk-actions {
    justify-content: stretch;
  }

  .btn-bulk {
    flex: 1;
  }

  .btn-help {
    display: none;
  }

  .fab-container {
    display: none !important;
  }

  .fab {
    width: 56px;
    height: 56px;
    font-size: 1.3rem;
  }

  .fab-tooltip {
    display: none;
  }

  .add-question-bottom {
    flex-direction: column;
  }

  .add-question-bottom .btn {
    width: 100%;
  }

  .app-title-bar,
  .global-md-bar,
  .menu-bar {
    right: 0;
    padding-left: 16px;
    padding-right: 16px;
  }
}

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

  .templates-grid {
    grid-template-columns: 1fr;
  }

  .question-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Image Preview */
.image-preview-container {
  margin-top: 12px;
  position: relative;
}

.image-preview {
  max-width: 100%;
  max-height: 300px;
  border-radius: 8px;
  border: 2px solid var(--color-border);
  object-fit: cover;
}

.image-loading {
  padding: 12px;
  text-align: center;
  color: var(--color-text-secondary);
  background: var(--color-background);
  border-radius: 8px;
  border: 2px dashed var(--color-border);
}

.image-error {
  padding: 12px;
  text-align: center;
  color: var(--color-error);
  background: var(--color-error-light);
  border-radius: 8px;
  border: 2px dashed var(--color-error);
}

/* ============================================================================
         OPTIONS SECTION
         ============================================================================ */

.options-list {
  margin-top: 10px;
}

.option-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding: 8px 10px;
  background: var(--color-background);
  border: 2px solid var(--color-border);
  border-radius: 8px;
  transition:
    border-color 0.2s,
    background-color 0.2s,
    transform 0.2s;
}

.option-item:hover {
  border-color: var(--color-primary-hover);
}

.option-item.correct {
  border-color: var(--color-success);
  background: var(--color-success-light);
}

.option-checkbox {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: var(--color-success);
  border-radius: 4px;
}

.option-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-size: 0.95rem;
  transition: all 0.2s ease;
}

.option-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-light);
}

.option-delete {
  flex-shrink: 0;
  /* padding: 6px 5px; */
  background: transparent;
  border: none;
  color: var(--color-error);
  cursor: pointer;
  font-size: 1.2rem;
  transition: transform 0.2s;
}

.option-delete:hover {
  transform: scale(1.2);
}

.add-option-btn {
  margin-top: 8px;
  padding: 8px 16px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  border: 2px dashed var(--color-primary);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition:
    background-color 0.2s,
    transform 0.2s;
  width: 100%;
}

.add-option-btn:hover {
  background: var(--color-primary);
  color: white;
  
}

/* ============================================================================
         BUTTONS
         ============================================================================ */

.btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    transform 0.2s,
    box-shadow 0.2s,
    background 0.2s;
  font-family: "Inter", sans-serif;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

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

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

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn-icon-text {
  padding: 10px 16px;
}

.btn-primary {
  background: var(--gradient-accent);
  color: white;
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text-primary);
  border: 2px solid var(--color-border);
}

.btn-secondary:hover {
  border-color: var(--color-primary);
}

.btn-success {
  background: var(--gradient-success);
  color: white;
  box-shadow: var(--shadow-md);
}

.btn-danger {
  background: var(--gradient-warm);
  color: white;
  box-shadow: var(--shadow-md);
}

.btn-whatsapp {
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  color: white;
  box-shadow: var(--shadow-md);
}

/* ============================================================================
         ACTION BAR
         ============================================================================ */

.action-bar {
  background: var(--color-surface);
  border: 2px solid var(--color-border);
}

.action-section {
  margin-bottom: 20px;
}

.action-section:last-child {
  margin-bottom: 0;
}

.action-section h3 {
  margin: 0 0 15px 0;
  font-size: 1.1rem;
  color: var(--color-text-primary);
}

.action-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.action-divider {
  height: 2px;
  background: var(--color-border);
  margin: 20px 0;
  border-radius: 2px;
}

/* ============================================================================
   (Old icon-only "top action bar" removed — its commands now live in the
   real, full-width Docs-style .menu-bar defined near the top of this file.
   The .menu-quick-btn* rules there cover the two quick-action icons.)
   ============================================================================ */


/* ============================================================================
         STATISTICS CARD
         ============================================================================ */

.stats-card h3 {
  margin: 0 0 20px 0;
  font-size: 1.3rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
}

.stat-item {
  text-align: center;
  padding: 15px;
  background: var(--color-background);
  border-radius: 8px;
  border: 2px solid var(--color-border);
  transition: all 0.2s ease;
}

.stat-item:hover {
  
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.stat-label {
  display: block;
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
}

.stat-value {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================================================
         EMPTY STATE
         ============================================================================ */

.empty-state {
  text-align: center;
  padding: 60px 20px;
}

.empty-icon {
  font-size: 4rem;
  margin-bottom: 20px;
  opacity: 0.5;
  animation: float 3s ease-in-out infinite;
}

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

.empty-state p {
  color: var(--color-text-secondary);
  margin: 0 0 6px 0;
}

.empty-hint {
  font-size: 0.875rem;
  color: var(--color-text-tertiary);
}

.empty-hint kbd {
  padding: 2px 6px;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.85em;
}

.empty-state.hidden {
  display: none;
}

/* ============================================================================
         MODAL / PREVIEW
         ============================================================================ */

/* 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);
}

.modal-card {
  display: flex;
  flex-direction: column;
  max-height: 85vh;
  padding: 22px;
  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);
  overflow: hidden;
  z-index: var(--z-modal, 6000);
}

.modal-card p {
  direction: rtl;
}

.preview-modal {
  max-width: 900px;
  /* This card uses .modal-header + #previewContent (a .preview-content,
     not .modal-body) instead of the plain padding/text-align .modal-card
     ships with by default — reset those so the header/scrollable-body
     layout below isn't fighting the base rule's own padding and centering. */
  padding: 0;
  text-align: initial;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  max-height: 60px;
  border-bottom: 2px solid var(--color-border);
  flex-shrink: 0;
}

.modal-header h2 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 1.2rem;
  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);
}

.modal-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
}

.modal-body p {
  margin-bottom: 10px;
  color: var(--color-text-primary);
}

#importTextarea {
  width: 100%;
  padding: 12px;
  border: 2px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-background);
  color: var(--color-text-primary);
  font-family: monospace;
  font-size: 0.9rem;
  resize: vertical;
  direction: ltr;
}

#importTextarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.preview-content {
  padding: 18px 20px;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
}

.preview-question {
  margin-bottom: 16px;
  padding: 14px 16px;
  background: var(--color-background);
  border-radius: 8px;
  border-left: 4px solid var(--color-primary);
}

.preview-question h4 {
  margin: 0 0 8px 0;
  color: var(--color-text-primary);
}

.preview-image {
  max-width: 100%;
  height: auto;
  margin: 10px 0;
  border-radius: 8px;
}

.preview-options {
  list-style: none;
  padding: 0;
  margin: 10px 0;
}

.preview-options li {
  padding: 8px 12px;
  margin-bottom: 6px;
  background: var(--color-background);
  border-radius: 6px;
  border: 2px solid var(--color-border);
}

.preview-options li.correct {
  background: var(--color-success-light);
  border-color: var(--color-success);
  font-weight: 600;
}

/* Essay questions in the preview modal show the model answer as a plain
 * card rather than an option list — there's nothing to mark "correct"
 * among a single free-text answer, so this deliberately doesn't reuse
 * .preview-options/.correct styling. */
.preview-essay-answer {
  margin: 10px 0;
  padding: 10px 14px;
  background: var(--color-success-light);
  border: 2px solid var(--color-success);
  border-radius: 6px;
}

.preview-explanation {
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--color-primary-light);
  border-left: 4px solid var(--color-primary);
  border-radius: 6px;
  font-size: 0.95rem;
  color: var(--color-text-primary);
}

/* ============================================================================
         LOADING OVERLAY
         ============================================================================ */

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  backdrop-filter: blur(4px);
}

.loading-spinner {
  text-align: center;
  color: white;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}

#loadingText {
  font-size: 1.1rem;
  font-weight: 600;
}

/* ============================================================================
         KEYBOARD SHORTCUTS PANEL
         ============================================================================ */

.shortcuts-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-surface);
  border-radius: 12px;
  box-shadow: var(--shadow-xl);
  border: 2px solid var(--color-border);
  z-index: 1500;
  max-width: 500px;
  width: 90%;
  animation: slideUp 0.3s ease;
}

.shortcuts-content {
  padding: 18px 20px;
}

.shortcuts-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-border);
}

.shortcuts-header h3 {
  margin: 0;
  font-size: 1.3rem;
  color: var(--color-text-primary);
}

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

.shortcut-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--color-background);
  border-radius: 8px;
  border: 1px solid var(--color-border);
}

.shortcut-item kbd {
  padding: 4px 8px;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: 0 2px 0 var(--color-border);
}

.shortcut-item span {
  color: var(--color-text-secondary);
  font-size: 0.95rem;
}

/* ============================================================================
         WATERMARK
         ============================================================================ */

.watermark {
  text-align: center;
  margin-top: auto;
  padding-top: 20px;
  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;
}

.watermark p {
  margin: 0;
}

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

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

/* ============================================================================
         Ltr
         ============================================================================ */

.ltr {
  direction: ltr;
}

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

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translate(-50%, -40%) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

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

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

@keyframes float {

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

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

.question-card {
  animation: slideIn 0.3s ease;
}

/* ============================================================================
         ESSAY QUESTION — DISTINCT VISUAL TREATMENT
         ============================================================================ */

/* Card-level accent: warm amber left border to distinguish from MCQ */
.question-card--essay {
  border-left: 4px solid var(--color-warning, #f59e0b);
  background: linear-gradient(135deg,
      color-mix(in srgb, var(--color-warning, #f59e0b) 6%, var(--color-surface)),
      var(--color-surface));
}

/* "Essay" header badge */
.essay-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  background: color-mix(in srgb,
      var(--color-warning, #f59e0b) 18%,
      transparent);
  color: color-mix(in srgb,
      var(--color-warning, #f59e0b) 80%,
      var(--color-text-primary));
  border: 1.5px solid color-mix(in srgb, var(--color-warning, #f59e0b) 40%, transparent);
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 700;
  margin-inline-end: 8px;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

.essay-answer-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
  line-height: 1.6;
}

.essay-optional {
  font-weight: 400;
  opacity: 0.75;
  font-style: italic;
}

.essay-answer-container {
  padding: 10px 14px;
  background: color-mix(in srgb,
      var(--color-warning, #f59e0b) 5%,
      var(--color-background));
  border: 2px dashed color-mix(in srgb, var(--color-warning, #f59e0b) 40%, var(--color-border));
  border-radius: 10px;
}

.essay-answer-editor .md-source {
  min-height: 100px;
  /* No manual resize: this field auto-grows via autoResizeMdSource() like
     every other .wp-textarea, so a drag handle would only fight the JS. */
  resize: none;
}

/* Convert button */
.add-option-btn--convert {
  background: transparent;
  border: 2px dashed var(--color-border);
  color: var(--color-text-secondary);
  font-size: 0.85rem;
  margin-top: 10px;
  transition: all 0.2s;
}

.add-option-btn--convert:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-light);
}

/* ============================================================================
         FULL MARKDOWN RENDERER — HEADINGS, LISTS, BLOCKQUOTES, RULES
         ============================================================================ */

.md-h1,
.md-h2,
.md-h3,
.md-h4,
.md-h5,
.md-h6 {
  margin: 0.6em 0 0.3em;
  color: var(--color-text-primary);
  line-height: 1.3;
}

.md-h1 {
  font-size: 1.6em;
  border-bottom: 2px solid var(--color-border);
  padding-bottom: 4px;
}

.md-h2 {
  font-size: 1.35em;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 3px;
}

.md-h3 {
  font-size: 1.15em;
}

.md-h4 {
  font-size: 1.05em;
}

.md-h5 {
  font-size: 0.95em;
}

.md-h6 {
  font-size: 0.9em;
  opacity: 0.85;
}

.md-hr {
  border: none;
  border-top: 2px solid var(--color-border);
  margin: 0.8em 0;
}

.md-blockquote {
  border-inline-start: 4px solid var(--color-primary);
  margin: 0.5em 0;
  padding: 8px 16px;
  background: var(--color-primary-light);
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-start-end-radius: 6px;
  border-end-end-radius: 6px;
  color: var(--color-text-secondary);
  font-style: italic;
}

.md-list {
  margin: 0.4em 0 0.4em 1.4em;
  padding: 0;
  color: var(--color-text-primary);
}

.md-list li {
  margin-bottom: 4px;
  line-height: 1.6;
}

.md-link {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.md-img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 4px 0;
  display: block;
}

/* ============================================================================
         LATEX / KATEX MATH
         ============================================================================ */

/* Block math (display mode) */
.math-block {
  display: block;
  overflow-x: auto;
  padding: 10px 0;
  text-align: center;
  font-size: 1.05em;
}

/* Inline math */
.math-inline {
  display: inline;
}

/* Fallback when KaTeX is not loaded */
.math-raw {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.92em;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--color-text-primary);
}

/* ============================================================================
         RESPONSIVE — MODAL FIXES
         ============================================================================ */

@media (max-width: 640px) {
  .modal-card {
    border-radius: 12px;
    max-height: 80vh;
    margin: 10px auto;
    width: 95%;
  }

  .modal-overlay {
    padding-bottom: calc(var(--bottom-nav-height, 64px) + env(safe-area-inset-bottom, 0px));
    align-items: center;
    box-sizing: border-box;
  }

  .modal-body {
    padding: 12px;
  }

  .modal-header {
    padding: 12px;
  }

  /* Autosave Indicator - on the left on phones, not to be under the hamburger menu */
  .autosave-indicator {
    margin-right: auto;
  }

  /* ============================================================================
         RESPONSIVE DESIGN
         ============================================================================ */
  /* Mobile uses a bottom nav, not a side rail, so the app bars don't need to
     reserve any sidebar gap here — full width edge to edge. */
  body.quiz-form-active {
    padding-top: 0;
  }

  .container {
    padding: 0px;
  }

  .card {
    padding: 20px;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .section-header .btn {
    width: 100%;
  }

  .section-actions {
    width: 100%;
  }

  .section-actions .btn {
    flex: 1;
  }

  .question-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .questions-section {
    padding: 8px;
  }

  /* Was `padding: 0px`, stripping ALL breathing room from the card at this
     breakpoint — including above .question-header, which made .q-label
     sit flush against the card's top border. That blanket reset was meant
     for the *collapsed* state only (where .question-card.collapsed
     .question-header supplies its own 14px/20px padding instead) but was
     applying to every card, collapsed or not. Give expanded cards modest
     padding instead; collapsed cards still get flush edges via the
     .collapsed-specific rule, which is more specific and wins for them. */
  .question-card {
    padding: 12px;
  }

  .option-input {
    padding: 6px 10px;
    margin-right: 5px;
  }

  .option-item {
    flex-wrap: wrap;
    padding: 8px;
  }

  .action-buttons {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .shortcuts-panel {
    width: 95%;
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }

  .question-controls {
    flex-direction: column;
  }

  .search-box {
    width: 100%;
  }
}

/* ============================================================================
         UTILITY CLASSES
         ============================================================================ */

.hidden {
  display: none !important;
}

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

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

/* ============================================================================
         DARK MODE ADJUSTMENTS
         ============================================================================ */

[data-theme="dark"] .question-card,
[data-theme="dark-slate"] .question-card {
  background: var(--color-surface);
}

[data-theme="dark"] .option-item,
[data-theme="dark-slate"] .option-item {
  background: var(--color-surface);
}

/* ============================================================================
         PRINT STYLES
         ============================================================================ */

@media print {

  .menu-container,
  .app-title-bar,
  .menu-bar,
  .action-bar,
  .question-actions,
  .shortcuts-panel {
    display: none !important;
  }

  .question-card {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  body {
    padding: 0;
  }

  .card {
    box-shadow: none;
    border: 1px solid #ddd;
  }
}

/* ============================================================================
         WRITE / PREVIEW MARKDOWN FIELD (GitHub-style)
         ============================================================================ */

.wp-field {
  width: 100%;
  border: 2px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-background);
  transition:
    border-color 0.18s,
    box-shadow 0.18s;
}

.wp-field:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.wp-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 8px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  flex-wrap: wrap;
}

.wp-tabs {
  display: flex;
  gap: 2px;
}

.wp-tab {
  padding: 9px 14px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    color 0.15s,
    border-color 0.15s;
  margin-bottom: -1px;
}

.wp-tab:hover {
  color: var(--color-text-primary);
}

.wp-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.wp-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 0;
}

.wp-tool-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 5px;
  background: none;
  color: var(--color-text-tertiary);
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}

.wp-tool-btn svg {
  width: 14px;
  height: 14px;
}

.wp-tool-btn:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.wp-tool-dropdown {
  position: relative;
}

.wp-heading-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 110px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  box-shadow: var(--shadow-lg);
  padding: 4px;
  gap: 1px;
}

.wp-heading-option {
  display: block;
  width: 100%;
  text-align: right;
  padding: 6px 10px;
  border: none;
  background: none;
  border-radius: 4px;
  font-size: 0.82rem;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background 0.15s;
}

.wp-heading-option:hover {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.wp-pane-wrap {
  position: relative;
}

/* Selectors are doubled up (`.form-group textarea.wp-textarea` as well as
   plain `.wp-textarea`) so this wins in the cascade over the generic
   `.form-group textarea` / `.form-group textarea:focus` rules above.
   Question-text and explanation fields render `.wp-textarea` *inside* a
   `.form-group` (see renderQuestion()), so without this the more-specific
   `.form-group textarea` rule was winning instead — giving the field its
   own 2px border, its own `resize: vertical`, and on focus its own
   border-color + box-shadow ring stacked directly on top of .wp-field's
   ring below. That combination was both the visible "double border" and
   the manual resize handle the field wasn't supposed to have. */
.form-group textarea.wp-textarea,
.wp-textarea {
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: var(--color-background);
  color: var(--color-text-primary);
  font-size: 0.9rem;
  line-height: 1.6;
  resize: none;
  box-sizing: border-box;
  display: block;
  overflow: hidden;
  direction: rtl;
}

/* The focus ring lives on the outer .wp-field wrapper (border-color +
   box-shadow above). Without this, the textarea's own default browser
   focus outline — and, inside a .form-group, the generic
   `.form-group textarea:focus` border/box-shadow — drew on top of that
   ring at the same time, making an active field look like it had two
   borders stacked on each other. */
.form-group textarea.wp-textarea:focus,
.wp-textarea:focus,
.wp-textarea:focus-visible {
  outline: none;
  border: none;
  box-shadow: none;
  transform: none;
}

/* GitHub-style drag-and-drop media embedding: visual feedback while a file
   is dragged over a markdown field (question text, options, explanation,
   essay/formal answer — every .md-source textarea gets this via
   setupMarkdownMediaDropzone). Applied to the textarea's wrapper so the
   whole field visibly lights up as a drop target. */
.wp-field:has(.md-source--drag-active) {
  border-color: var(--gradient-start, #6366f1);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gradient-start, #6366f1) 25%, transparent);
}

.md-source--drag-active {
  background: color-mix(in srgb, var(--gradient-start, #6366f1) 6%, var(--color-background));
}

.wp-preview-pane {
  min-height: 60px;
  padding: 10px 14px;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-text-primary);
  word-break: break-word;
}

.wp-footer {
  padding: 6px 14px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

.wp-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--color-text-tertiary);
  font-size: 0.75rem;
}

.md-placeholder {
  color: var(--color-text-tertiary);
  font-style: italic;
  pointer-events: none;
}

.wp-preview-pane .inline-code,
.preview-question .inline-code,
.option-md-wrap .inline-code {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: "Fira Code", "Courier New", monospace;
  font-size: 0.88em;
  font-style: normal;
}

/* ============================================================================
         OPTION WRITE/PREVIEW FIELD — compact single-line style
         ============================================================================ */

.option-md-wrap {
  flex: 1;
  min-width: 0;
}

.option-md-wrap .wp-textarea,
.option-md-wrap .wp-preview-pane {
  min-height: 36px;
  padding: 6px 10px;
  font-size: 0.9rem;
}

.option-md-wrap .wp-bar {
  padding: 0 6px;
}

.option-md-wrap .wp-tab {
  padding: 6px 10px;
  font-size: 0.78rem;
}

.option-md-wrap .wp-footer {
  display: none;
}

/* ============================================================================
         QUESTION CARD — COLLAPSED
         ============================================================================ */

/* Hide body when collapsed */
.question-card.collapsed .question-body {
  display: none;
}

.question-card.collapsed {
  padding: 0;
}

.question-card.collapsed .question-header {
  border-bottom: none;
  border-radius: 10px;
  margin-bottom: 0;
  cursor: pointer;
  padding: 14px 20px;
  /* .question-actions (the "more" button) stays absolutely positioned and
     visible even while collapsed — keep its left-side clearance so the
     collapsed preview text can't run underneath it. */
  padding-left: 44px;
}

/* Question number row */
.question-number {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.q-label {
  font-weight: 700;
  color: var(--color-primary);
  font-size: 1rem;
  white-space: nowrap;
}

.q-preview {
  unicode-bidi: plaintext; /* truncate by the text's own direction */
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
  display: inline-block;
  vertical-align: middle;
  /* Push preview to the left side of the header while keeping text LTR */
  margin-left: auto;
  text-align: left;
}

/* ============================================================================
         QUESTION BODY WRAPPER
         ============================================================================ */
.question-body {
  padding-top: 4px;
}

/* ============================================================================
         IMPORT MODAL — DRAG & DROP ZONE
         ============================================================================ */

.import-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 20px;
  border-radius: 10px;
  border: 2px dashed var(--color-border);
  background: var(--color-background);
  color: var(--color-text-secondary);
  text-align: center;
  transition:
    border-color 0.2s,
    background 0.2s;
  cursor: default;
}

.import-dropzone.drag-active {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.import-dropzone p {
  margin: 0;
  font-size: 0.9rem;
}

.import-file-label {
  font-size: 0.8rem;
  color: var(--color-text-tertiary);
  margin: 2px 0 0;
  min-height: 1.2em;
  word-break: break-all;
  max-width: 100%;
}

/* ============================================================================
         MODAL HEADER — close button fix
         ============================================================================ */

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.modal-header h2 {
  margin: 0;
  flex: 1;
}

.modal-header .close-btn {
  flex-shrink: 0;
  margin-right: 12px;
  margin-top: 0;
  margin-left: 0;
}

/* ============================================================================
         DARK / DARK-SLATE THEME OVERRIDES
         ============================================================================ */

/* Backgrounds */
[data-theme="dark"] body,
[data-theme="dark-slate"] body {
  /* Keep body transparent so the fixed flow-field canvas can remain visible
     behind editor surfaces. The document canvas background is provided by
     themes.css on html. */
  background: transparent;
  color: var(--color-text-primary);
}

[data-theme="dark"] .question-card,
[data-theme="dark-slate"] .question-card {
  background: var(--color-surface);
  border-color: var(--color-border);
}

[data-theme="dark"] .question-header,
[data-theme="dark-slate"] .question-header {
  border-color: var(--color-border);
}

[data-theme="dark"] .card,
[data-theme="dark-slate"] .card,
[data-theme="dark"] .action-bar,
[data-theme="dark-slate"] .action-bar,
[data-theme="dark"] .stats-card,
[data-theme="dark-slate"] .stats-card,
[data-theme="dark"] .questions-section,
[data-theme="dark-slate"] .questions-section {
  background: var(--color-surface);
  border-color: var(--color-border);
}

/* Inputs */
[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group textarea,
[data-theme="dark"] .search-box input,
[data-theme="dark-slate"] .form-group input,
[data-theme="dark-slate"] .form-group textarea,
[data-theme="dark-slate"] .search-box input {
  background: var(--color-background);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

/* Write/Preview field */
[data-theme="dark"] .wp-field,
[data-theme="dark-slate"] .wp-field {
  background: var(--color-background);
  border-color: var(--color-border);
}

[data-theme="dark"] .wp-field:focus-within,
[data-theme="dark-slate"] .wp-field:focus-within {
  border-color: var(--color-primary);
}

[data-theme="dark"] .wp-bar,
[data-theme="dark-slate"] .wp-bar {
  background: var(--color-surface);
  border-color: var(--color-border);
}

[data-theme="dark"] .wp-textarea,
[data-theme="dark-slate"] .wp-textarea {
  background: var(--color-background);
  color: var(--color-text-primary);
}

[data-theme="dark"] .wp-preview-pane,
[data-theme="dark-slate"] .wp-preview-pane {
  background: var(--color-background);
  color: var(--color-text-primary);
}

[data-theme="dark"] .wp-preview-pane .inline-code,
[data-theme="dark-slate"] .wp-preview-pane .inline-code,
[data-theme="dark"] .option-md-wrap .inline-code,
[data-theme="dark-slate"] .option-md-wrap .inline-code {
  background: rgba(203, 166, 247, 0.15);
  color: #cba6f7;
}

/* Options */
[data-theme="dark"] .option-item,
[data-theme="dark-slate"] .option-item {
  background: var(--color-surface);
  border-color: var(--color-border);
}

[data-theme="dark"] .option-item.correct,
[data-theme="dark-slate"] .option-item.correct {
  background: var(--color-success-light);
}

/* Templates */
[data-theme="dark"] .templates-panel,
[data-theme="dark-slate"] .templates-panel {
  background: var(--color-surface);
  border-color: var(--color-border);
}

[data-theme="dark"] .template-card,
[data-theme="dark-slate"] .template-card {
  background: var(--color-background);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

[data-theme="dark"] .template-card:hover,
[data-theme="dark-slate"] .template-card:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

/* Buttons */
[data-theme="dark"] .btn-secondary,
[data-theme="dark-slate"] .btn-secondary {
  background: var(--color-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

[data-theme="dark"] .btn-action,
[data-theme="dark-slate"] .btn-action {
  background: var(--color-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

[data-theme="dark"] .btn-bulk,
[data-theme="dark-slate"] .btn-bulk {
  background: var(--color-surface);
}

/* Stat items */
[data-theme="dark"] .stat-item,
[data-theme="dark-slate"] .stat-item {
  background: var(--color-background);
  border-color: var(--color-border);
}

/* Shortcuts */
[data-theme="dark"] .shortcut-item,
[data-theme="dark-slate"] .shortcut-item {
  background: var(--color-background);
  border-color: var(--color-border);
}

[data-theme="dark"] .shortcut-item kbd,
[data-theme="dark-slate"] .shortcut-item kbd {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-primary);
  box-shadow: 0 2px 0 var(--color-border);
}

/* Modals */
[data-theme="dark"] .modal-card,
[data-theme="dark-slate"] .modal-card {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

[data-theme="dark"] .modal-header,
[data-theme="dark-slate"] .modal-header {
  border-color: var(--color-border);
}

[data-theme="dark"] .modal-body p,
[data-theme="dark-slate"] .modal-body p {
  color: var(--color-text-primary);
}

[data-theme="dark"] #importTextarea,
[data-theme="dark-slate"] #importTextarea {
  background: var(--color-background);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

/* Download popup */
[data-theme="dark"] .dl-option-btn,
[data-theme="dark-slate"] .dl-option-btn {
  background: var(--color-background);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

[data-theme="dark"] .dl-option-btn:hover,
[data-theme="dark-slate"] .dl-option-btn:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
}

[data-theme="dark"] .dl-sublabel,
[data-theme="dark-slate"] .dl-sublabel {
  color: var(--color-text-tertiary);
}

/* Import dropzone */
[data-theme="dark"] .import-dropzone,
[data-theme="dark-slate"] .import-dropzone {
  background: var(--color-background);
  border-color: var(--color-border);
}

/* Preview */
[data-theme="dark"] .preview-question,
[data-theme="dark-slate"] .preview-question {
  background: var(--color-background);
  border-left-color: var(--color-primary);
}

[data-theme="dark"] .preview-options li,
[data-theme="dark-slate"] .preview-options li {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

[data-theme="dark"] .preview-options li.correct,
[data-theme="dark-slate"] .preview-options li.correct {
  background: var(--color-success-light);
  border-color: var(--color-success);
}

[data-theme="dark"] .preview-explanation,
[data-theme="dark-slate"] .preview-explanation {
  background: var(--color-primary-light);
  color: var(--color-text-primary);
}

/* Bulk actions */
[data-theme="dark"] .bulk-actions-bar,
[data-theme="dark-slate"] .bulk-actions-bar {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
}

/* Add option btn */
[data-theme="dark"] .add-option-btn,
[data-theme="dark-slate"] .add-option-btn {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Shortcuts panel */
[data-theme="dark"] .shortcuts-panel,
[data-theme="dark-slate"] .shortcuts-panel {
  background: var(--color-surface);
  border-color: var(--color-border);
}

/* Image loading/error */
[data-theme="dark"] .image-loading,
[data-theme="dark-slate"] .image-loading {
  background: var(--color-background);
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}

/* Header */
[data-theme="dark"] .header,
[data-theme="dark-slate"] .header {
  background: var(--color-surface);
  border-color: var(--color-border);
}

/* Empty state hint */
[data-theme="dark"] .empty-hint kbd,
[data-theme="dark-slate"] .empty-hint kbd {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

/* ============================================================================
         PROGRESS BAR
         ============================================================================ */

.progress-bar-container {
  height: 6px;
  background: var(--color-border);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 10px;
}

.progress-bar {
  height: 100%;
  background: var(--gradient-accent);
  border-radius: 3px;
  transition: width 0.4s ease;
}

/* ============================================================================
         FORM SECTION ENHANCEMENTS
         ============================================================================ */

/* Make question card hover effect not apply when collapsed */
.question-card.collapsed:hover {
  transform: none;
}

/* Smooth transition for question body */
.question-body {
  animation: fadeIn 0.15s ease;
}

/* Override original collapsed selector — we use .question-body now */
.question-card.collapsed .form-group:not(:first-child) {
  display: block;
  /* reset — .question-body handles visibility */
}

/* ============================================================================
         SEARCH BAR COLLAPSE
         ============================================================================ */

.search-bar-collapse {
  overflow: hidden;
  animation: slideDown 0.25s ease;
  margin-bottom: 12px;
}

.search-only-row {
  margin-bottom: 0;
}

/* Search toggle button active state */
#searchToggleBtn.active {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Pinned mode: applied by JS (see setSearchBarOpen in create-quiz.js) only
   when the search bar is opened from the title bar's "إجراءات" (Actions)
   menu, whose whole point is reaching search without first scrolling back
   up to the questions section header — so this variant pins the bar to
   the viewport, right below the fixed app-title-bar + global-md-bar stack
   (44px + 40px, matching the .container top-margin math used elsewhere in
   this file), instead of flowing inline where it would immediately scroll
   out of view again. z-index sits below .menu-dropdown (60) so a menu
   opened while this bar is visible still draws on top of it. */
.search-bar-fixed {
  position: fixed;
  top: 84px;
  left: 0;
  right: var(--sidebar-collapsed-width);
  z-index: 55;
  margin: 0;
  padding: 10px 16px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  transition: right 250ms cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}

body.sidebar-expanded .search-bar-fixed {
  right: var(--sidebar-expanded-width);
}

/* Same Lightfall-mode contrast fix as the dropdown popovers above
   (.gmd-dropdown-menu / .menu-dropdown) — this bar is also a
   --color-surface panel and renders detached from any other element's
   own blur once pinned, so it needs its own backdrop-filter here too. */
html[data-animations="enabled"] .search-bar-fixed {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.search-bar-fixed .search-only-row {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Hidden by default — .search-bar-fixed-close only ever needs to be
   visible in pinned mode (see markup comment in create-quiz.html); the
   in-flow open already has the .section-actions search toggle button
   right above it to close the bar with. */
.search-bar-fixed-close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.search-bar-fixed-close svg {
  width: 18px;
  height: 18px;
}

.search-bar-fixed-close:hover,
.search-bar-fixed-close:focus-visible {
  background: var(--color-background);
  color: var(--color-text-primary);
}

.search-bar-fixed .search-bar-fixed-close {
  display: flex;
}

@media (max-width: 640px) {
  .search-bar-fixed {
    top: 84px;
    right: 0;
    padding: 8px 12px;
  }

  body.sidebar-expanded .search-bar-fixed {
    right: 0;
  }
}

/* ============================================================================
         ENHANCED UI IMPROVEMENTS — Appended patch
         ============================================================================ */

/* ── Quiz Metadata card: source field ──────────────────────────────────────── */
.quiz-metadata .form-group+.form-group {
  margin-top: 0;
}

/* ── Question card: accent strip on left by type ───────────────────────────── */
.question-card {
  border-left: 4px solid var(--color-border);
  padding-left: 14px;
}

.question-card:not(.incomplete):hover {
  border-left-color: var(--color-primary);
}

.question-card.incomplete {
  border-left-color: var(--color-warning) !important;
}

/* Remove the ::before "غير مكتمل" label (too intrusive) — keep border */
.question-card.incomplete::before {
  display: none;
}

/* ── Question header: cleaner pill for number ──────────────────────────────── */
.q-label {
  background: var(--color-primary-light);
  color: var(--color-primary);
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 0.85rem;
}

/* ── Options: cleaner answer choice layout ──────────────────────────────────  */
.option-item {
  border-radius: 10px;
  gap: 10px;
}

/* Correct answer gets a subtle left accent */
.option-item.correct {
  border-left: 4px solid var(--color-success);
}

/* ── Add option button: pill style ─────────────────────────────────────────── */
.add-option-btn {
  border-radius: 20px;
  font-size: 0.9rem;
}

/* ── Action bar: two-column layout on wider screens ────────────────────────── */
@media (min-width: 768px) {
  .action-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    gap: 0;
  }

  .action-divider {
    width: 2px;
    height: auto;
    margin: 0 20px;
    background: var(--color-border);
    align-self: stretch;
  }
}

/* ── Statistics card: gradient stat values ──────────────────────────────────── */
.stat-value {
  font-size: 2.2rem;
}

/* ── Empty state improvements ───────────────────────────────────────────────── */
.empty-state {
  padding: 36px 20px;
}

.empty-icon-svg {
  width: 5rem;
  height: 5rem;
  opacity: 0.35;
}

/* ── Template cards: uniform height ─────────────────────────────────────────── */
.template-card {
  min-height: 110px;
  justify-content: center;
}

.template-icon svg.page-data-lucide {
  width: 2rem;
  height: 2rem;
}

/* ── Floating progress text ──────────────────────────────────────────────────── */
.progress-text {
  font-size: 0.8rem;
  color: var(--color-text-tertiary);
  font-weight: 500;
}

/* ── Question body: small top gap ──────────────────────────────────────────── */
.question-body {
  padding-top: 8px;
}

/* ── Section bottom add-button area ─────────────────────────────────────────── */
.add-question-bottom {
  margin-top: 14px;
  padding: 14px;
  background: var(--color-background);
  border-radius: 12px;
  border: 2px dashed var(--color-border);
  transition:
    border-color 0.2s,
    background 0.2s;
}

.add-question-bottom:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

/* ── Bulk actions bar: icon + text buttons ──────────────────────────────────── */
.btn-bulk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
}

/* ── Search bar: unified height with other controls ─────────────────────────── */
.search-box input {
  height: 44px;
}

/* ── Question card animation: slight scale on add ──────────────────────────── */
@keyframes questionPop {
  0% {
    opacity: 0;
    transform: scale(0.97) translateY(8px);
  }

  70% {
    transform: scale(1.01) translateY(-2px);
  }

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

.question-card {
  animation: questionPop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Dark theme: sticky section header background ───────────────────────────── */
[data-theme="dark"] .section-header,
[data-theme="dark-slate"] .section-header {
  background: var(--color-surface);
}

/* ── RTL: flip left-border accent to right ──────────────────────────────────── */
[dir="rtl"] .question-card {
  border-left: none;
  border-right: 4px solid var(--color-border);
  padding-left: 25px;
  padding-right: 22px;
}

[dir="rtl"] .question-card:not(.incomplete):hover {
  border-right-color: var(--color-primary);
}

[dir="rtl"] .question-card.incomplete {
  border-right-color: var(--color-warning) !important;
}

[dir="rtl"] .option-item.correct {
  border-left: none;
  border-right: 4px solid var(--color-success);
}

[dir="rtl"] .preview-question {
  border-left: none;
  border-right: 4px solid var(--color-primary);
}

/* ── Metadata section: 2-col grid on desktop ─────────────────────────────────  */
@media (min-width: 640px) {
  .quiz-metadata .meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 24px;
  }

  .quiz-metadata .meta-grid .form-group:first-child,
  .quiz-metadata .meta-grid .form-group:last-child {
    grid-column: 1 / -1;
  }
}

/* ── Question card: reduce padding on very small screens ────────────────────── */
@media (max-width: 400px) {
  .question-card {
    padding: 12px;
  }

  .question-header {
    flex-direction: column;
    gap: 6px;
  }
}

/* ============================================================================
         OPTION CARDS — Privacy & Default Settings sections
         ============================================================================ */

/*
       * .option-cards   — grid wrapper for radio-button card groups
       * .option-card    — individual selectable card (wraps a hidden <input> + content)
       * .option-card-content — inner flex column (title + description)
       * .option-card-title   — primary label
       * .option-card-desc    — secondary hint text
       */

.option-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 4px;
}

/* Hide the actual radio input visually but keep it accessible */
.option-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.option-card {
  display: flex;
  align-items: stretch;
  border: 2px solid var(--color-border);
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  background: var(--color-background);
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.15s ease;
  position: relative;
  user-select: none;
}

.option-card:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  
  box-shadow: var(--shadow-md);
}

/* Selected state — toggled via JS with class .selected */
.option-card.selected {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 20%, transparent);
}

/* Selection indicator dot (top-right corner) */
.option-card.selected::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  /* RTL: physical left = visual right */
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow:
    0 0 0 2px var(--color-background),
    0 0 0 4px var(--color-primary);
  transition: opacity 0.2s;
}

.option-card-content {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
}

.option-card-title {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-text-primary);
  line-height: 1.4;
}

.option-card.selected .option-card-title {
  color: var(--color-primary);
}

.option-card-desc {
  font-size: 0.8rem;
  color: var(--color-text-tertiary);
  line-height: 1.4;
}

/* ============================================================================
         FORM SELECT — .form-control (quiz language dropdown, etc.)
         ============================================================================ */

.form-control {
  width: 100%;
  padding: 11px 16px;
  border: 2px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-background);
  color: var(--color-text-primary);
  font-size: 1rem;
  font-family: "IBM Plex Sans Arabic", sans-serif;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  /* Custom RTL-aware caret */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 14px center;
  padding-left: 42px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.form-control:hover {
  border-color: var(--color-primary);
}

/* ============================================================================
         PRIVATE SETTINGS SECTION — conditional reveal block
         ============================================================================ */

#privateSettingsSection {
  border-radius: 10px;
  background: color-mix(in srgb,
      var(--color-primary) 4%,
      var(--color-background));
  border: 1.5px dashed color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
  padding: 20px 20px 8px;
  margin-top: 1.5rem;
  animation: slideDown 0.25s ease;
}

/* Override the inline border-top style applied in the HTML */
#privateSettingsSection[style] {
  border-top: none !important;
  padding-top: 20px !important;
  margin-top: 1.5rem !important;
}

/* ============================================================================
         DARK / DARK-SLATE — option-cards, form-control, private section
         ============================================================================ */

[data-theme="dark"] .option-card,
[data-theme="dark-slate"] .option-card {
  background: var(--color-surface);
  border-color: var(--color-border);
}

[data-theme="dark"] .option-card:hover,
[data-theme="dark-slate"] .option-card:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
}

[data-theme="dark"] .option-card.selected,
[data-theme="dark-slate"] .option-card.selected {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
}

[data-theme="dark"] .option-card-title,
[data-theme="dark-slate"] .option-card-title {
  color: var(--color-text-primary);
}

[data-theme="dark"] .option-card.selected .option-card-title,
[data-theme="dark-slate"] .option-card.selected .option-card-title {
  color: var(--color-primary);
}

[data-theme="dark"] .form-control,
[data-theme="dark-slate"] .form-control {
  background-color: var(--color-background);
  border-color: var(--color-border);
  color: var(--color-text-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

[data-theme="dark"] #privateSettingsSection,
[data-theme="dark-slate"] #privateSettingsSection {
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
  border-color: color-mix(in srgb,
      var(--color-primary) 35%,
      var(--color-border));
}

/* ============================================================================
         RESPONSIVE — option-cards on small screens
         ============================================================================ */

@media (max-width: 640px) {
  .option-cards {
    grid-template-columns: 1fr;
  }

  .option-card {
    padding: 12px 14px;
  }
}

/* ============================================================================
   HIGHLIGHT COLOR PICKER  (Google-Docs-style; markup from
   src/shared/color-picker.js). Kept identical in create-quiz.css and
   create-lesson.css — see the note at the top of each about intentionally
   duplicated toolbar styles.

   ROOT-CAUSE NOTE — why the old menu "stayed open forever": the previous
   rule `.gmd-dropdown-menu--highlight { display: grid }` had the same
   specificity as the base `.gmd-dropdown-menu { display: none }` and came
   LATER in the file, so it always won and the menu was permanently visible
   regardless of the `.open` class. Layout below is therefore applied ONLY
   under `.open`; the closed state falls through to the base `display: none`.
   ============================================================================ */

.gmd-dropdown-menu--highlight {
  /* No `display` here on purpose — see the note above. */
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  width: max-content;
  max-width: calc(100vw - 16px);
  padding: 10px;
  max-height: min(80vh, 460px);
  overflow-y: auto;
}

.gmd-dropdown-menu--highlight.open {
  display: flex;
}

.cp-reset {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 6px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  font-size: 0.82rem;
  text-align: right;
  cursor: pointer;
}

.cp-reset svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-text-secondary);
}

.cp-reset:hover,
.cp-reset:focus-visible {
  background: var(--color-surface-hover, rgba(127, 127, 127, 0.12));
  outline: none;
}

.cp-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cp-row,
.cp-recent {
  display: flex;
  gap: 4px;
}

.cp-recent {
  flex-wrap: wrap;
}

.cp-swatch {
  width: 20px;
  height: 20px;
  padding: 0;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.18);
  background: var(--cp-color);
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.cp-swatch:hover,
.cp-swatch:focus-visible {
  transform: scale(1.18);
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary);
  outline: none;
  position: relative;
  z-index: 1;
}

.cp-section-title {
  margin-top: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
}

.cp-custom {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cp-tool {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  flex-shrink: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.cp-tool svg {
  width: 16px;
  height: 16px;
}

.cp-tool:hover,
.cp-tool:focus-visible,
.cp-tool:focus-within {
  background: var(--color-surface-hover, rgba(127, 127, 127, 0.12));
  color: var(--color-primary);
  outline: none;
}

/* The native color input is visually hidden but still the real control the
   surrounding <label> activates — kept in the layout box (not display:none)
   so the OS picker anchors next to the "+" button. */
.cp-native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  padding: 0;
  border: 0;
}

.cp-hex {
  width: 84px;
  min-width: 0;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-background);
  color: var(--color-text-primary);
  font: inherit;
  font-size: 0.8rem;
  text-align: left;
}

.cp-hex:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 0;
}

.cp-hex.is-invalid {
  border-color: var(--color-error);
  outline-color: var(--color-error);
}

.cp-apply {
  height: 28px;
  padding: 0 10px;
  border: none;
  border-radius: 6px;
  background: var(--color-primary);
  color: #fff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.cp-apply:hover,
.cp-apply:focus-visible {
  background: var(--color-primary-hover, var(--color-primary));
  outline: none;
}

@media (max-width: 480px) {
  .cp-swatch {
    width: 18px;
    height: 18px;
  }

  .cp-row,
  .cp-recent {
    gap: 3px;
  }
}

/* Shared toolbar popovers are detached to <body> and positioned against the viewport. */
.gmd-dropdown-menu {
  position: fixed;
  z-index: 10050;
  max-width: calc(100vw - 16px);
  box-sizing: border-box;
}

html[data-animations="disabled"] body {
  background: var(--color-background);
}
/* Drafts heading row + "delete all drafts" button */
.entry-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px 0;
  border-bottom: 1px solid var(--color-border);
}
.entry-section-head .entry-screen-heading {
  margin: 0;
  border-bottom: 0;
}
.entry-clear-drafts-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: transparent;
  color: var(--color-error, #dc2626);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}
.entry-clear-drafts-btn:hover {
  background: var(--color-error-light, rgba(220, 38, 38, 0.08));
  border-color: var(--color-error, #dc2626);
}