/* Bulma theme + app layout helpers (no Bootstrap dependency) */

:root {
  --ps-sidebar-width: 260px;
  --ps-topbar-height: 56px;
  /* JS may set this to real viewport height on iOS */
  --ps-vh: 1vh;

  /* Theme tokens (overridden per theme/style) */
  --ps-bg: #f5f7fb;
  --ps-surface: #ffffff;
  --ps-surface-2: #f9fafb;
  --ps-border: #e5e7eb;
  --ps-text: #111827;
  --ps-muted: #6b7280;
  --ps-link: #2563eb;
  --ps-focus: rgba(37, 99, 235, 0.35);

  --ps-accent-1: #667eea;
  --ps-accent-2: #764ba2;

  --ps-table-head-bg: #f9fafb;
  --ps-table-head-text: #374151;
  --ps-selected-row-bg: #e0f2fe;
}

html[data-theme="dark"] {
  --ps-bg: #0b1020;
  --ps-surface: #0f172a;
  --ps-surface-2: #111b2f;
  --ps-border: rgba(148, 163, 184, 0.16);
  --ps-text: #e5e7eb;
  --ps-muted: #9ca3af;
  --ps-link: #93c5fd;
  --ps-focus: rgba(147, 197, 253, 0.35);

  --ps-table-head-bg: #101a30;
  --ps-table-head-text: #e5e7eb;
  --ps-selected-row-bg: rgba(56, 189, 248, 0.16);
}

/* Modern layout: prefer JS-provided viewport unit (fixes iPad Safari toolbar clipping) */
html[data-style="modern"] .ps-shell {
  min-height: calc(var(--ps-vh, 1vh) * 100);
  height: calc(var(--ps-vh, 1vh) * 100);
}

html[data-style="modern"] .ps-layout {
  min-height: calc(var(--ps-vh, 1vh) * 100 - var(--ps-topbar-height));
  height: calc(var(--ps-vh, 1vh) * 100 - var(--ps-topbar-height));
}

html[data-style="simple"] {
  --ps-accent-1: #3b82f6;
  --ps-accent-2: #6366f1;
}

html[data-style="modern"] {
  --ps-accent-1: #7c3aed;
  --ps-accent-2: #06b6d4;
}

html,
body {
  height: 100%;
}

body {
  background: var(--ps-bg);
  color: var(--ps-text);
}


a {
  color: var(--ps-link);
}

/* Layout shell */
.ps-shell {
  min-height: 100vh;
}

.ps-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--ps-border);
  background: var(--ps-surface);
}

/* Mobile: make topbar fixed to prevent scroll bounce */
@media (max-width: 835px) {
  html[data-style="modern"] .ps-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 100;
  }

  /* Prevent body scroll bounce on mobile for modern style */
  html[data-style="modern"] body {
    overscroll-behavior-y: none;
    -webkit-overflow-scrolling: touch;
  }

  /* iOS/iPad Safari: prevent rubber-band from revealing underlying panes on /table.
     Keep scrolling inside the intended internal containers (.ps-modern-songlist, song pane). */
  html[data-style="modern"][data-page="table"] body {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }

  /* When page is pinch-zoomed, relax the overflow: hidden constraint so the browser
     can handle visual viewport panning (scrolling the zoomed view).
     Use 'position: absolute' (not fixed) to allow the body to move with the viewport panning,
     while still maintaining the 'height: 100%' chain for internal scrolling. */
  html[data-zoomed="true"] {
    overflow: visible !important;
  }

  html[data-zoomed="true"][data-style="modern"][data-page="table"] body {
    position: absolute !important;
    overflow: visible !important;
    width: 100% !important;
    height: 100% !important;
  }

  html[data-zoomed="true"][data-style="modern"] .ps-shell {
    overflow: visible !important;
  }

  /* When zoomed, inner scroll containers must stop capturing touch gestures so the
     visual viewport can pan in all directions (especially horizontal on Android).
     Without this, .box { overflow-y: auto } eats the touch and blocks horizontal VP panning. */
  html[data-zoomed="true"][data-style="modern"] .ps-content,
  html[data-zoomed="true"][data-style="modern"] .ps-layout,
  html[data-zoomed="true"][data-style="modern"][data-page="table"] #song_section_div .box {
    overflow: visible !important;
    touch-action: auto !important;
  }


  /* When the modern sidebar overlay is open on /table, completely hide the underlying content pane.
     This prevents iPad Safari from revealing the song pane underneath during elastic overscroll. */
  html[data-style="modern"][data-page="table"] .ps-sidebar.is-active+.ps-content {
    display: none;
  }

  /* Account for fixed topbar in layout */
  html[data-style="modern"] .ps-layout {
    margin-top: var(--ps-topbar-height);
    /* Use the "real" viewport height measured via visualViewport (see bulma-init.js) */
    height: calc(var(--ps-vh, 1vh) * 100 - var(--ps-topbar-height));
  }

  /* Mobile Modern: since the shell/layout are fixed-height + overflow hidden,
     the main content area must be scrollable for non-table pages (e.g. /playlists). */
  html[data-style="modern"] .ps-content {
    height: 100%;
    overflow-y: auto;
    overflow-x: visible;
    -webkit-overflow-scrolling: touch;
    touch-action: manipulation;
  }

  /* Ensure shell fills viewport */
  html[data-style="modern"] .ps-shell {
    min-height: calc(var(--ps-vh, 1vh) * 100);
    height: calc(var(--ps-vh, 1vh) * 100);
    overflow: hidden;
  }
}

.ps-layout {
  display: flex;
  min-height: calc(100vh - var(--ps-topbar-height));
}

