/* Hisham’s QBank — design tokens and component styles (single source of truth for handoff) */
:root {
  /* surfaces */
  --qb-bg: #F5F1E8;
  --qb-surface: #FFFDF9;
  --qb-sunken: #EDE7DA;
  --qb-border: #E0D9CA;
  --qb-border-strong: #C9C0AD;
  /* text */
  --qb-ink: #1E2622;
  --qb-ink-2: #4A534E;
  --qb-muted: #646B63;
  /* primary accent: deep teal */
  --qb-teal: #0E4F54;
  --qb-teal-hover: #0A3D41;
  --qb-teal-tint: #DFECE9;
  --qb-teal-border: #A9CBC6;
  /* status (always paired with an icon and a text label) */
  --qb-ok: #17603F;   --qb-ok-bg: #E2F0E6;   --qb-ok-bd: #A5CDB3;
  --qb-bad: #9A3418;  --qb-bad-bg: #F9E6DE;  --qb-bad-bd: #E0B3A2;
  --qb-warn: #7A4D00; --qb-warn-bg: #FBEDCB; --qb-warn-bd: #E3C77F;
  --qb-info: #1F4E79; --qb-info-bg: #E3ECF5; --qb-info-bd: #AFC6DD;
  /* type */
  --qb-font-ui: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --qb-font-content: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  /* shape */
  --qb-r-sm: 6px; --qb-r: 10px; --qb-r-lg: 14px;
  --qb-shadow: 0 1px 2px rgba(30,38,34,.06), 0 6px 18px rgba(30,38,34,.06);
  --qb-read: 44rem;
}

.qb { font-family: var(--qb-font-ui); color: var(--qb-ink); background: var(--qb-bg); font-size: 15px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
.qb *, .qb *::before, .qb *::after { box-sizing: border-box; }
:where(.qb) button, :where(.qb) input, :where(.qb) select, :where(.qb) textarea { font: inherit; color: inherit; }
.qb h1, .qb h2, .qb h3, .qb h4, .qb p, .qb figure { margin: 0; }
.qb :focus-visible { outline: 3px solid var(--qb-teal); outline-offset: 2px; }
.qb a { color: var(--qb-teal); }
.qb a:hover { color: var(--qb-teal-hover); }

.qb-h1 { font-size: 26px; font-weight: 600; line-height: 1.35; }
.qb-h2 { font-size: 19px; font-weight: 600; line-height: 1.4; }
.qb-h3 { font-size: 16px; font-weight: 600; line-height: 1.45; }
.qb-small { font-size: 13px; }
.qb-muted { color: var(--qb-muted); }
.qb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Bidi: English medical content inside the Arabic RTL interface */
.qb-en { direction: ltr; unicode-bidi: isolate; font-family: var(--qb-font-content); }
.qb-num { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; display: inline-block; }
.qb-stem { direction: ltr; unicode-bidi: isolate; text-align: left; font-family: var(--qb-font-content); font-size: 19px; line-height: 1.7; max-width: var(--qb-read); margin-right: auto; text-wrap: pretty; }
.qb-ltr-block { direction: ltr; unicode-bidi: isolate; text-align: left; font-family: var(--qb-font-content); }

.qb-card { background: var(--qb-surface); border: 1px solid var(--qb-border); border-radius: var(--qb-r-lg); padding: 20px; }
.qb-ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.qb-ico--sm { width: 14px; height: 14px; stroke-width: 2.2; }

/* Buttons */
.qb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--qb-r); border: 1px solid transparent; background: none; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; }
.qb-btn--primary { background: var(--qb-teal); color: #fff !important; }
.qb-btn--primary:hover { background: var(--qb-teal-hover); }
.qb-btn--secondary { background: var(--qb-surface); color: var(--qb-teal); border-color: var(--qb-teal-border); }
.qb-btn--secondary:hover, .qb-btn--ghost:hover { background: var(--qb-teal-tint); }
.qb-btn--ghost { color: var(--qb-teal); }
.qb-btn--danger { background: var(--qb-surface); color: var(--qb-bad); border-color: var(--qb-bad-bd); }
.qb-btn--danger:hover { background: var(--qb-bad-bg); }
.qb-btn--inverse { background: #fff; color: var(--qb-teal); }
.qb-btn--sm { padding: 0 12px; font-size: 14px; }
.qb-btn--icon { width: 44px; padding: 0; }
.qb-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Chips and status */
.qb-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 500; border: 1px solid var(--qb-border); background: var(--qb-sunken); color: var(--qb-ink-2); white-space: nowrap; }
.qb-chip--ok { background: var(--qb-ok-bg); color: var(--qb-ok); border-color: var(--qb-ok-bd); }
.qb-chip--bad { background: var(--qb-bad-bg); color: var(--qb-bad); border-color: var(--qb-bad-bd); border-style: dashed; }
.qb-chip--warn { background: var(--qb-warn-bg); color: var(--qb-warn); border-color: var(--qb-warn-bd); }
.qb-chip--info { background: var(--qb-info-bg); color: var(--qb-info); border-color: var(--qb-info-bd); }
.qb-chip--teal { background: var(--qb-teal-tint); color: var(--qb-teal); border-color: var(--qb-teal-border); }
.qb-chip--src { background: var(--qb-surface); border-color: var(--qb-border-strong); color: var(--qb-ink); }

/* Inline notes */
.qb-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--qb-r); border: 1px solid var(--qb-border); background: var(--qb-sunken); color: var(--qb-ink-2); }
.qb-note > .qb-ico { margin-top: 4px; }
.qb-note--ok { background: var(--qb-ok-bg); border-color: var(--qb-ok-bd); color: var(--qb-ok); }
.qb-note--bad { background: var(--qb-bad-bg); border-color: var(--qb-bad-bd); color: var(--qb-bad); border-style: dashed; }
.qb-note--warn { background: var(--qb-warn-bg); border-color: var(--qb-warn-bd); color: var(--qb-warn); }
.qb-note--info { background: var(--qb-info-bg); border-color: var(--qb-info-bd); color: var(--qb-info); }

