/* ===========================================================================
   Bible_Sidebar — SHELL styles
   ---------------------------------------------------------------------------
   The shell adopts the existing cross-reference panel (#xref-sidebar) and adds
   a tab bar + tab panels on top of it. Everything here is additive and scoped
   to #xref-sidebar, so the cross-reference UI underneath is untouched.

   Colours/sizes come from CSS variables that sidebar.php injects from
   config/tabs.config.php (with sane fallbacks below).
   =========================================================================== */

/* Apply the configured panel width/font. Push the panel DOWN to open a gap
   above it where the protruding tabs live, and let the tabs overflow upward
   outside the panel. */
/* The collapsed-sidebar toggle (☰) is recoloured from the cross-ref blue to the
   sidebar gray so it matches the tabs. (#xref-sidebar-toggle lives OUTSIDE
   #xref-sidebar, so the theme vars aren't in scope — hardcode the gray.) */
#xref-sidebar-toggle { background: #5d6b78 !important; }
#xref-sidebar-toggle:hover { background: #46515c !important; }

#xref-sidebar.scs-enhanced {
  width: var(--scs-width, 40vw) !important;
  font-family: var(--scs-font-family, Arial, "Segoe UI", Tahoma, sans-serif) !important;
  margin-top: 42px !important;   /* gap above the panel = where the tabs sit */
  overflow: visible !important;  /* let the tabs stick up OUTSIDE the panel */
  /* Pin to the very top of the viewport (over the page header), regardless of
     scroll. Overrides the cross-ref JS that sets style.top below the navbar. */
  top: 0 !important;
}
@media (max-width: 600px) {
  #xref-sidebar.scs-enhanced { width: var(--scs-width-mobile, 85vw) !important; }
}

/* ── Tabs: folder-style, ABOVE the panel ──────────────────────────────────
   The tab bar is lifted OUT of the panel and positioned directly above its
   top edge, so the tabs stick up OUTSIDE the sidebar (over the page). The
   panel itself now begins at the header. Inactive tabs are smaller; the
   ACTIVE tab is ENLARGED and dips down to fuse into the header. Tabs OVERLAP
   to use the horizontal space. */