.ps-sidebar {
  width: var(--ps-sidebar-width);
  border-right: 1px solid var(--ps-border);
  background: var(--ps-surface);
  padding: 0.75rem;
}

.ps-content {
  flex: 1;
  padding: 1rem;
}

/* Full-height shell (enables internal scroll areas) - Modern only */
html[data-style="modern"] .ps-layout {
  height: calc(100vh - var(--ps-topbar-height));
}

html[data-style="modern"] .ps-sidebar {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

html[data-style="modern"] .ps-content {
  height: 100%;
}

/* iOS/iPad Safari: use dynamic viewport height when available to avoid bottom cut-off */
@supports (height: 100dvh) {
  html[data-style="modern"] .ps-shell {
    min-height: 100dvh;
    height: 100dvh;
  }

  html[data-style="modern"] .ps-layout {
    min-height: calc(100dvh - var(--ps-topbar-height));
    height: calc(100dvh - var(--ps-topbar-height));
  }
}

/* Mobile (but iPad 11" 834px gets desktop sidebar) */
@media (max-width: 835px) {
  .ps-layout {
    display: block;
  }

  .ps-sidebar {
    width: auto;
    border-right: 0;
    border-bottom: 1px solid var(--ps-border);
    display: none;
  }

  .ps-sidebar.is-active {
    display: block;
  }

  /* Mobile: reduce padding on table page song section for more lyrics space */
  .ps-table-page .ps-content {
    padding: 0.25rem;
  }

  /* Reduce container padding on mobile for table page */
  .ps-table-page.container.is-fluid {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  /* Remove Bulma column padding on song section div for mobile */
  .ps-table-page #song_section_div.column {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .ps-table-page #song_section_div .box {
    padding: 0.5rem;
  }

  .ps-table-page #song_section_div .song-lyrics-container {
    padding: 0.75rem;
  }

  /* Mobile: reduce padding on song page for more lyrics space */
  .ps-content {
    padding: 0.25rem;
  }

  /* Reduce container padding on mobile for song viewer to match table page */
  #song_viewer.container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Further reduce song content padding on mobile */
  .song-content {
    padding: 0.5rem !important;
  }

  /* Further reduce lyrics container padding on mobile */
  .song-lyrics-container {
    padding: 0.5rem !important;
  }
}

/* Small utility */
.ps-muted {
  color: var(--ps-muted);
}

/* Core component theming (applies to light + dark via tokens) */
.box,
.card,
.dropdown-content {
  background: var(--ps-surface);
  color: var(--ps-text);
  border: 1px solid var(--ps-border);
}

.dropdown-item {
  color: var(--ps-text);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--ps-surface-2);
}

.dropdown-divider {
  background: var(--ps-border);
}

.menu-label {
  color: var(--ps-muted);
}

.menu-list a {
  color: var(--ps-text);
}

.menu-list a:hover {
  background: var(--ps-surface-2);
}

.menu-list a.is-active {
  position: relative;
  color: #ffffff;
  background: linear-gradient(135deg, var(--ps-accent-1) 0%, var(--ps-accent-2) 100%);
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  animation: ps-nav-active-in 260ms ease-out;
}

.menu-list a.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10%;
  bottom: 10%;
  width: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.85);
}

html[data-theme="dark"] .menu-list a.is-active {
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
}

@keyframes ps-nav-active-in {
  from {
    transform: translateX(-6px);
    opacity: 0.65;
  }

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

@media (prefers-reduced-motion: reduce) {
  .menu-list a.is-active {
    animation: none;
  }
}

/* Song form (edit/new song) */
.ps-songform .ps-songform-panel {
  background: var(--ps-surface);
  border: 1px solid var(--ps-border);
  border-radius: 12px;
  padding: 1.25rem;
}

.ps-songform .ps-divider {
  background: var(--ps-border);
}

.ps-songform .ps-songform-lyrics {
  min-height: 60vh;
  resize: vertical;
}

.ps-songform .buttons .button.is-outlined,
.ps-songform .button.is-outlined {
  border-width: 2px;
}

.ps-songform .button.is-outlined:hover {
  filter: brightness(1.02);
}

.input,
.textarea,
.select select {
  background: var(--ps-surface-2);
  border-color: var(--ps-border);
  color: var(--ps-text);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--ps-muted);
}

.input:focus,
.textarea:focus,
.select select:focus {
  border-color: var(--ps-link);
  box-shadow: 0 0 0 0.125em var(--ps-focus);
}

.button.is-ghost {
  color: var(--ps-text);
}

.button.is-ghost:hover {
  background: var(--ps-surface-2);
}

/* Tables (Bulma + DataTables) */
.table {
  background: transparent;
  color: var(--ps-text);
}

.table th,
.table td {
  border-color: var(--ps-border);
}

.table.is-striped tbody tr:not(.is-selected):nth-child(even) {
  background: rgba(148, 163, 184, 0.10);
}

html[data-theme="light"] .table.is-striped tbody tr:not(.is-selected):nth-child(even) {
  background: rgba(17, 24, 39, 0.03);
}

/* Pagination (Bulma) */
.pagination-link,
.pagination-previous,
.pagination-next {
  border-color: var(--ps-border);
  color: var(--ps-text);
}

.pagination-link:hover,
.pagination-previous:hover,
.pagination-next:hover {
  background: var(--ps-surface-2);
}

.pagination-link.is-current {
  background: var(--ps-link);
  border-color: var(--ps-link);
  color: #0b1020;
}

html[data-theme="light"] .pagination-link.is-current {
  color: #ffffff;
}

