/* ============================================
   TABLET OPTIMIZATION - GoodNotes-Style Top Bar
   ============================================
   
   Target: iPad Mini (768px) through iPad Pro 12.9" (1366px)
   
   This file is loaded LAST to override all mobile CSS rules.
   It must use !important to beat mobile-bottom-nav.css and
   mobile-nav-redesign.css which also use !important.
   
   Device classification:
   - Phone:   < 768px  → mobile bottom nav (unchanged)
   - Tablet:  768–1366px → GoodNotes top bar (this file)
   - Desktop: > 1366px → sidebar + desktop nav (unchanged)
   
   TWO body classes:
   - body.tablet-device  → always present on tablets (any page)
   - body.tablet-mode    → ONLY on Bible content page (top bar active)
*/

/* ============================================
   SECTION A: BIBLE CONTENT PAGE (tablet-mode)
   ============================================
   Hide all mobile nav, show tablet top bar, hide sidebar.
   Only applies when body.tablet-mode is present (Bible content page).
*/
@media (min-width: 768px) and (max-width: 1366px) {
  
  /* ---- HIDE MOBILE NAVIGATION ELEMENTS ---- */
  
  body.tablet-mode .mobile-bottom-nav,
  body.tablet-mode .mobile-bottom-nav.mobile-nav-redesign,
  body.tablet-mode nav.mobile-bottom-nav,
  body.tablet-mode .mobile-nav-redesign,
  body.tablet-mode .mobile-nav-item {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    overflow: hidden !important;
  }
  
  body.tablet-mode .mobile-hero-navigation,
  body.tablet-mode #mobileHeroNav {
    display: none !important;
    visibility: hidden !important;
  }
  
  body.tablet-mode .mobile-bible-navigator,
  body.tablet-mode .mobile-bible-navigator.mobile-bible-nav-compact,
  body.tablet-mode #mobile-bible-navigator {
    display: none !important;
    visibility: hidden !important;
  }
  
  body.tablet-mode .mobile-menu-btn,
  body.tablet-mode .mobile-menu-overlay,
  body.tablet-mode .mobile-menu-sidebar {
    display: none !important;
    visibility: hidden !important;
  }
  
  body.tablet-mode .mobile-modes-popup {
    display: none !important;
  }
  
  /* Hide desktop sidebar on Bible content page (top bar replaces it) */
  body.tablet-mode .sidebar,
  body.tablet-mode #sidebar,
  body.tablet-mode nav.sidebar {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
  }
  
  /* Hide the top navbar on Bible content page */
  body.tablet-mode .top-navbar,
  body.tablet-mode #top-navbar {
    display: none !important;
  }
  
  /* ---- RESET BODY/WRAPPER FOR TABLET BIBLE CONTENT ---- */
  
  body.tablet-mode,
  body.tablet-mode.notes-mode-active,
  body.tablet-mode.reader-mode-active,
  body.tablet-mode.ai-mode-active {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }
  
  body.tablet-mode .main-wrapper,
  body.tablet-mode .main-wrapper.sidebar-collapsed,
  body.tablet-mode .main-wrapper.sidebar-expanded,
  body.tablet-mode.notes-mode-active .main-wrapper,
  body.tablet-mode.reader-mode-active .main-wrapper,
  body.tablet-mode.ai-mode-active .main-wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    transition: none !important;
  }
  
  /* Override mobile-bottom-nav.css — tablet top bar replaces it */
  body.tablet-mode .bible-navigation-header {
    display: none !important;
  }
  
  /* ---- BIBLE CONTENT LAYOUT & CARD APPEARANCE (match desktop) ---- */
  
  body.tablet-mode .bible-book-content {
    padding-top: 70px !important; /* Space for tablet top bar */
    margin: 0 !important;
    width: 100% !important;
  }
  
  /* Restore the desktop card appearance (responsive-design.css strips it all) */
  body.tablet-mode .chapter-content,
  body.tablet-mode .bible-chapter-content,
  body.tablet-mode #chapter-content {
    max-width: 660px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
    padding: 2.5rem 3rem !important;
    line-height: 2.2 !important;
    font-size: var(--bible-font-size, 1.1rem) !important;
    background: var(--bible-bg-primary, #ffffff) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15) !important;
    border: none !important;
    color: var(--bible-text-primary) !important;
    text-align: justify !important;
    text-justify: inter-word !important;
    box-sizing: border-box !important;
  }
  
  /* Dark mode: glowing border on the card */
  [data-theme="dark"] body.tablet-mode .chapter-content,
  body.tablet-mode [data-theme="dark"] .chapter-content,
  [data-theme="dark"] body.tablet-mode #chapter-content {
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: var(--bible-shadow-light, 0 3px 10px rgba(124,58,237,0.08)),
      0 0 20px rgba(255, 255, 255, 0.1),
      0 0 40px rgba(255, 255, 255, 0.05),
      inset 0 0 20px rgba(255, 255, 255, 0.02) !important;
  }
  
  body.tablet-mode .bible-content-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* ---- DOUBLE COLUMN = CSS COLUMNS WITH DIVIDER ---- */
  /* Override the 720px max-width and use CSS column-count for true two-column layout.
     Uses body.tablet-mode.tablet-double-col for higher specificity. */
  body.tablet-mode.tablet-double-col .chapter-content,
  body.tablet-mode.tablet-double-col #chapter-content,
  body.tablet-mode.tablet-double-col .bible-chapter-content {
    max-width: 88% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 3rem !important;
    padding-right: 3rem !important;
    column-count: 2 !important;
    column-gap: 3.5rem !important;
    column-rule: 1px solid rgba(0, 0, 0, 0.12) !important;
  }

  /* Dark mode column divider */
  body.dark-mode.tablet-mode.tablet-double-col .chapter-content,
  body.dark-mode.tablet-mode.tablet-double-col #chapter-content,
  body.dark-mode.tablet-mode.tablet-double-col .bible-chapter-content,
  [data-theme="dark"] body.tablet-mode.tablet-double-col .chapter-content,
  [data-theme="dark"] body.tablet-mode.tablet-double-col #chapter-content,
  [data-theme="dark"] body.tablet-mode.tablet-double-col .bible-chapter-content {
    column-rule-color: rgba(255, 255, 255, 0.12) !important;
  }
  
  /* ---- TABLET TOP BAR ---- */
  
  body.tablet-mode .tablet-top-bar {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* ---- VERSE NUMBER STYLING (restore desktop pill/badge look) ---- */
  /* responsive-design.css (1025-1366px) strips .v to display: inline, 
     background: none, border: none, padding: 0.8em 0.
     We restore the desktop purple pill look from bible-content.css. */
  
  body.tablet-mode .chapter-content .v,
  body.tablet-mode #chapter-content .v {
    cursor: pointer !important;
    pointer-events: auto !important;
    display: inline-block !important;
    font-size: 0.75em !important;
    vertical-align: super !important;
    color: var(--bible-text-verse-num, #7c3aed) !important;
    font-weight: 600 !important;
    margin-right: 0.4rem !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    padding: 3px 6px !important;
    border-radius: 4px !important;
    font-family: 'Georgia', serif !important;
    min-width: 20px !important;
    text-align: center !important;
    line-height: 1 !important;
    border: 2px solid transparent !important;
    box-sizing: border-box !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
  }
  
  /* ---- NOTES PANEL (slide-in from LEFT for tablet) ---- */
  
  /* Override mobile CSS that hides .notes-panel with display:none */
  body.tablet-device .notes-panel,
  body.tablet-mode .notes-panel {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    left: 0 !important;
    right: auto !important;
    top: 56px !important;
    height: calc(100vh - 56px) !important;
    width: 380px !important;
    max-width: 85vw !important;
    z-index: 9999 !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: var(--bg-primary, #fff) !important;
    border-right: 1px solid var(--border-color, rgba(0,0,0,0.08)) !important;
    border-left: none !important;
    box-shadow: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    visibility: hidden !important;
  }

  /* When panel is active/visible, slide in from left */
  body.tablet-device .notes-panel.active,
  body.tablet-device.notes-panel-visible .notes-panel,
  body.tablet-mode .notes-panel.active,
  body.tablet-mode.notes-panel-visible .notes-panel {
    transform: translateX(0) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12) !important;
    visibility: visible !important;
  }

  /* Dark mode */
  [data-theme="dark"] body.tablet-device .notes-panel,
  [data-theme="dark"] body.tablet-mode .notes-panel {
    background: var(--bg-primary, #1a1a2e) !important;
    border-right-color: rgba(255, 255, 255, 0.08) !important;
  }
  [data-theme="dark"] body.tablet-device .notes-panel.active,
  [data-theme="dark"] body.tablet-mode .notes-panel.active {
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.3) !important;
  }

  /* Notes panel header styling for tablet */
  body.tablet-device .notes-panel-header,
  body.tablet-mode .notes-panel-header {
    padding: 16px 18px 12px !important;
    border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.06)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-shrink: 0 !important;
  }

  /* Notes panel content fills remaining space */
  body.tablet-device .notes-panel-content,
  body.tablet-mode .notes-panel-content {
    flex: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 20px !important;
  }

  /* Hide the resize handle on tablet (not needed for fixed panel) */
  body.tablet-device .notes-panel-resize-handle,
  body.tablet-mode .notes-panel-resize-handle {
    display: none !important;
  }

  /* Hide folder tabs on tablet (keep UI clean) */
  body.tablet-device .notes-folder-tabs,
  body.tablet-mode .notes-folder-tabs {
    display: none !important;
  }

  /* Shalom sidebar same treatment */
  body.tablet-device .shalom-sidebar,
  body.tablet-mode .shalom-sidebar {
    position: fixed !important;
    left: 0 !important;
    right: auto !important;
    top: 56px !important;
    height: calc(100vh - 56px) !important;
    width: 380px !important;
    max-width: 85vw !important;
    z-index: 9999 !important;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  body.tablet-device .shalom-sidebar.visible,
  body.tablet-mode .shalom-sidebar.visible {
    transform: translateX(0) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12) !important;
  }

  /* Don't push main content when panel opens */
  body.tablet-device.notes-mode-active .main-wrapper,
  body.tablet-device.notes-panel-visible .main-wrapper,
  body.tablet-mode.notes-mode-active .main-wrapper,
  body.tablet-mode.notes-panel-visible .main-wrapper {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  /* ---- NOTES PANEL BACKDROP SCRIM ---- */
  .tablet-notes-backdrop {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }
  .tablet-notes-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
  }
  [data-theme="dark"] .tablet-notes-backdrop {
    background: rgba(0, 0, 0, 0.45);
  }

  /* ---- NOTES PANEL BUTTON ACTIVE STATE ---- */
  body.tablet-device .tablet-action-btn.active {
    background: rgba(124, 58, 237, 0.15) !important;
    color: var(--bible-text-verse-num, #7c3aed) !important;
  }
}