#xref-sidebar .scs-tabbar {
  position: absolute;
  bottom: 100%;                 /* sit directly ABOVE the panel's top edge */
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-end;        /* tabs rest on the panel edge and grow UPWARD */
  gap: 0;
  padding: 0 8px;
  margin: 0;
  background: transparent;       /* the gap behind the tabs shows the page */
  overflow: visible;
  z-index: 1;
}
#xref-sidebar .scs-tab {
  flex: 1 1 auto;               /* grow to share + fill the horizontal space */
  min-width: 0;
  box-sizing: border-box;
  height: 30px;                 /* inactive height */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 14px;
  margin-inline-start: -14px;   /* OVERLAP the previous tab */
  border: none;
  border-radius: 11px 11px 0 0;
  background: var(--scs-tab-idle-bg, #dfe8f6);   /* inactive: light, visible over the page */
  color: var(--scs-tab-idle-fg, #33445f);
  font-family: var(--scs-font-family, Arial, sans-serif);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  z-index: 1;
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.12);
  transition: height .12s ease, font-size .12s ease, background .15s, color .15s;
  user-select: none;
}
#xref-sidebar .scs-tab:first-child { margin-inline-start: 0; }   /* leading tab: no overlap */
#xref-sidebar .scs-tab:hover { background: #d4dade; z-index: 3; }
#xref-sidebar .scs-tab.scs-active {
  height: 40px;                 /* ENLARGED when active (clicked) */
  margin-bottom: -2px;          /* dip into the header so it fuses (no seam) */
  background: var(--scs-tab-active-bg, #1668cd);
  color: var(--scs-tab-active-fg, #ffffff);
  font-size: 15px;
  z-index: 5;                   /* in front of its neighbours */
  box-shadow: 0 -2px 7px rgba(22, 104, 205, 0.32);
  flex-grow: 2.4;               /* Active tab grows wider so its FULL label fits (inactive tabs show one word). */
}

/* Header is now the very top of the panel; the active tab fuses into it
   (the cross-ref module paints the header as a gradient — force solid so the
   active tab and header are the same colour). */
#xref-sidebar .xref-head {
  background: var(--scs-tab-active-bg, #5d6b78) !important;
  border-bottom: none !important;
  padding: 3px !important;
  min-height: 0 !important;
}
/* Collapse the header to a thin colour strip (the base the active folder-tab
   fuses into). Its content is redundant: the active TAB names the panel, the
   verse BAND shows the reference, and the ✕ is relocated to the tab bar by
   shell.js. The verse-id stays in the DOM (display:none) so the band can still
   read the reference text from it. */
#xref-sidebar .xref-head .xref-title-main,
#xref-sidebar .xref-head .xref-verse-id { display: none !important; }

/* ── Verse-text band (shared by ALL tabs) ─────────────────────────────────
   Sits directly under the header and shows the FULL text of the selected
   verse, so the reader keeps it in view while studying. shell.js fills the
   label / text / reference and toggles [data-empty] when no verse is picked. */
#xref-sidebar .scs-verse-quote {
  flex: 0 0 auto;
  display: block;                      /* HEAD row + verse-text block stack vertically */
  background: #fbf6e9;                 /* warm parchment so the verse stands out */
  border-bottom: 2px solid var(--scs-tab-active-bg, #5d6b78);
  padding: 8px 12px 9px;
  font-family: var(--scs-font-family, Arial, sans-serif);
  direction: rtl;
  max-height: 30vh;
  overflow-y: auto;
}
#xref-sidebar[data-lang="en"] .scs-verse-quote { direction: ltr; }
#xref-sidebar .scs-verse-quote[data-empty="1"] { display: none !important; }
/* Anti-flicker (mobile): promote the sticky verse band to its OWN compositing layer
   so it doesn't repaint while the panel content scrolls / rubber-bands underneath it
   (the band was flickering on iOS overscroll at the end of a long tafsir). */
#xref-sidebar .scs-verse-quote {
  transform: translateZ(0); -webkit-transform: translateZ(0);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
/* HEAD line: nav arrows + audio button + the verse REFERENCE. Always visible —
   it's the WHOLE band once collapsed (the verse text below is hidden then). */
#xref-sidebar .scs-vq-head { display: flex; align-items: center; gap: 6px; }
/* The verse TEXT lives in its own full-width block UNDER the head, so a long
   verse wraps across the ENTIRE width (under the arrows + audio too) instead of
   only under the audio button. Collapse-on-scroll (mobile): scrolling DOWN inside
   the sidebar hides the verse text (leaving just the head's reference line) for
   more study room; scrolling UP restores it. shell.js toggles .scs-collapsed; the
   grid-rows 1fr→0fr animation makes the collapse/expand SMOOTH (no snap). */
#xref-sidebar .scs-vq-textwrap {
  display: grid; grid-template-rows: 1fr; opacity: 1;
  transition: grid-template-rows .32s ease, opacity .24s ease;
}
#xref-sidebar .scs-vq-text-inner {
  overflow: hidden; min-height: 0;     /* required for the grid-rows collapse to reach 0 */
  font-size: 16.5px; line-height: 1.95; color: #20303f;
  text-align: justify; padding-top: 3px;
}
#xref-sidebar .scs-verse-quote.scs-collapsed .scs-vq-textwrap { grid-template-rows: 0fr; opacity: 0; }
#xref-sidebar[data-lang="en"] .scs-vq-text-inner { text-align: left; }
#xref-sidebar .scs-vq-label {
  color: var(--scs-tab-active-bg, #1f8f4a);
  font-weight: 700; font-size: 13px; margin-inline-end: 5px;
}
#xref-sidebar .scs-vq-text { font-weight: 600; }
/* The reference sits RIGHT NEXT TO the nav/audio buttons (same side), not pushed
   to the far edge — so no `margin-inline-start:auto` (that auto-margin is what
   used to shove it across to the opposite side). DOM order is unchanged:
   next-verse · prev-verse · audio · ref. */