/* Make long dropdown lists scroll */
.ps-dropdown-scroll {
  max-height: 320px;
  overflow: auto;
}

/* Topbar actions (notifications / user) */
.ps-topbar .navbar-brand {
  width: 100%;
  display: flex;
  align-items: center;
  position: relative;
}

.ps-topbar .navbar-brand>.navbar-item {
  flex-shrink: 0;
}

.ps-topbar .navbar-brand>.navbar-item:first-child {
  pointer-events: auto;
  flex-shrink: 0;
  max-width: fit-content;
}

/* Ensure logo link doesn't block buttons on mobile */
@media (max-width: 835px) {
  .ps-topbar .navbar-brand>.navbar-item:first-child {
    max-width: 120px;
    overflow: hidden;
  }

  .ps-topbar-actions {
    flex-shrink: 0;
  }
}

.ps-topbar-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  position: relative;
  z-index: 101;
  pointer-events: auto;
}

.ps-topbar-actions .navbar-item {
  padding: 0;
  position: relative;
  z-index: 102;
  pointer-events: auto;
}

.ps-topbar-actions .dropdown,
.ps-topbar-actions .dropdown-trigger,
.ps-topbar-actions .button {
  pointer-events: auto;
  position: relative;
  z-index: 103;
}

.ps-topbar-actions .button.is-white {
  padding: 0.5rem;
  min-width: 2.5rem;
}

.ps-topbar-actions .button.is-ghost {
  padding: 0.5rem;
  min-width: 2.5rem;
}

/* Modern style polish */
html[data-style="modern"] .ps-topbar {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

html[data-style="modern"][data-theme="dark"] .ps-topbar {
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
}

/* Song header polish + theme alignment */
html[data-style="simple"] .song-header {
  background: var(--ps-accent-1) !important;
}

html[data-style="modern"] .song-header {
  background: linear-gradient(135deg, var(--ps-accent-1) 0%, var(--ps-accent-2) 100%) !important;
}

html[data-theme="dark"] .song-header::after {
  background: rgba(255, 255, 255, 0.12) !important;
}

/* Lyrics readability in dark mode (song-styles.css sets light-theme colors) */
html[data-theme="dark"] .song-lyrics-container pre,
html[data-theme="dark"] .song-lyrics-container .songLyrics,
html[data-theme="dark"] .song-lyrics-container #songLyrics,
html[data-theme="dark"] pre.songLyrics,
html[data-theme="dark"] #songLyrics.songLyrics {
  color: var(--ps-text) !important;
}

html[data-theme="dark"] .song-lyrics-container span.c,
html[data-theme="dark"] pre.songLyrics span.c,
html[data-theme="dark"] #songLyrics span.c {
  color: #a5b4fc !important;
  /* readable indigo */
}

html[data-theme="dark"] .song-lyrics-container span.lyrics,
html[data-theme="dark"] pre.songLyrics span.lyrics,
html[data-theme="dark"] #songLyrics span.lyrics {
  color: var(--ps-text) !important;
}

html[data-theme="dark"] .song-lyrics-container span.lyrics-bold,
html[data-theme="dark"] pre.songLyrics span.lyrics-bold,
html[data-theme="dark"] #songLyrics span.lyrics-bold {
  color: #ffffff !important;
}

/* YouTube frame background (song-styles.css sets light background) */
html[data-theme="dark"] #ytvideoframe {
  background: var(--ps-surface-2) !important;
}

html[data-theme="dark"] #ytvideoframe iframe {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45) !important;
}

/* Songbooks page (template has hard-coded light colors in an inline <style>) */
html[data-theme="dark"] .songbook-card {
  background: var(--ps-surface) !important;
  border-color: var(--ps-border) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] .songbook-card:hover {
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45) !important;
}

html[data-theme="dark"] .songbook-card-header {
  color: var(--ps-text) !important;
}

html[data-theme="dark"] .songbook-name {
  color: var(--ps-text) !important;
}

html[data-theme="dark"] .songbook-icon {
  color: var(--ps-link) !important;
}

html[data-theme="dark"] .songbook-count {
  background: rgba(147, 197, 253, 0.12) !important;
  color: #dbeafe !important;
}

html[data-theme="dark"] .empty-state {
  color: var(--ps-muted) !important;
}

html[data-theme="dark"] #song_viewer,
html[data-theme="dark"] .song-content,
html[data-theme="dark"] .song-lyrics-container {
  background: var(--ps-surface) !important;
  color: var(--ps-text);
  border-color: var(--ps-border) !important;
}

html[data-theme="dark"] .song-lyrics-container::before {
  background: linear-gradient(135deg, var(--ps-accent-1) 0%, var(--ps-accent-2) 100%) !important;
}

#ps-sidebar-toggle.navbar-burger {
  margin-left: 0;
}

/* Ensure dropdowns render above sidebar/content */
.ps-topbar .dropdown-menu {
  z-index: 110;
}

/* -------------------------------------------------------------------------- */
/* Modern song browser (optional) on /table                                    */
/* -------------------------------------------------------------------------- */

.ps-modern-browser {
  display: none;
}

html[data-style="modern"] #song_table {
  display: none;
}

html[data-style="modern"] .ps-modern-browser {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* Hide search field in sidebar when modern style is active */
html[data-style="modern"] #ps-sidebar-nav .field {
  display: none;
}

/* Use the app sidebar as the song list container on /table (Modern style) */
.ps-sidebar-table {
  display: none;
}

html[data-style="modern"][data-page="table"] #ps-sidebar-nav {
  display: none;
}