/* ============================================
   SECTION B: ALL TABLET PAGES (tablet-device)
   ============================================
   General tablet adjustments that apply everywhere:
   home, Bible content, church fathers, etc.
*/
@media (min-width: 768px) and (max-width: 1366px) {

  /* ---- AI PANEL FIX ---- */
  /* The AI panel is hidden off-screen via right: -410px in ai-chat.css.
     Our old CSS was overriding that to right: 0, making it visible.
     Now we ONLY bring it on-screen when it has .active class. */
  
  body.tablet-device .ai-chat-panel:not(.active) {
    right: calc(-400px - 30px) !important; /* Keep off-screen */
    pointer-events: none !important;
  }
  
  body.tablet-device .ai-chat-panel.active {
    position: fixed !important;
    right: 0 !important;
    top: 60px !important;
    height: calc(100vh - 60px) !important;
    width: 400px !important;
    max-width: 90vw !important;
    z-index: 9999 !important;
    pointer-events: auto !important;
  }
  
  /* When AI panel is open on Bible content page, don't shift main content */
  body.tablet-mode.ai-panel-open .main-wrapper {
    margin-right: 0 !important;
    width: 100% !important;
  }
  
  /* ---- HOME PAGE: BIGGER GREETING TITLE ---- */
  
  body.tablet-device .shalom-welcome .shalom-title {
    font-size: clamp(3.5rem, 7vw, 5rem) !important;
    letter-spacing: -4px !important;
  }
  
  body.tablet-device .shalom-welcome .shalom-subtitle {
    font-size: clamp(1.2rem, 2.5vw, 1.6rem) !important;
  }
  
  /* ---- HIDE MOBILE NAV ON ALL TABLET PAGES ---- */
  /* Even on non-Bible pages, we want the desktop sidebar, not mobile nav */
  
  body.tablet-device .mobile-bottom-nav,
  body.tablet-device .mobile-bottom-nav.mobile-nav-redesign,
  body.tablet-device nav.mobile-bottom-nav,
  body.tablet-device .mobile-nav-redesign {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }
  
  body.tablet-device .mobile-menu-btn {
    display: none !important;
  }
  
  body.tablet-device .mobile-hero-navigation,
  body.tablet-device #mobileHeroNav {
    display: none !important;
  }
  
  /* ---- RESTORE DESKTOP SIDEBAR ON NON-BIBLE PAGES ---- */
  /* mobile-bottom-nav.css hides sidebar at max-width: 1366px with !important.
     sidebar.css sets transform: translateX(-100%) at max-width: 1366px.
     We restore the sidebar with EXPAND/COLLAPSE support, matching desktop. */
  
  /* Base sidebar visibility — overrides mobile-bottom-nav.css nuclear hide */
  body.tablet-device:not(.tablet-mode) .sidebar,
  body.tablet-device:not(.tablet-mode) .sidebar.collapsed,
  body.tablet-device:not(.tablet-mode) .sidebar.expanded,
  body.tablet-device:not(.tablet-mode) .sidebar.mobile-open,
  body.tablet-device:not(.tablet-mode) #sidebar,
  body.tablet-device:not(.tablet-mode) nav.sidebar {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    height: 100vh !important;
    transform: translateX(0) !important; /* Override sidebar.css translateX(-100%) */
    z-index: 1100 !important;
    flex-direction: column !important;
    transition: width 0.25s ease !important;
    overflow: visible !important;
    box-shadow: none !important; /* No drop shadow — match desktop */
  }
  
  /* Collapsed sidebar = 60px icon-only */
  body.tablet-device:not(.tablet-mode) .sidebar.collapsed,
  body.tablet-device:not(.tablet-mode) #sidebar.collapsed {
    width: 60px !important;
  }
  
  /* Expanded sidebar = 250px with labels visible */
  body.tablet-device:not(.tablet-mode) .sidebar:not(.collapsed),
  body.tablet-device:not(.tablet-mode) #sidebar:not(.collapsed) {
    width: 250px !important;
  }
  
  body.tablet-device:not(.tablet-mode) .sidebar-container {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: static !important;
    left: auto !important;
    z-index: auto !important;
  }
  
  /* ALL sidebar children must be clickable (overrides mobile-bottom-nav.css pointer-events: none) */
  body.tablet-device:not(.tablet-mode) .sidebar *,
  body.tablet-device:not(.tablet-mode) .sidebar a,
  body.tablet-device:not(.tablet-mode) .sidebar button,
  body.tablet-device:not(.tablet-mode) .sidebar .sidebar-item,
  body.tablet-device:not(.tablet-mode) .sidebar .sidebar-toggle,
  body.tablet-device:not(.tablet-mode) .sidebar .sidebar-text,
  body.tablet-device:not(.tablet-mode) .sidebar .sidebar-icon {
    pointer-events: auto !important;
    cursor: pointer !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* Hide text labels when collapsed */
  body.tablet-device:not(.tablet-mode) .sidebar.collapsed .sidebar-text {
    display: none !important;
  }
  
  body.tablet-device:not(.tablet-mode) .sidebar.collapsed .sidebar-item {
    justify-content: center !important;
    padding-left: 0 !important;
  }
  
  /* Show text labels when expanded */
  body.tablet-device:not(.tablet-mode) .sidebar:not(.collapsed) .sidebar-text {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  body.tablet-device:not(.tablet-mode) .sidebar:not(.collapsed) .sidebar-item {
    justify-content: flex-start !important;
    padding-left: 16px !important;
    gap: 12px !important;
  }
  
  /* Hide top-navbar on non-Bible tablet pages (desktop doesn't show it either) */
  body.tablet-device:not(.tablet-mode) .top-navbar,
  body.tablet-device:not(.tablet-mode) #top-navbar {
    display: none !important;
  }
  
  /* Main wrapper transitions for sidebar expand/collapse */
  body.tablet-device:not(.tablet-mode) .main-wrapper,
  body.tablet-device:not(.tablet-mode) .main-wrapper.sidebar-collapsed,
  body.tablet-device:not(.tablet-mode) .main-wrapper.sidebar-expanded {
    padding-left: 0 !important;
    transition: margin-left 0.25s ease, width 0.25s ease !important;
  }
  
  /* Main wrapper when sidebar is collapsed (60px) */
  body.tablet-device:not(.tablet-mode) .main-wrapper.sidebar-collapsed {
    margin-left: 60px !important;
    width: calc(100% - 60px) !important;
  }
  
  /* Main wrapper when sidebar is expanded (250px) */
  body.tablet-device:not(.tablet-mode) .main-wrapper:not(.sidebar-collapsed) {
    margin-left: 250px !important;
    width: calc(100% - 250px) !important;
  }
  
  /* ---- VERSE SELECTION ON TABLET BIBLE PAGES ---- */
  /* Ensure verse highlighting is visible across the full tablet range (768-1366) */
  /* Base .v styling is set above in Section A. Here just hover + selected states. */

  body.tablet-mode .chapter-content .v.selected,
  body.tablet-mode #chapter-content .v.selected,
  body.tablet-mode .bible-book-content .chapter-content .v.selected {
    background: var(--user-highlight-selected, var(--bible-verse-selected-bg, rgba(145, 56, 229, 0.15))) !important;
    border: 2px solid var(--user-highlight-border, var(--bible-border-verse-selected, rgba(145, 56, 229, 0.4))) !important;
    color: var(--user-highlight-text, var(--bible-border-verse-selected, #7c3aed)) !important;
    font-weight: inherit !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: 0 2px 4px rgba(145, 56, 229, 0.2) !important;
    border-radius: 6px !important;
    padding: 4px 7px !important;
    display: inline-block !important;
    min-width: 22px !important;
    text-align: center !important;
    position: relative !important;
  }
  
  body.tablet-mode .chapter-content .v:hover,
  body.tablet-mode #chapter-content .v:hover {
    background: var(--user-highlight-bg-20, var(--bible-verse-hover-bg, rgba(145, 56, 229, 0.08))) !important;
    border-color: var(--user-highlight-border, var(--bible-border-verse-hover, rgba(145, 56, 229, 0.25))) !important;
  }
  
  body.tablet-mode .verse-text.underline {
    text-decoration: underline !important;
    text-decoration-color: var(--user-highlight-border, var(--bible-border-verse-selected, rgba(145, 56, 229, 0.4))) !important;
    text-underline-offset: 4px !important;
  }
  
  /* Verse with drawn note — faint ink-purple indicator */
  body.tablet-mode .v.verse-with-drawn-note {
    background: rgba(99, 102, 241, 0.08) !important;
    border-color: rgba(99, 102, 241, 0.2) !important;
    cursor: pointer !important;
  }
  
  body.tablet-mode .v.verse-with-drawn-note::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #6366f1;
  }

  [data-theme="dark"] body.tablet-mode .v.verse-with-drawn-note {
    background: rgba(129, 140, 248, 0.1) !important;
    border-color: rgba(129, 140, 248, 0.25) !important;
  }

  [data-theme="dark"] body.tablet-mode .v.verse-with-drawn-note::after {
    background: #818cf8;
  }
  
  /* Ensure verse text is also clickable */
  body.tablet-mode .verse-text,
  body.tablet-mode .verse-text-wrapper {
    cursor: pointer !important;
    pointer-events: auto !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
  }
  
  /* Override responsive-design.css paragraph flattening */
  body.tablet-mode .chapter-content p {
    margin-bottom: 1.2em !important;
    text-align: justify !important;
    padding: 0 !important;
    max-width: none !important;
  }
  
  /* Override responsive-design.css pseudo-element strip */
  body.tablet-mode .chapter-content::before,
  body.tablet-mode .chapter-content::after {
    display: none !important;
  }

  /* ---- BOOKS PANEL: PUSH CONTENT LIKE DESKTOP ---- */
  /* mobile-nav-redesign.css (max-width: 1366px) forces the books panel 
     to slide-over as overlay. On tablets we restore desktop push behavior:
     panel pushes main content right, no blur overlay. */

  /* Restore panel desktop width/shape */
  body.tablet-device .books-panel,
  body.tablet-device #books-panel-slide,
  body.tablet-device .books-panel-slide {
    width: 320px !important;
    max-width: 320px !important;
    border-radius: 0 !important;
    box-shadow: 1px 0 3px rgba(0, 0, 0, 0.08) !important;
  }
  
  /* Content push — margin-left matches panel width */
  body.tablet-device.books-panel-active .main-wrapper,
  body.tablet-device.books-panel-active #main-wrapper,
  body.tablet-device.books-panel-active.notes-mode-active .main-wrapper,
  body.tablet-device.books-panel-active.notes-mode-active #main-wrapper {
    margin-left: 320px !important;
    transform: none !important;
    transition: margin-left 0.3s ease !important;
  }
  
  /* Hide sidebar when books panel is open (like desktop) */
  body.tablet-device.books-panel-active .sidebar {
    left: -250px !important;
    pointer-events: none !important;
  }
  
  body.tablet-device.books-panel-active .sidebar.collapsed {
    left: -60px !important;
  }
  
  /* No blur overlay on tablets (desktop doesn't use one) */
  body.tablet-device .books-panel-overlay,
  body.tablet-device #books-panel-overlay {
    display: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
  }
  
  /* ---- TRANSLATION PANEL: PUSH CONTENT LIKE DESKTOP ---- */
  /* Same treatment as books panel — no overlay, push content. */
  
  body.tablet-device .translation-panel {
    width: 320px !important;
    max-width: 320px !important;
    border-radius: 0 !important;
    box-shadow: 1px 0 3px rgba(0, 0, 0, 0.08) !important;
  }
  
  body.tablet-device .translation-panel-overlay {
    display: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none !important;
  }
}

