/* =============================================================
   SalatiPal — Quran surah/chapter sidebar: remove search + snappy
   open/close. Paired with quran-sidebar-fix.js. Scope: the Quran
   route only. Safe to remove: drop the <link>/<script>.
   ============================================================= */

/* (A) Remove the in-sidebar "Search Surahs..." box. The list renders all
   114 surahs regardless, so hiding the filter is safe. (JS also hides the
   search row's wrapper so no icon/empty box is left behind.) */
body[data-sp-route="quran"] [data-sidebar] input[placeholder="Search Surahs..." i],
body[data-sp-route="quran"] [data-sidebar] input[placeholder*="Search" i] {
  display: none !important;
}

/* (B) Snappy, lag-free open/close.
   The panel shipped with `transition-all duration-300`, which animates its
   WIDTH (w-56 ↔ w-0) and reflows all 114 surah rows for 300ms every toggle
   → visible jank. Limit it to a short width-only transition, and kill the
   per-row `transition-all` so opening doesn't animate 114 elements at once. */
body[data-sp-route="quran"] [data-sidebar] {
  transition: width 0.12s ease !important;
}
body[data-sp-route="quran"] [data-sidebar] * {
  transition: none !important;
  animation: none !important;
}

/* (C) 2026-06-02 perf: skip layout/paint for off-screen surah rows.
   The list always renders all 114 rows; content-visibility lets the browser
   skip rendering the rows outside the viewport, cutting open/scroll jank.
   contain-intrinsic-size reserves each row's height so the scrollbar is stable. */
body[data-sp-route="quran"] [data-sidebar] .cursor-pointer.rounded.border {
  content-visibility: auto;
  contain-intrinsic-size: 0 34px;
}
body[data-sp-route="quran"] [data-sidebar] [data-radix-scroll-area-viewport] {
  contain: layout style paint;
}