html[data-style="modern"][data-page="table"] .ps-sidebar-table {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

/* Hide the left column (table container) on /table in Modern style; song list moves into sidebar */
html[data-style="modern"][data-page="table"] .ps-table-page .ps-table-left {
  display: none;
}

/* Let right pane fill available content width in Modern style */
html[data-style="modern"][data-page="table"] .ps-table-page #song_section_div.column {
  width: 100%;
  max-width: 100%;
  flex: 1 1 auto;
}

/* -------------------------------------------------------------------------- */
/* Table Modern layout: sidebar + song pane aligned, with internal song scroll */
/* -------------------------------------------------------------------------- */

html[data-style="modern"][data-page="table"] .ps-content {
  padding: 0.75rem;
  overflow-y: hidden;
  overflow-x: visible;
}

html[data-style="modern"][data-page="table"] .ps-table-page {
  height: 100%;
  overflow: visible;
  display: flex;
  flex-direction: column;
}

html[data-style="modern"][data-page="table"] .ps-table-page>.columns {
  flex: 1 1 auto;
  min-height: 0;
}

html[data-style="modern"][data-page="table"] #song_section_div {
  height: 100%;
  display: flex;
  flex-direction: column;
}

html[data-style="modern"][data-page="table"] #song_section_div .box {
  height: 100%;
  overflow-y: auto;
  overflow-x: visible;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: manipulation;
}

/* Tablet: ensure action buttons and last content elements are fully scrollable */
@media (min-width: 836px) and (max-width: 1024px) {
  html[data-style="modern"][data-page="table"] #song_section_div .box {
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px) + 2rem);
  }

  html[data-style="modern"][data-page="table"] #song_section_div .ps-song-scroll>div[lang] {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px) + 2rem);
  }

  html[data-style="modern"][data-page="table"] #song_section_div .song-note:last-child,
  html[data-style="modern"][data-page="table"] #song_section_div .song-metadata:last-child {
    margin-bottom: calc(1rem + env(safe-area-inset-bottom, 0px) + 2rem);
  }

  html[data-style="modern"][data-page="table"] #ps-song-actions {
    margin-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px) + 2rem);
  }

  /* Also fix standalone song page on tablets */
  html[data-style="modern"] .ps-content {
    padding-bottom: calc(0.25rem + env(safe-area-inset-bottom, 0px) + 2rem);
  }

  html[data-style="modern"] #song_viewer.container {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px) + 2rem);
  }

  html[data-style="modern"] .song-content {
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px) + 2rem) !important;
  }

  html[data-style="modern"] .song-actions {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px) + 2rem);
  }

  html[data-style="modern"] .song-note:last-child,
  html[data-style="modern"] .song-metadata:last-child,
  html[data-style="modern"] .song-versions:last-child {
    margin-bottom: calc(1rem + env(safe-area-inset-bottom, 0px) + 2rem);
  }
}

html[data-style="modern"][data-page="table"] #song_section_div .ps-song-scroll {
  /* No longer the scroll container - just a regular wrapper */
  min-height: 0;
}


html[data-style="modern"][data-page="table"] #song_section_div .box>div[lang] {
  overflow: visible;
}

html[data-style="modern"][data-page="table"] #song_section_div .song-lyrics-container {
  overflow: visible;
}

/* Modern controls: neutral icon-only buttons on table page */
/* Apply immediately when modern style is active to prevent color flash */
/* Note: #song_section_div only exists on table page, so no need for data-page check */
html[data-style="modern"] #song_section_div .buttons .btn-text {
  display: none;
}

html[data-style="modern"] #song_section_div .buttons .button {
  background: transparent !important;
  border: 1px solid var(--ps-border) !important;
  color: var(--ps-text) !important;
  box-shadow: none !important;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

html[data-style="modern"] #song_section_div .buttons .button:hover {
  background: var(--ps-surface-2) !important;
}

html[data-style="modern"] #song_section_div .buttons .button .icon {
  margin-right: 0 !important;
}

/* Transposer buttons in modern mode */
html[data-style="modern"] .transpose-keys a,
html[data-style="modern"] .transpose-keys button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.55rem;
  border-radius: 10px;
  border: 1px solid var(--ps-border);
  background: transparent;
  color: var(--ps-text);
  text-decoration: none;
}

html[data-style="modern"] .transpose-keys a:hover,
html[data-style="modern"] .transpose-keys button:hover {
  background: var(--ps-surface-2);
}

html[data-style="modern"] .transpose-keys a .ps-transpose-label,
html[data-style="modern"] .transpose-keys button .ps-transpose-label {
  font-weight: 700;
  font-size: 0.8rem;
}

html[data-style="modern"] .transpose-keys a.selected {
  background: linear-gradient(135deg, var(--ps-accent-1) 0%, var(--ps-accent-2) 100%);
  border-color: transparent;
  color: #ffffff;
}

html[data-style="modern"] .transpose-keys .icon {
  margin-right: 0 !important;
}

/* Topbar burger alignment (modern) - display visibility controlled by separate responsive rules */
html[data-style="modern"] #ps-sidebar-toggle.navbar-burger {
  height: var(--ps-topbar-height);
  /* display is controlled by .ps-sidebar-burger responsive rules at end of file */
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 2.5rem;
  min-width: 2.5rem;
}

/* Ensure Bulma burger lines are centered inside the square button */
html[data-style="modern"] #ps-sidebar-toggle.navbar-burger span {
  left: 50%;
  transform: translateX(-50%);
}