/* Form controls */
.qb-label { display: block; font-size: 13px; font-weight: 600; color: var(--qb-ink-2); margin-bottom: 6px; }
.qb-input { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--qb-border-strong); border-radius: var(--qb-r); background: #fff; }
textarea.qb-input { padding: 10px 12px; min-height: 88px; line-height: 1.6; resize: vertical; }
.qb-input[readonly], .qb-input[disabled] { background: var(--qb-sunken); color: var(--qb-ink-2); }
.qb-check { width: 20px; height: 20px; accent-color: var(--qb-teal); flex: none; }

/* Filter tabs / segmented choices (buttons with aria-pressed) */
.qb-tab { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--qb-border-strong); background: var(--qb-surface); cursor: pointer; font-weight: 500; white-space: nowrap; }
.qb-tab:hover { border-color: var(--qb-teal); }
.qb-tab[aria-pressed="true"] { background: var(--qb-teal); border-color: var(--qb-teal); color: #fff; }
.qb-choice { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: start; padding: 14px 16px; border-radius: var(--qb-r); border: 1px solid var(--qb-border-strong); background: #fff; cursor: pointer; min-height: 44px; }
.qb-choice:hover { border-color: var(--qb-teal); }
.qb-choice[aria-pressed="true"] { border-color: var(--qb-teal); background: var(--qb-teal-tint); box-shadow: inset 0 0 0 1px var(--qb-teal); }

/* Navigation */
.qb-nav { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: var(--qb-r); border: 0; background: none; cursor: pointer; font-weight: 500; color: var(--qb-ink-2); white-space: nowrap; text-decoration: none; }
.qb-nav:hover { background: var(--qb-sunken); }
.qb-nav[aria-current="page"] { background: var(--qb-teal-tint); color: var(--qb-teal); font-weight: 600; }
.qb-tabbar { display: flex; }
.qb-tabbar .qb-nav { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 2px; padding: 6px 2px; font-size: 12px; min-height: 56px; border-radius: 0; }

/* Progress bar */
.qb-bar { height: 8px; background: var(--qb-sunken); border-radius: 999px; overflow: hidden; }
.qb-bar > span { display: block; height: 100%; background: var(--qb-teal); border-radius: 999px; }

/* Answer options (English content, LTR) */
.qb-opt { display: flex; align-items: flex-start; gap: 12px; width: 100%; direction: ltr; text-align: left; padding: 14px 16px; min-height: 58px; background: #fff; border: 1px solid var(--qb-border-strong); border-radius: var(--qb-r); cursor: pointer; }
.qb-opt:hover { border-color: var(--qb-teal); }
.qb-opt[aria-pressed="true"] { border-color: var(--qb-teal); background: var(--qb-teal-tint); box-shadow: inset 0 0 0 1px var(--qb-teal); }
.qb-opt[data-lock="1"] { cursor: default; }
.qb-opt[data-lock="1"]:hover { border-color: var(--qb-border-strong); }
.qb-opt[data-k="ok"], .qb-opt[data-k="ok"]:hover { border-color: var(--qb-ok); background: var(--qb-ok-bg); box-shadow: inset 0 0 0 1px var(--qb-ok); }
.qb-opt[data-k="bad"], .qb-opt[data-k="bad"]:hover { border: 1px dashed var(--qb-bad); background: var(--qb-bad-bg); box-shadow: none; }
.qb-letter { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--qb-border-strong); background: #fff; display: grid; place-items: center; font: 600 14px/1 var(--qb-font-ui); }
.qb-opt[aria-pressed="true"] .qb-letter { background: var(--qb-teal); border-color: var(--qb-teal); color: #fff; }
.qb-opt[data-k="ok"] .qb-letter { background: var(--qb-ok); border-color: var(--qb-ok); color: #fff; }
.qb-opt[data-k="bad"] .qb-letter { background: var(--qb-bad); border-color: var(--qb-bad); color: #fff; }
.qb-opt-text { flex: 1 1 0; min-width: 0; font-family: var(--qb-font-content); font-size: 17px; line-height: 1.55; padding-top: 2px; }
.qb-opt-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; direction: rtl; }
.qb-expl { direction: rtl; text-align: right; margin: 6px 0 4px; padding: 10px 14px; border-inline-start: 0; background: var(--qb-surface); border: 1px solid var(--qb-border); border-radius: var(--qb-r-sm); color: var(--qb-ink-2); }

/* Question navigator */
.qb-navq { position: relative; width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 8px; border: 1.5px dashed var(--qb-border-strong); background: #fff; font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums; }
.qb-navq[data-s="answered"] { border-style: solid; border-color: var(--qb-teal); background: var(--qb-teal-tint); color: var(--qb-teal); }
.qb-navq[data-flag="1"]::after { content: ""; position: absolute; top: -6px; inset-inline-end: -6px; width: 14px; height: 14px; background: #B87900; border: 2px solid #fff; clip-path: polygon(0 0, 100% 0, 70% 40%, 100% 80%, 22% 80%, 22% 100%, 0 100%); border-radius: 2px; }
.qb-navq[data-cur="1"] { outline: 2.5px solid var(--qb-ink); outline-offset: 2px; }
.qb-navq[data-r] { height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1.1; border-style: solid; }
.qb-navq[data-r="ok"] { border-color: var(--qb-ok); background: var(--qb-ok-bg); color: var(--qb-ok); }
.qb-navq[data-r="bad"] { border: 1.5px dashed var(--qb-bad); background: var(--qb-bad-bg); color: var(--qb-bad); }
.qb-navq[data-r="blank"] { border: 1.5px dotted var(--qb-border-strong); color: var(--qb-ink-2); }

/* Image placeholder */
.qb-imgph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; max-width: 420px; aspect-ratio: 4 / 3; padding: 16px; border: 1.5px dashed var(--qb-border-strong); border-radius: var(--qb-r); background: var(--qb-sunken); color: var(--qb-ink-2); cursor: zoom-in; text-align: center; }

/* Rows used in list-like tables */
.qb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding: 14px 0; border-top: 1px solid var(--qb-border); }
.qb-row:first-child { border-top: 0; }
.qb-stat { display: flex; flex-direction: column; min-width: 76px; }
.qb-stat > span:first-child { font-size: 12px; color: var(--qb-muted); }
.qb-stat > span:last-child { font-weight: 600; }

/* Workflow steps (admin) */
.qb-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.qb-step { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 14px; border-radius: 999px; border: 1px solid var(--qb-border); background: var(--qb-surface); color: var(--qb-muted); font-size: 13px; font-weight: 500; }
.qb-step > b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--qb-sunken); font-size: 12px; }
.qb-step[data-st="done"] { color: var(--qb-ok); border-color: var(--qb-ok-bd); background: var(--qb-ok-bg); }
.qb-step[data-st="done"] > b { background: var(--qb-ok); color: #fff; }
.qb-step[data-st="cur"] { color: #fff; background: var(--qb-teal); border-color: var(--qb-teal); font-weight: 600; }
.qb-step[data-st="cur"] > b { background: #fff; color: var(--qb-teal); }

/* Dialog */
.qb-overlay { position: absolute; inset: 0; z-index: 20; background: rgba(30,38,34,.5); display: flex; justify-content: center; align-items: flex-start; padding: 16px; }
.qb-dialog { position: sticky; top: 72px; width: 100%; max-width: 520px; max-height: 80vh; overflow: auto; background: var(--qb-surface); border: 1px solid var(--qb-border); border-radius: var(--qb-r-lg); padding: 24px; box-shadow: var(--qb-shadow); display: flex; flex-direction: column; gap: 16px; }
.qb-toast { position: sticky; bottom: 76px; z-index: 30; align-self: center; margin: 0 16px; padding: 10px 16px; border-radius: var(--qb-r); background: var(--qb-ink); color: #fff; box-shadow: var(--qb-shadow); }

/* Loading skeleton */
.qb-skel { background: var(--qb-sunken); border-radius: 6px; animation: qb-pulse 1.4s ease-in-out infinite; }
@keyframes qb-pulse { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .qb-skel { animation: none; } }

html, body { margin: 0; background: var(--qb-bg); color: var(--qb-ink); font-family: var(--qb-font-ui); }
[hidden] { display: none !important; }

/* Dropdown (qb-select) */
.qb-select { position: relative; display: block; min-width: 0; }
.qb-select__btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--qb-border-strong); border-radius: var(--qb-r); background: #fff; color: var(--qb-ink); cursor: pointer; text-align: start; font-weight: 500; }
.qb-select__btn:hover { border-color: var(--qb-teal); }
.qb-select[data-open="1"] .qb-select__btn { border-color: var(--qb-teal); box-shadow: 0 0 0 3px var(--qb-teal-tint); }
.qb-select__val { display: flex; align-items: center; gap: 8px; flex: 1 1 0; min-width: 0; }
.qb-select__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-select__chev { color: var(--qb-muted); transition: transform .15s ease; }
.qb-select[data-open="1"] .qb-select__chev { transform: rotate(180deg); color: var(--qb-teal); }
.qb-select__pop { position: absolute; z-index: 40; top: calc(100% + 6px); inset-inline-start: 0; min-width: 100%; width: max-content; max-width: min(calc(100vw - 16px), 460px); padding: 6px; background: var(--qb-surface); border: 1px solid var(--qb-border); border-radius: var(--qb-r); box-shadow: var(--qb-shadow); }
.qb-select__search { display: block; width: 100%; min-height: 40px; margin-bottom: 6px; padding: 0 10px; border: 1px solid var(--qb-border-strong); border-radius: 8px; background: #fff; }
.qb-select__list { max-height: 320px; overflow-y: auto; overscroll-behavior: contain; }
.qb-select__opt { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.qb-select__opt .qb-select__text { white-space: normal; flex: 1 1 0; }
.qb-select__opt[data-active="1"] { background: var(--qb-sunken); }
.qb-select__opt[aria-selected="true"] { color: var(--qb-teal); font-weight: 600; background: var(--qb-teal-tint); }
.qb-select__opt[aria-selected="true"][data-active="1"] { box-shadow: inset 0 0 0 1.5px var(--qb-teal); }
.qb-select__check { visibility: hidden; }
.qb-select__opt[aria-selected="true"] .qb-select__check { visibility: visible; }
.qb-select__badge { flex: none; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--qb-warn-bg); color: var(--qb-warn); border: 1px solid var(--qb-warn-bd); white-space: nowrap; }
.qb-select__empty { padding: 14px 10px; color: var(--qb-muted); text-align: center; }
@media (prefers-reduced-motion: reduce) { .qb-select__chev { transition: none; } }

/* «لتأكيد الإجابة» badge and question images */
.qb-rep { font-size: 12px; line-height: 1; padding: 3px 7px; border-radius: 999px; color: var(--qb-muted, #6B6458); border: 1px solid var(--qb-border, #E0D9CA); background: transparent; font-weight: 500; white-space: nowrap; }
.qb-chip--confirm { background: #FFF0D5; color: #985D03; border: 1px solid #F1CF96; font-weight: 600; }
.qb-qimg { display: block; max-width: 100%; max-height: 520px; margin: 0 auto; border: 1px solid var(--qb-border); border-radius: var(--qb-r); background: #fff; }
.qb-qimg-link { display: block; max-width: 100%; min-width: 0; }
.qb-chip { max-width: 100%; flex-wrap: wrap; }