#xref-sidebar .scs-vq-ref {
  color: #9a6a00; font-weight: 700; white-space: nowrap;
}

/* Verse audio button in the band — reads the open verse only, once. */
#xref-sidebar .scs-vq-audio {
  flex: 0 0 auto; width: 30px; height: 30px; padding: 0;
  border-radius: 50%; border: 1px solid var(--scs-tab-active-bg, #5d6b78);
  background: #ffffff; color: var(--scs-tab-active-bg, #5d6b78);
  cursor: pointer; font-size: 15px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle; margin-inline-end: 8px;
}
#xref-sidebar .scs-vq-audio:hover { background: var(--scs-tab-active-bg, #5d6b78); color: #ffffff; }

/* ── Verse-picker grid ─────────────────────────────────────────────────────
   Shown when the sidebar is OPEN but no verse is picked yet, so the reader can
   choose a verse from WITHIN the sidebar — no need to close it, tap a verse on
   the page, then reopen. Each button = the verse number + a few opening words.
   shell.js builds it from the page's [data-usfm] verses and toggles [hidden];
   picking from it drives every tab exactly like clicking the verse on the page. */
#xref-sidebar .scs-verse-grid {
  flex: 0 0 auto; display: block; padding: 12px 12px 14px;
  direction: rtl; font-family: var(--scs-font-family, Arial, sans-serif);
  border-bottom: 1px solid var(--scs-border, #d9e2ee);
}
#xref-sidebar[data-lang="en"] .scs-verse-grid { direction: ltr; }
#xref-sidebar .scs-verse-grid[hidden] { display: none !important; }
#xref-sidebar .scs-vg-title {
  font-weight: 700; font-size: 13.5px; color: var(--scs-tab-active-bg, #1668cd);
  margin: 0 0 9px; text-align: center;
}
#xref-sidebar .scs-vg-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 7px;
}
#xref-sidebar .scs-vg-btn {
  display: flex; align-items: baseline; gap: 6px; text-align: right; padding: 8px 9px;
  background: var(--scs-bg, #ffffff); color: var(--scs-text, #1a2a3f);
  border: 1px solid var(--scs-border, #c6cdef); border-radius: 8px;
  cursor: pointer; font-family: inherit; font-size: 12.5px; line-height: 1.5;
  overflow: hidden; transition: background .15s ease, color .15s ease, border-color .15s ease;
}
#xref-sidebar[data-lang="en"] .scs-vg-btn { text-align: left; }
#xref-sidebar .scs-vg-btn:hover,
#xref-sidebar .scs-vg-btn:focus {
  background: var(--scs-tab-active-bg, #1668cd); color: var(--scs-tab-active-fg, #ffffff);
  border-color: var(--scs-tab-active-bg, #1668cd); outline: none;
}
#xref-sidebar .scs-vg-btn:hover .scs-vg-n,
#xref-sidebar .scs-vg-btn:focus .scs-vg-n { color: inherit; }
#xref-sidebar .scs-vg-n { flex: 0 0 auto; font-weight: 800; font-size: 13.5px; color: var(--scs-primary, #1668cd); }
#xref-sidebar .scs-vg-snip {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .85;
}

/* Prev/next verse buttons, moved here from the header. The cross-ref module's
   emoji glyph (➡️/⬅️) is hidden (font-size:0) and replaced with a themed
   chevron so the buttons match the sidebar. Centred vertically by the band. */
#xref-sidebar .scs-vq-prev,
#xref-sidebar .scs-vq-next { flex: 0 0 auto; display: flex; align-items: center; }
#xref-sidebar .scs-verse-quote .xref-nav-btn {
  font-size: 0 !important;             /* hide the original emoji */
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #ffffff !important;
  border: 1px solid var(--scs-tab-active-bg, #5d6b78) !important;
  border-radius: 7px !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  transition: background .15s;
}
#xref-sidebar .scs-verse-quote .xref-nav-btn::before {
  font-size: 14px; font-weight: 700; line-height: 1;
  color: var(--scs-tab-active-bg, #5d6b78);
}
#xref-sidebar .scs-verse-quote #xref-nav-prev::before { content: "\276E"; }  /* ❮ point outward */
#xref-sidebar .scs-verse-quote #xref-nav-next::before { content: "\276F"; }  /* ❯ point outward */
#xref-sidebar .scs-verse-quote .xref-nav-btn:hover {
  background: var(--scs-tab-active-bg, #5d6b78) !important;
}
#xref-sidebar .scs-verse-quote .xref-nav-btn:hover::before { color: #ffffff; }
/* At the first/last verse the relevant button is disabled → faded + inert, so
   the reader sees it can't be used. */
#xref-sidebar .scs-verse-quote .xref-nav-btn:disabled {
  opacity: .3; cursor: default; box-shadow: none;
  background: #ffffff !important;
}
#xref-sidebar .scs-verse-quote .xref-nav-btn:disabled::before { color: var(--scs-tab-active-bg, #5d6b78); }