/* Modern + /song: allow hamburger to toggle sidebar on desktop too */
@media (min-width: 1024px) {
  html[data-style="modern"][data-page="song"] .ps-layout {
    display: block;
  }

  html[data-style="modern"][data-page="song"] .ps-sidebar {
    display: none;
    position: fixed;
    top: var(--ps-topbar-height);
    left: 0;
    bottom: 0;
    z-index: 55;
    width: var(--ps-sidebar-width);
    border-right: 1px solid var(--ps-border);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
  }

  html[data-style="modern"][data-page="song"] .ps-sidebar.is-active {
    display: block;
  }
}

.ps-modern-list-wrap {
  /* Two-column layout so the scrollbar doesn't overlap the alphabet index */
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 28px;
  /* Critical: constrain the row height so the song list can scroll (otherwise the grid row is 'auto'
     and expands to content height, pushing the status/footer off-screen on tablet/desktop). */
  grid-template-rows: 1fr;
  gap: 4px;
  align-items: stretch;
}

.ps-modern-songlist {
  /* Make this a containing block so sticky headers have stable `offsetTop` math for JS jumps */
  position: relative;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 0;
  /* alpha index is its own column now */
  border-radius: 10px;
  border: 1px solid var(--ps-border);
  background: var(--ps-surface);
  touch-action: pan-y;
  height: 100%;
  /* Prevent scroll chaining to parent containers (fixes iPad landscape scroll issues) */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.ps-modern-letter {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0.35rem 0.6rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--ps-muted);
  background: linear-gradient(180deg, var(--ps-surface) 0%, rgba(0, 0, 0, 0) 100%);
  backdrop-filter: blur(4px);
}

.ps-modern-song {
  appearance: none;
  border: 0;
  background: transparent;
  width: 100%;
  text-align: left;
  padding: 0.55rem 0.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  cursor: pointer;
  border-radius: 10px;
}

.ps-modern-song:hover {
  background: var(--ps-surface-2);
}

.ps-modern-song.is-active {
  background: rgba(124, 58, 237, 0.12);
  outline: 2px solid rgba(124, 58, 237, 0.20);
}

html[data-theme="dark"] .ps-modern-song.is-active {
  background: rgba(6, 182, 212, 0.16);
  outline: 2px solid rgba(6, 182, 212, 0.20);
}

.ps-modern-song-name {
  font-weight: 700;
  color: var(--ps-link);
  line-height: 1.1;
}

.ps-modern-song-author {
  font-size: 0.8rem;
  color: var(--ps-muted);
  margin-top: 0.1rem;
}

.ps-modern-song-meta {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.ps-modern-song-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.5rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.75rem;
  color: var(--ps-text);
  background: var(--ps-surface-2);
  border: 1px solid var(--ps-border);
}

.ps-modern-alpha {
  position: relative;
  margin: 3px 0;
  width: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1px;
  pointer-events: none;
  /* buttons re-enable */
  /* Important: constrain height so JS can measure available space and downsample letters */
  height: 100%;
  overflow: hidden;
}

/* Icon centering (modern): make ion-icons truly centered inside Bulma .icon wrappers */
html[data-style="modern"] ion-icon {
  line-height: 1;
}

/* Song action buttons (modern table): center icons perfectly */
html[data-style="modern"] #song_section_div .buttons .button .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
}

html[data-style="modern"] #song_section_div .buttons .button ion-icon {
  font-size: 1.25rem;
}

/* Print button: icon-only square in modern mode */
html[data-style="modern"] #printSongButton {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

html[data-style="modern"] #printSongButton .icon {
  margin: 0 !important;
}

.ps-modern-alpha-btn {
  pointer-events: auto;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ps-muted);
  font-weight: 800;
  font-size: 0.75rem;
  line-height: 1;
  padding: 3px 0;
  width: 100%;
  border-radius: 6px;
  cursor: pointer;
}

.ps-modern-alpha-btn:hover {
  background: var(--ps-surface-2);
  color: var(--ps-text);
}

.ps-modern-status {
  margin-top: 0.5rem;
  font-size: 0.85rem;
}

/* Prevent bottom safe-area from hiding the status line on iPad/iPhone */
html[data-style="modern"] .ps-modern-status {
  padding-bottom: env(safe-area-inset-bottom, 0px);
  /* Keep the count visible even when the list is tall */
  margin-top: auto;
  padding-top: 0.5rem;
  background: var(--ps-surface);
}

/* Offline indicator for cached data */
.ps-modern-status.is-offline {
  color: #ff9800;
}

.ps-modern-status.is-offline::before {
  content: '⚠ ';
}

/* Mobile (incl. iPad 11" portrait 834px): keep dropdown menus inside the viewport */
@media (max-width: 835px) {
  .ps-topbar-actions .dropdown-menu {
    position: fixed;
    top: var(--ps-topbar-height);
    left: 0.5rem;
    right: 0.5rem;
    width: auto;
  }
}