/* ============================================
   PHONE RANGE: Keep existing behavior below 768px
   ============================================ */
@media (max-width: 767px) {
  .tablet-top-bar {
    display: none !important;
    visibility: hidden !important;
  }
}

/* ============================================
   DESKTOP RANGE: Keep existing behavior above 1366px
   ============================================ */
@media (min-width: 1367px) {
  .tablet-top-bar {
    display: none !important;
    visibility: hidden !important;
  }
}

/* ============================================
   SECTION C: TABLET PAGE-SPECIFIC OVERRIDES
   ============================================
   Override mobile-nav-redesign.css which makes cards/tiles
   too small for tablet screens.
*/
@media (min-width: 768px) and (max-width: 1366px) {

  /* ---- CHURCH FATHERS PAGE ---- */
  /* mobile-nav-redesign.css forces 2-col tiny cards at <=1366px.
     On tablets, show 3 cols with bigger avatars and readable text. */

  body.tablet-device .cf-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
    padding: 0 16px !important;
  }

  body.tablet-device .cf-card {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 20px 16px !important;
    border-radius: 14px !important;
    gap: 10px !important;
  }

  body.tablet-device .cf-card .cf-avatar,
  body.tablet-device .cf-avatar {
    width: 64px !important;
    height: 64px !important;
    min-width: 64px !important;
    font-size: 22px !important;
  }

  body.tablet-device .cf-card .cf-avatar img {
    width: 64px !important;
    height: 64px !important;
  }

  body.tablet-device .cf-card .cf-name,
  body.tablet-device .cf-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-bottom: 4px !important;
    line-height: 1.3 !important;
  }

  body.tablet-device .cf-card .cf-meta,
  body.tablet-device .cf-meta {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  body.tablet-device .cf-card .cf-role,
  body.tablet-device .cf-role {
    font-size: 11px !important;
    margin-top: 2px !important;
  }

  body.tablet-device .cf-title {
    font-size: 28px !important;
  }

  body.tablet-device .cf-subtitle {
    font-size: 14px !important;
  }

  /* ---- BIBLE STUDIES PAGE ---- */
  /* mobile-nav-redesign.css forces minmax(140px, 1fr) tiny cards.
     On tablets, show 2-3 properly sized cards per row. */

  body.tablet-device .manage-bibles-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 24px !important;
  }

  body.tablet-device .manage-bibles-card {
    margin-bottom: 0 !important;
  }

  body.tablet-device .manage-bibles-card .card-graph-preview {
    height: 160px !important;
    min-height: 160px !important;
    max-height: 160px !important;
    border-radius: 14px !important;
  }

  body.tablet-device .manage-bibles-card .card-info {
    padding: 12px 16px !important;
  }

  body.tablet-device .manage-bibles-card .card-title {
    font-size: 16px !important;
    margin-bottom: 4px !important;
  }

  body.tablet-device .manage-bibles-card .card-translation-badge,
  body.tablet-device .manage-bibles-card .study-card-notes-count {
    font-size: 12px !important;
    padding: 3px 8px !important;
  }

  body.tablet-device .manage-bibles-header h1 {
    font-size: 28px !important;
  }

  /* ---- SEARCH / AI RESULTS PAGE ---- */
  /* Make verse cards properly sized for tablet. */

  body.tablet-device .search-results-container {
    max-width: 800px !important;
    padding: 1.5rem !important;
    margin: 0 auto !important;
  }

  body.tablet-device .search-results {
    gap: 1.25rem !important;
  }

  body.tablet-device .verse-result {
    padding: 1.25rem !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
  }

  body.tablet-device .verse-result .verse-text {
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
  }

  body.tablet-device .verse-result .verse-ref-text {
    font-size: 0.9rem !important;
  }

  body.tablet-device .search-title {
    font-size: 2rem !important;
  }

  body.tablet-device .search-query {
    font-size: 1.05rem !important;
  }

  /* ---- HIDE FLOATING FABS ON TABLET (moved to top bar) ---- */
  body.tablet-device .mode-toggle-btn-standalone,
  body.tablet-device .notes-graph-fab,
  body.tablet-device #notes-graph-fab,
  body.tablet-device .notes-graph-btn,
  body.tablet-device .create-note-btn,
  body.tablet-device #create-note-btn,
  body.tablet-device .mode-options-radial,
  body.tablet-device .mode-selector-overlay,
  body.tablet-device #mode-toggle-btn,
  body.tablet-device #mode-options {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* ---- VERSE HIGHLIGHT COLOUR FOR NOTE CREATION ---- */
  /* mobile-notes-mode.css forces a nearly-invisible 12% opacity background
     with !important at max-width:1023px, which overrides the dynamic palette
     colours set via inline JS. On tablets we want the real palette colour. */
  body.tablet-device.notes-mode-active .verse-highlighted-for-note,
  body.tablet-device.mobile-create-mode-active .verse-highlighted-for-note {
    /* Let inline JS styles (set with !important) take effect.
       Reset the mobile override to a visible default fallback. */
    background: rgba(0, 188, 212, 0.35) !important;
    border-left: 3px solid rgba(0, 188, 212, 0.8) !important;
    border-radius: 0 4px 4px 0 !important;
    padding: 3px 6px 3px 8px !important;
    margin: 2px 0 !important;
  }

  [data-theme="dark"] body.tablet-device.notes-mode-active .verse-highlighted-for-note,
  [data-theme="dark"] body.tablet-device.mobile-create-mode-active .verse-highlighted-for-note {
    background: rgba(0, 188, 212, 0.4) !important;
    border-left: 3px solid rgba(0, 188, 212, 0.9) !important;
  }

  /* Allow .v (verse number) to show highlight background when selected */
  body.tablet-device .chapter-content .v.verse-highlighted-for-note,
  body.tablet-device #chapter-content .v.verse-highlighted-for-note {
    background: rgba(0, 188, 212, 0.35) !important;
    border-radius: 4px !important;
  }

  /* Ensure graph close button and controls are visible on tablet */
  body.tablet-device .mobile-graph-close-btn {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 10001 !important;
  }

  body.tablet-device .mobile-graph-controls {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 10001 !important;
  }

  body.tablet-device .mobile-graph-title {
    display: flex !important;
    visibility: visible !important;
  }

  /* Hide desktop graph header on tablet (use mobile controls instead) */
  body.tablet-device .study-graph-header {
    display: none !important;
  }

  /* ---- HIDE MOBILE BOTTOM BAR ON TABLET ---- */
  /* Tablets use desktop-style popup notes, not the mobile AI bottom bar */
  body.tablet-device .mobile-verse-ai,
  body.tablet-device .mobile-ai-chat-expanded {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* ---- FAINT VERSE HIGHLIGHTS (verses with existing notes) ---- */
  /* Allow faint highlights to show their inline-styled background color
     on .v spans which normally have background: transparent !important. */
  body.tablet-device .chapter-content .v.verse-with-note-colored,
  body.tablet-device #chapter-content .v.verse-with-note-colored,
  body.tablet-device .chapter-content .v.verse-with-note,
  body.tablet-device #chapter-content .v.verse-with-note {
    background: rgba(156, 39, 176, 0.15) !important;
    border-radius: 4px !important;
  }

  /* Emphasized (active note) verses - bolder look */
  body.tablet-device .chapter-content .v.verse-emphasized,
  body.tablet-device #chapter-content .v.verse-emphasized,
  body.tablet-device .chapter-content .v.verse-emphasized-colored,
  body.tablet-device #chapter-content .v.verse-emphasized-colored {
    background: rgba(156, 39, 176, 0.45) !important;
    border-radius: 4px !important;
  }

  /* Popup-emphasized verses (when popup note is open) - visible fallback */
  body.tablet-device .chapter-content .v.verse-emphasized-popup,
  body.tablet-device #chapter-content .v.verse-emphasized-popup {
    background: rgba(156, 39, 176, 0.45) !important;
    border-radius: 4px !important;
  }

  /* ---- POPUP NOTE CARDS ON TABLET ---- */
  /* Override mobile CSS that hides popup-note-card with display:none */
  body.tablet-device .popup-note-card {
    display: flex !important;
    width: 260px !important;
    min-width: 180px !important;
    max-width: 320px !important;
    min-height: 80px !important;
    max-height: 50vh !important;
    border-radius: 10px !important;
    resize: none !important;        /* Disable resize handle on tablet */
    font-size: 0.92rem !important;
    cursor: grab !important;
    touch-action: none !important;  /* Better touch drag */
  }

  /* Popup connecting line visible on tablet */
  body.tablet-device .popup-note-line {
    display: block !important;
  }

  body.tablet-device .popup-note-card .popup-note-content {
    font-size: 0.88rem !important;
    line-height: 1.45 !important;
    padding: 8px 12px !important;
    max-height: 30vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.tablet-device .popup-note-card .popup-note-header {
    padding: 4px 8px !important;
    min-height: 28px !important;
  }

  body.tablet-device .popup-note-card .popup-note-reference {
    font-size: 0.78rem !important;
    padding: 4px 10px 6px !important;
  }

  body.tablet-device .popup-note-card .popup-note-tabs {
    padding: 2px 6px !important;
    gap: 2px !important;
  }

  body.tablet-device .popup-note-card .popup-note-tab {
    padding: 3px 6px !important;
    font-size: 0.75rem !important;
  }

  /* Close button always visible on tablet (no hover) */
  body.tablet-device .popup-note-card .popup-note-close {
    opacity: 1 !important;
    width: 24px !important;
    height: 24px !important;
  }

  /* Popup editing mode on tablet */
  body.tablet-device .popup-note-card.popup-editing {
    width: 300px !important;
    max-width: 85vw !important;
    max-height: 60vh !important;
  }

  body.tablet-device .popup-note-card.popup-editing .popup-note-textarea {
    font-size: 0.9rem !important;
    min-height: 80px !important;
    max-height: 40vh !important;
  }
}