/* The cross-ref count "← [N شاهد]" (wrapped in a span by shell.js) is shown
   only on the cross-reference tab; the other tabs share the verse reference
   without it. */
#xref-sidebar:not(.scs-on-crossref) .xref-count-suffix { display: none !important; }

/* ── Tab panels (the non-crossref tabs) ───────────────────────────────────
   Injected as flex children after .xref-body. Hidden by default; the active
   one is shown via .scs-active and fills the remaining height. */
#xref-sidebar .scs-panel {
  display: none;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 14px 22px;
  box-sizing: border-box;
  color: var(--scs-text, #1a2a3f);
  font-family: var(--scs-font-family, Arial, sans-serif);
  font-size: var(--scs-font-size, 17px);
  background: var(--scs-bg, #ffffff);
}
#xref-sidebar .scs-panel.scs-active { display: block; }

/* When a non-crossref tab is active, hide the native cross-reference content
   (its meta strip + scrolling body + footer) so only the active panel shows.
   The cross-reference DOM stays in place untouched — just visually hidden. */
#xref-sidebar.scs-hide-native .xref-meta,
#xref-sidebar.scs-hide-native .xref-scroll,
#xref-sidebar.scs-hide-native .xref-body { display: none !important; }

/* ── Footer no longer pinned ──────────────────────────────────────────────
   shell.js wraps the cross-ref body + footer in .xref-scroll. The wrapper is
   the scroll area now, so the "مصدر: openbible.info" footer flows at the END
   of the cross-reference list — you only see it after scrolling to the bottom,
   and only on the cross-reference tab (it's hidden with .xref-scroll on the
   others, and on the empty state below). */
#xref-sidebar .xref-scroll {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column;
}
#xref-sidebar .xref-scroll .xref-body {
  flex: 0 0 auto; overflow: visible !important;
}
#xref-sidebar .xref-scroll .xref-footer {
  flex: 0 0 auto; position: static !important; margin-top: auto;
}
/* Empty state (no verse picked yet): nothing to scroll, so hide the wrap so the
   footer isn't shown floating under the "click a verse" prompt. */
#xref-sidebar:has(#xref-verse-id:empty):has(.xref-meta:not(:has(strong))) .xref-scroll {
  display: none !important;
}

/* ── Close (✕) relocated into the tab bar ─────────────────────────────────
   shell.js moves the cross-ref ✕ button into .scs-tabbar so the header strip
   can collapse. It sits at the inline-end corner, aligned with the tabs. */