/* Mobile Modern: sidebar overlay so hiding reveals song immediately */
@media (max-width: 835px) {
  html[data-style="modern"] .ps-sidebar {
    position: fixed;
    top: var(--ps-topbar-height);
    left: 0;
    right: 0;
    bottom: 0;
    /* Use bottom: 0 and let the content resize based on visual viewport.
       The --ps-vb variable captures keyboard height offset from visualViewport. */
    height: auto;
    width: auto;
    z-index: 55;
    overflow: hidden;
  }

  /* When keyboard is open, resize the sidebar-table to exclude keyboard area */
  html[data-style="modern"][data-page="table"] .ps-sidebar {
    /* Use calc with --ps-vb (keyboard height) to shrink the visible area */
    bottom: var(--ps-vb, 0px);
  }

  html[data-style="modern"] .ps-sidebar-table {
    /* Fill the available sidebar height (after keyboard offset is applied) */
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
    /* Ensure flex container properly distributes space */
    display: flex;
    flex-direction: column;
  }

  /* The browser panel lives inside ps-sidebar-table below nav/select;
     it must flex to remaining height (not force height: 100%). */
  html[data-style="modern"] .ps-modern-browser {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    /* Don't add extra bottom gap; safe-area spacing is handled by .ps-modern-status */
    padding-bottom: 0;
    box-sizing: border-box;
  }

  /* Ensure search field doesn't grow and takes minimal space */
  html[data-style="modern"] .ps-modern-browser>.field {
    flex-shrink: 0;
    flex-grow: 0;
  }

  /* Mobile: ensure songlist doesn't get cut off at bottom */
  html[data-style="modern"] .ps-modern-list-wrap {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
    /* Grid container - flex will size this */
    display: grid;
    grid-template-columns: 1fr 28px;
    grid-template-rows: 1fr;
    gap: 4px;
    align-items: stretch;
    /* Use height: 100% to fill flex-allocated space, max-height prevents overflow */
    height: 100%;
  }

  /* Mobile: ensure songlist scrolls and doesn't have excessive padding when keyboard is open */
  html[data-style="modern"] .ps-modern-songlist {
    /* Reduced padding when keyboard is open - keyboard offset handled by sidebar */
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    /* Grid item should fill its cell - grid container now has explicit height */
    min-height: 0;
    height: 100%;
    max-height: 100%;
    /* Ensure it fills available space within the grid */
    align-self: stretch;
    /* Explicitly enable scrolling to ensure padding-bottom is accessible */
    overflow-y: auto;
    overflow-x: hidden;
    /* Prevent scroll chaining to body */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* Ensure padding is part of scrollable content */
    box-sizing: border-box;
    /* Mobile: avoid clipped bottom border without overlaying content */
    border-color: transparent;
    box-shadow: 0 0 0 1px var(--ps-border) inset;
  }

  /* Ensure alpha index also respects grid height and has bottom padding */
  html[data-style="modern"] .ps-modern-alpha {
    align-self: stretch;
    min-height: 0;
    /* Reduced padding - keyboard offset handled by sidebar bottom */
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }

  /* Ensure status text doesn't overlap and is properly positioned */
  html[data-style="modern"] .ps-modern-status {
    flex-shrink: 0;
    /* Don't use margin-top: auto which can cause large gaps when viewport shrinks */
    margin-top: 0.5rem;
    padding-top: 0;
    /* Minimal bottom padding - keyboard offset handled by sidebar */
    padding-bottom: calc(0.25rem + env(safe-area-inset-bottom, 0px));
    margin-bottom: 0;
    background: var(--ps-surface);
  }

  /* (Padding is handled on .ps-modern-browser above) */
}


/* Modern sidebar: keep search sticky */
html[data-style="modern"] .ps-modern-browser>.field {
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--ps-surface);
  padding-bottom: 0.5rem;
}

/* Make select-songbooks and ps-modern-search smaller */
html[data-style="modern"] #select-songbooks,
html[data-style="modern"] #select-songbooks.select select {
  font-size: 0.875rem;
  padding: 0.375rem 2.5rem 0.375rem 0.5rem;
  height: auto;
  min-height: 2rem;
  line-height: 1.25rem;
}

/* Fix select arrow alignment for smaller select */
html[data-style="modern"] #ps-table-songbook-field .select {
  height: auto;
  min-height: 2rem;
}

html[data-style="modern"] #ps-table-songbook-field .select::after {
  top: 50%;
  margin-top: -0.375em;
  right: 0.75rem;
}

html[data-style="modern"] .ps-modern-browser #ps-modern-search.input {
  font-size: 0.875rem;
  padding: 0.375rem 0.5rem 0.375rem 2.25rem;
  height: auto;
  min-height: 2rem;
  line-height: 1.25rem;
}

html[data-style="modern"] .ps-modern-browser .control.has-icons-left .icon.is-left {
  height: 2rem;
  width: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 0;
}

html[data-style="modern"] .ps-modern-browser .control.has-icons-left .icon.is-left ion-icon {
  font-size: 1rem;
  line-height: 1;
}

/* Mobile: fix ps-modern-search focus styling */
@media (max-width: 835px) {

  /* Prevent iOS zoom on focus (16px minimum prevents auto-zoom) */
  html[data-style="modern"] .ps-modern-browser #ps-modern-search,
  html[data-style="modern"] #select-songbooks,
  html[data-style="modern"] .ps-transpose-select {
    font-size: 16px;
  }

  /* Completely override focus styles - remove all shadows/outlines, use clean border only */
  html[data-style="modern"] .ps-modern-browser #ps-modern-search.input:focus,
  html[data-style="modern"] .ps-modern-browser #ps-modern-search:focus {
    outline: none !important;
    outline-width: 0 !important;
    outline-style: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    border-color: var(--ps-link) !important;
    border-width: 2px !important;
    border-style: solid !important;
  }

  /* Ensure field and control containers don't interfere */
  html[data-style="modern"] .ps-modern-browser>.field,
  html[data-style="modern"] .ps-modern-browser>.field .control {
    overflow: visible;
  }

  /* Fix focus styling for select-songbooks on mobile */
  html[data-style="modern"] #select-songbooks:focus,
  html[data-style="modern"] #select-songbooks.select select:focus {
    outline: none !important;
    outline-width: 0 !important;
    outline-style: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    border-color: var(--ps-link) !important;
    border-width: 2px !important;
    border-style: solid !important;
  }

  /* Fix focus styling for ps-transpose-select on mobile */
  html[data-style="modern"] .ps-transpose-select:focus,
  html[data-style="modern"] .ps-transpose-select-wrap select:focus {
    outline: none !important;
    outline-width: 0 !important;
    outline-style: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    border-color: var(--ps-link) !important;
    border-width: 2px !important;
    border-style: solid !important;
  }

  /* Ensure select containers don't clip focus rings */
  html[data-style="modern"] #ps-table-songbook-field,
  html[data-style="modern"] #ps-table-songbook-field .control,
  html[data-style="modern"] #ps-table-songbook-field .select,
  html[data-style="modern"] .ps-transpose-select-wrap {
    overflow: visible;
  }
}


/* Mobile Modern: sidebar overlay (visibility toggle) - iPad 11" (834px) gets desktop sidebar */
@media (max-width: 835px) {
  html[data-style="modern"] .ps-sidebar {
    display: none;
  }

  html[data-style="modern"] .ps-sidebar.is-active {
    display: flex;
  }
}

/* Modern table: actions row layout (left actions + right video) */
html[data-style="modern"][data-page="table"] #ps-song-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-bottom: 0.25rem;
  margin-bottom: 0;
}

html[data-style="modern"][data-page="table"] #ps-song-actions .ps-actions-left,
html[data-style="modern"][data-page="table"] #ps-song-actions .ps-actions-right {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

html[data-style="modern"][data-page="table"] #ps-song-actions .ps-actions-right {
  flex: 0 0 auto;
}

/* Compact transpose controls (mobile): select replaces the chord key row */
html[data-style="modern"] .transpose-keys.ps-transpose-compact a {
  display: none !important;
}

html[data-style="modern"] .transpose-keys.ps-transpose-compact {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

html[data-style="modern"] .transpose-keys .ps-transpose-select-wrap {
  margin-right: 0.25rem;
  height: 2rem;
}

html[data-style="modern"] .transpose-keys .ps-transpose-select-wrap select {
  height: 2rem;
  padding-top: 0;
  padding-bottom: 0;
  line-height: normal;
  display: flex;
  align-items: center;
}

/* Font size adjustment buttons (mobile) */
html[data-style="modern"] .transpose-keys .ps-font-size-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: 0.25rem;
}

html[data-style="modern"] .transpose-keys .ps-font-size-btn {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid var(--ps-border);
  background: transparent;
  color: var(--ps-text);
  cursor: pointer;
  vertical-align: middle;
}

html[data-style="modern"] .transpose-keys .ps-font-size-btn:hover {
  background: var(--ps-surface-2);
}

html[data-style="modern"] .transpose-keys .ps-font-size-btn .ps-font-size-icon {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 0;
  margin-top: -1px;
}

/* Mobile: slightly smaller action buttons to save space */
@media (max-width: 835px) {
  html[data-style="modern"][data-page="table"] #song_section_div .buttons .button {
    width: 2.25rem;
    height: 2.25rem;
  }

  html[data-style="modern"][data-page="table"] #ps-song-actions .ps-actions-left,
  html[data-style="modern"][data-page="table"] #ps-song-actions .ps-actions-right {
    gap: 0.35rem;
  }

  /* Mobile: reduce padding on song section container for more lyrics space */
  html[data-style="modern"][data-page="table"] .ps-content {
    padding: 0.25rem;
  }

  /* Reduce container padding on mobile for table page */
  html[data-style="modern"][data-page="table"] .ps-table-page.container.is-fluid {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  /* Remove Bulma column padding on song section div for mobile */
  html[data-style="modern"][data-page="table"] #song_section_div.column {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Mobile: ensure song section fills viewport height */
  html[data-style="modern"][data-page="table"] .ps-content {
    height: 100%;
    min-height: calc(100vh - var(--ps-topbar-height));
    padding-bottom: 0;
  }

  html[data-style="modern"][data-page="table"] .ps-table-page {
    height: 100%;
    min-height: calc(100vh - var(--ps-topbar-height));
    margin-bottom: 0;
    padding-bottom: 0;
  }

  html[data-style="modern"][data-page="table"] #song_section_div {
    height: 100%;
    min-height: calc(100vh - var(--ps-topbar-height));
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  html[data-style="modern"][data-page="table"] #song_section_div .box {
    padding: 0.5rem;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px) + 3rem);
    height: 100%;
    min-height: 100%;
    overflow-y: auto;
    overflow-x: visible;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: manipulation;
    margin-bottom: 0;
  }

  html[data-style="modern"][data-page="table"] #song_section_div .song-lyrics-container {
    padding: 0.75rem;
    padding-bottom: 0.75rem;
    margin-bottom: 0;
  }

  html[data-style="modern"][data-page="table"] #song_section_div .ps-song-scroll {
    /* No longer the scroll container - just a regular wrapper */
    padding-bottom: 0.5rem;
  }

  /* Ensure last content element is fully scrollable on mobile */
  html[data-style="modern"][data-page="table"] #song_section_div .ps-song-scroll>div[lang] {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px) + 3rem);
  }

  html[data-style="modern"][data-page="table"] #song_section_div .song-note:last-child,
  html[data-style="modern"][data-page="table"] #song_section_div .song-metadata:last-child {
    margin-bottom: calc(1rem + env(safe-area-inset-bottom, 0px) + 3rem);
  }

  /* Mobile: reduce padding on song page for more lyrics space (modern style) */
  html[data-style="modern"] .ps-content {
    padding: 0.25rem;
    padding-bottom: calc(0.25rem + env(safe-area-inset-bottom, 0px) + 4rem);
    height: 100%;
    min-height: 0;
  }

  html[data-style="modern"] #song_viewer.container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 0;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px) + 3rem);
  }

  html[data-style="modern"] .song-content {
    padding: 0.5rem !important;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px) + 3rem) !important;
  }

  html[data-style="modern"] .song-lyrics-container {
    padding: 0.5rem !important;
    padding-bottom: 0.75rem !important;
  }

  /* Ensure last content elements are fully scrollable on mobile song page */
  html[data-style="modern"] .song-actions {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px) + 3rem);
  }

  html[data-style="modern"] .song-note:last-child,
  html[data-style="modern"] .song-metadata:last-child,
  html[data-style="modern"] .song-versions:last-child {
    margin-bottom: calc(1rem + env(safe-area-inset-bottom, 0px) + 3rem);
  }
}