#xref-sidebar .scs-tabbar { padding-inline-start: 38px; }   /* reserve the RIGHT corner for ✕ */
#xref-sidebar .scs-tabbar .xref-close {
  position: absolute;
  bottom: 0;
  inset-inline-start: 4px;          /* RIGHT edge in RTL → top-right corner of the sidebar */
  z-index: 7;
  width: 30px; height: 28px; padding: 0 !important; margin: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
  border: none !important;
  border-radius: 9px 9px 0 0 !important;
  background: var(--scs-tab-idle-bg, #e3e7ea) !important;
  color: var(--scs-tab-idle-fg, #3c454d) !important;
  font-size: 15px !important; line-height: 1 !important; cursor: pointer;
  box-shadow: 0 -1px 4px rgba(0,0,0,0.12);
}
#xref-sidebar .scs-tabbar .xref-close:hover {
  background: #d4dade !important;
}

/* ── Recolour the cross-ref toolbar trio (📖 إخفاء / 📋 نسخ / 🔗 / ↗) from the
   module's blue to the sidebar gray. Overrides the cross-ref CSS by specificity
   + !important; the cross-ref source itself is untouched. */
#xref-sidebar .xref-loadall-bar .xref-loadall-btn {
  background: var(--scs-primary, #5d6b78) !important;
  border-color: var(--scs-primary-dark, #46515c) !important;
  color: #ffffff !important;
}
#xref-sidebar .xref-loadall-bar .xref-loadall-btn:hover {
  background: var(--scs-primary-dark, #46515c) !important;
}
#xref-sidebar .xref-loadall-bar .xref-copy-btn,
#xref-sidebar .xref-loadall-bar .xref-link-btn {
  color: var(--scs-primary, #5d6b78) !important;
  border-color: var(--scs-primary, #5d6b78) !important;
}
#xref-sidebar .xref-loadall-bar .xref-copy-btn:hover,
#xref-sidebar .xref-loadall-bar .xref-link-btn:hover {
  background: #eef0f2 !important;
}

/* ── Placeholder styling for the demo tabs ────────────────────────────────*/
#xref-sidebar .scs-verse-ctx {
  font-weight: 700;
  color: var(--scs-primary, #1668cd);
  font-size: 15px;
  padding: 6px 10px;
  margin-bottom: 10px;
  background: #f3f6fb;
  border-radius: 6px;
  text-align: center;
}
#xref-sidebar .scs-dummy-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #8a6d00;
  background: #fff3cd;
  border: 1px solid #ffe08a;
  border-radius: 999px;
  padding: 2px 9px;
  margin-bottom: 10px;
}
#xref-sidebar .scs-dummy-h { margin: 4px 0 8px; font-size: 18px; color: var(--scs-primary, #1668cd); }
#xref-sidebar .scs-dummy-note { margin: 0 0 14px; color: #5a6b85; font-size: 14px; line-height: 1.7; }
#xref-sidebar .scs-dummy-card {
  background: #f7faff;
  border: 1px solid #e1e9f5;
  border-right: 3px solid var(--scs-primary, #1668cd);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 10px;
  line-height: 1.7;
}
#xref-sidebar[data-lang="en"] .scs-dummy-card {
  border-right: 1px solid #e1e9f5;
  border-left: 3px solid var(--scs-primary, #1668cd);
}

/* ── Mobile: the parchment verse band should STRETCH to fit the whole verse so
   no text is ever hidden/cut. We keep the FONT size but tighten line/word spacing
   so even a long verse (e.g. Rev 5:13) fits in a compact band; the generous cap
   only kicks in (scroll) for the very longest verses. */
@media (max-width: 768px) {
  #xref-sidebar .scs-verse-quote { max-height: 46vh; padding: 6px 10px 7px; }
  #xref-sidebar .scs-vq-head { gap: 4px; }
  #xref-sidebar .scs-vq-text-inner { line-height: 1.4; word-spacing: -0.5px; }
}