/* -------------------------------------------------------------------------- */
/* Navbar burger: dropdown on desktop (non-table), sidebar toggle on mobile  */
/* -------------------------------------------------------------------------- */

/* By default: hide both, show nav dropdown on desktop non-table pages */
.ps-nav-dropdown {
  display: none;
}

/* Hide sidebar burger on desktop - must override html[data-style="modern"] #ps-sidebar-toggle.navbar-burger */
html[data-style="modern"] #ps-sidebar-toggle.ps-sidebar-burger,
html[data-style="simple"] #ps-sidebar-toggle.ps-sidebar-burger,
#ps-sidebar-toggle.ps-sidebar-burger.navbar-burger {
  display: none !important;
}

/* Desktop (> 835px): show nav dropdown, hide sidebar burger */
@media (min-width: 836px) {
  .ps-nav-dropdown {
    display: block;
  }

  /* On table page, hide nav dropdown (sidebar handles navigation) */
  html[data-page="table"] .ps-nav-dropdown {
    display: none;
  }
}

/* Mobile (≤ 835px): show sidebar burger, hide nav dropdown */
@media (max-width: 835px) {

  /* Override the desktop hide rule */
  html[data-style="modern"] #ps-sidebar-toggle.ps-sidebar-burger,
  html[data-style="simple"] #ps-sidebar-toggle.ps-sidebar-burger,
  #ps-sidebar-toggle.ps-sidebar-burger.navbar-burger {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  .ps-nav-dropdown {
    display: none !important;
  }
}

/* Style the nav dropdown burger like other topbar buttons */
.ps-nav-dropdown .ps-nav-burger {
  height: var(--ps-topbar-height);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 2.5rem;
  min-width: 2.5rem;
  cursor: pointer;
}

/* Ensure the burger lines are styled */
.ps-nav-burger span {
  background-color: currentColor;
}

/* Sidebar burger styling for mobile */
.ps-sidebar-burger {
  height: var(--ps-topbar-height);
  padding: 0;
  width: 2.5rem;
  min-width: 2.5rem;
}

/* Prevent burger buttons from retaining focus/active state on mobile */
.navbar-burger,
#ps-sidebar-toggle,
.ps-sidebar-burger,
.ps-nav-burger {
  -webkit-tap-highlight-color: transparent !important;
  box-shadow: none !important;
}

.navbar-burger:focus,
.navbar-burger:active,
.navbar-burger:focus-visible,
.navbar-burger:hover,
.navbar-burger:hover:active,
#ps-sidebar-toggle:focus,
#ps-sidebar-toggle:active,
#ps-sidebar-toggle:focus-visible,
#ps-sidebar-toggle:hover,
#ps-sidebar-toggle:hover:active,
.ps-sidebar-burger:focus,
.ps-sidebar-burger:active,
.ps-sidebar-burger:focus-visible,
.ps-sidebar-burger:hover,
.ps-sidebar-burger:hover:active,
.ps-nav-burger:focus,
.ps-nav-burger:active,
.ps-nav-burger:focus-visible,
.ps-nav-burger:hover,
.ps-nav-burger:hover:active {
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Fix navbar-burger to show 3 lines (hamburger) instead of 2 */
.navbar-burger span:first-child {
  top: calc(50% - 7px) !important;
}

.navbar-burger span:nth-child(2) {
  top: calc(50% - 1px) !important;
}

.navbar-burger span:nth-child(3),
.navbar-burger span:last-child {
  top: calc(50% + 5px) !important;
}

/* More specific rules for modern style burger */
html[data-style="modern"] #ps-sidebar-toggle.navbar-burger,
html[data-style="modern"] #ps-sidebar-toggle.ps-sidebar-burger {
  box-shadow: none !important;
}

html[data-style="modern"] #ps-sidebar-toggle.navbar-burger:focus,
html[data-style="modern"] #ps-sidebar-toggle.navbar-burger:active,
html[data-style="modern"] #ps-sidebar-toggle.ps-sidebar-burger:focus,
html[data-style="modern"] #ps-sidebar-toggle.ps-sidebar-burger:active {
  box-shadow: none !important;
  outline: none !important;
}

/* Remove shadow from parent navbar-item when burger is clicked */
.ps-topbar-actions .navbar-item:has(#ps-sidebar-toggle:active),
.ps-topbar-actions .navbar-item:has(#ps-sidebar-toggle:focus),
.ps-topbar-actions .navbar-item:has(.ps-sidebar-burger:active),
.ps-topbar-actions .navbar-item:has(.ps-sidebar-burger:focus) {
  box-shadow: none !important;
}

/* Fallback for browsers without :has() support */
.ps-topbar-actions .navbar-item:active,
.ps-topbar-actions .navbar-item:focus {
  box-shadow: none !important;
}