a {
  text-decoration: none;
}

/* --- GLOBAL SETTINGS --- */
body {
    padding-top: 0; /* Content goes to the very top behind the nav */
}

/* --- MOBILE STYLES (Screen width < 992px) --- */
@media (max-width: 991.98px) {
    .responsive-navbar {
        background-color: transparent; /* Invisible container */
        pointer-events: none;          /* Lets you click "through" the empty space */
    }

.responsive-navbar .navbar-toggler {
        background-color: #212529;     
        pointer-events: auto;          
        
        /* UPDATED: Set a base transparent border so the button size doesn't jump */
        border: 1px solid transparent; 
        
        box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); 
    }
}

/* --- DESKTOP STYLES (Screen width >= 992px) --- */
@media (min-width: 992px) {
    .responsive-navbar {
        background-color: #212529; /* Standard Dark Background */
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        padding-top: 10px;
        padding-bottom: 10px;
    }
    
    /* Since the bar is solid, we generally add body padding back 
       ONLY on desktop so content doesn't get hidden behind the bar. 
       If you prefer the purple header to still go behind the bar on desktop,
       remove this block. */
    body {
        padding-top: 60px; 
    }
}

/* --- UNIVERSAL TRANSITIONS --- */
/* This ensures every change happens smoothly, not instantly */
.navbar-toggler, 
.navbar-toggler-icon {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* --- HOVER EFFECT 1: The "Lift" --- */
/* When hovering the button, it grows slightly, lifts up, and brightens */
.navbar-toggler:hover {
    /* transform: translateY(-2px) scale(1.05); Moves up 2px and grows 5% */
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.3) !important; /* Deeper shadow */
    background-color: #2b3035 !important; /* Slightly lighter than pure black */
    border-color: #495057; /* Adds a subtle border highlight */
}

/* --- HOVER EFFECT 2: The "Active Press" --- */
/* When you actually click/tap the button */
.navbar-toggler:active {
    transform: translateY(0) scale(0.95); /* Presses down slightly */
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.2) !important;
}

/* --- HOVER EFFECT 3: The Icon Pop --- */
/* The lines inside the button zoom in slightly */
.navbar-toggler:hover .navbar-toggler-icon {
    /* transform: scale(1.15); */
    filter: drop-shadow(0 0 2px rgba(255,255,255,0.4)); /* Subtle glow */
}

  .bg-purple {
    background-color: #6f42c1;
  }
  
  @media (min-width: 1200px) {
    .container {
        max-width: 1000px !important;
    }
}

.results-container-wrapper {
  scroll-margin-top: 50px;
}

.torrent-details .col-6, .torrent-details .col-12 {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Adds space between icon and text */
}

.torrent-details i {
    color: var(--bs-secondary-color); /* Makes icons slightly less prominent than text */
    font-size: 1.1em;
}

#bookDetailsModal .card-header {
    background-color: var(--bs-secondary-bg);
}

#bookDetailsModal .card-body {
    background-color: var(--bs-card-cap-bg);
}

.noBottomBorder {
    border-bottom: none !important;
}

/* Disabled form fields styling */
input:disabled, select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.bd-placeholder-img {
      font-size: 1.125rem;
      text-anchor: middle;
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
    }

    @media (min-width: 768px) {
      .bd-placeholder-img-lg {
        font-size: 3.5rem;
      }
    }

    .b-example-divider {
      width: 100%;
      height: 3rem;
      background-color: rgba(0, 0, 0, .1);
      border: solid rgba(0, 0, 0, .15);
      border-width: 1px 0;
      box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
    }

    .b-example-vr {
      flex-shrink: 0;
      width: 1.5rem;
      height: 100vh;
    }

    .bi {
      vertical-align: -.125em;
      fill: currentColor;
    }

    .nav-scroller {
      position: relative;
      z-index: 2;
      height: 2.75rem;
      overflow-y: hidden;
    }

    .nav-scroller .nav {
      display: flex;
      flex-wrap: nowrap;
      padding-bottom: 1rem;
      margin-top: -1px;
      overflow-x: auto;
      text-align: center;
      white-space: nowrap;
      -webkit-overflow-scrolling: touch;
    }

    .btn-bd-primary {
      --bd-violet-bg: #712cf9;
      --bd-violet-rgb: 112.520718, 44.062154, 249.437846;

      --bs-btn-font-weight: 600;
      --bs-btn-color: var(--bs-white);
      --bs-btn-bg: var(--bd-violet-bg);
      --bs-btn-border-color: var(--bd-violet-bg);
      --bs-btn-hover-color: var(--bs-white);
      --bs-btn-hover-bg: #6528e0;
      --bs-btn-hover-border-color: #6528e0;
      --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
      --bs-btn-active-color: var(--bs-btn-hover-color);
      --bs-btn-active-bg: #5a23c8;
      --bs-btn-active-border-color: #5a23c8;

      background-color: var(--bs-btn-bg);
      border-color: var(--bs-btn-border-color);
      color: var(--bs-btn-color);
    }

    .bd-mode-toggle {
      z-index: 1060;
    }

    .bd-mode-toggle .dropdown-menu .active .bi {
      display: block !important;
    }

    /* Visual cue that the header is clickable */
    .cursor-pointer {
      cursor: pointer;
    }

    /* Prevent text selection when rapidly clicking the header */
    .noselect {
      user-select: none;
      -webkit-user-select: none;
    }

/* --- Audible Style Book Details --- */

.book-hero-container {
    background-color: var(--bs-body-bg); /* Fallback to match theme */
    /* min-height: 400px; */
    /* Remove the box-shadow, the overlay handles the blend now */
    box-shadow: none; 
    /* Ensure text pops even if gradient blends to white in light mode */
    text-shadow: 0 2px 4px rgba(0,0,0,0.8); 
}

.book-hero-bg {
    /* Position matches the container */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Image handling */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

    /* The Blur Effect */
    -webkit-filter: blur(50px);
    filter: blur(50px);
    
    /* Scale up to hide the white/faded edges caused by the blur */
    transform: scale(1.2);
    
    /* opacity: 0.5 ensures it doesn't overpower the text */
    opacity: 0.5; 
}

.book-hero-overlay {
    /* The Magic Gradient:
       0% (Top): Dark tint (0,0,0, 0.4) to ensure white text is readable against bright album art.
       100% (Bottom): The exact color of the web page body (--bs-body-bg-rgb)
    */
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.4) 0%, 
        rgba(var(--bs-body-bg-rgb), 0.0) 50%, 
        rgba(var(--bs-body-bg-rgb), 0.8) 85%,
        rgba(var(--bs-body-bg-rgb), 1) 100%
    );
}

/* --- Wrapper: Holds the image --- */
.book-cover-wrapper {
    /* 1. Remove the fixed pixel max-width so it can fill the column on desktop */
    max-width: 100%; 
    width: 100%;
    /* 2. Center the image on mobile if the fixed height results in a narrow width */
    display: flex;
    justify-content: center; 
    margin: 0 auto;
}

/* --- Image Styling --- */
.book-cover-img {
    /* === MOBILE VIEW (Default) === */
    
    /* 1. Fixed Height: Set your desired height for phones */
    height: 55vh; 
    
    /* 2. Auto Width: This is the KEY to maintaining aspect ratio. 
       It tells the browser to calculate width based on the height. */
    width: auto;   
    
    /* 3. Safety: Prevents the image from being wider than the phone screen */
    max-width: 100%; 
    
    /* 4. Visuals */
    border-radius: 8px;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5));
    
    object-fit: contain; /* Ensures the image is never distorted */
}

.app-logo-svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* === DESKTOP VIEW (Two-Column Layout) === */
/* Triggered when Bootstrap switches to 'col-md-4' (768px) */
@media (min-width: 768px) {
    .book-cover-img {
        /* 1. Reset Height: Stop using the fixed 300px */
        height: auto; 
        
        /* 2. Force Fill: Make it take up the full space of the column */
        width: 100%; 
    
        max-height: 50vh;
    }
}

/* Custom Scrollbar for Modal */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(128, 128, 128, 0.5);
    border-radius: 4px;
}

/* --- Adaptive Button (Dark in Light Mode, Light in Dark Mode) --- */
.btn-outline-adaptive {
    text-shadow: none !important;
    --bs-btn-bg: var(--bd-violet-bg);
    --bs-btn-color: var(--bs-body-color);
    /* --bs-btn-border-color: var(--bs-body-color); */
    
    /* Hover State: Invert colors (Bg becomes Text Color, Text becomes Bg Color) */
    --bs-btn-hover-bg: var(--bs-body-color);
    /* --bs-btn-hover-color: var(--bs-body-bg); */
    --bs-btn-hover-border-color: var(--bs-body-color);
    
    /* Active/Focus States */
    --bs-btn-focus-shadow-rgb: var(--bs-body-color-rgb);
    /* --bs-btn-active-color: var(--bs-body-bg); */
    --bs-btn-active-bg: var(--bs-body-color);
    --bs-btn-active-border-color: var(--bs-body-color);
    
    /* Optional: Add a slight semi-transparent background to ensure readability 
       if the button sits exactly on the transition line of the gradient */
    background-color: rgba(var(--bs-body-bg-rgb), 0.8); 
    backdrop-filter: blur(2px);
}

/* --- Modal Stacking Fix --- */
/* Since Book Details is fullscreen, we must ensure these specific "Action" modals 
   have a higher z-index so they appear on top of it, regardless of HTML order.
   Bootstrap default modal z-index is 1055. We set these to 1060.
*/
#downloadConfirmModal,
#insufficientBufferModal,
#uploadPurchaseModal,
#vipPurchaseModal,
#coverLightboxModal {  
    z-index: 1060; 
}

/* Ensure the second backdrop also stacks correctly if Bootstrap adds it */
.modal-backdrop.show:nth-of-type(2) {
    z-index: 1058 !important; 
    opacity: 0.8; /* Optional: Makes it slightly darker for better focus */
}

#coverLightboxModal {
    z-index: 1060;
    background-color: rgba(0, 0, 0, 0.5) !important; /* 50% opacity black */
}

/* --- DARK MODE TOGGLER BORDER --- */

/* Target the navbar-toggler ONLY when the theme is dark.
   We use rgba(255,255,255, 0.5) for a semi-transparent white border.
   You can change 0.5 to 1.0 for a solid white border.
*/
[data-bs-theme="dark"] .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.5) !important;
}

/* --- SETTINGS MODAL LAYER --- */
/* Force this specific modal to be on top of the mode toggler */
#settingsOffcanvas {
    z-index: 1070;
    --bs-offcanvas-width: 500px;
}

.settings-menu-icon {
    height: 1em !important;
    width: 1em !important;
}

#settingTabs {
    --bs-nav-underline-link-active-color: var(--bs-primary);
    --bs-nav-link-color: var(--bs-secondary-color);
}

#settingsOffcanvas .settings-divider {
    border: 0;
    border-top: 1px solid var(--bs-border-color-translucent);
    opacity: 1;
}

#settingsOffcanvas .settings-collapse-toggle {
    transition: background-color 0.2s ease, color 0.2s ease;
}

#settingsOffcanvas .settings-collapse-toggle:hover {
    background-color: var(--bs-tertiary-bg);
}

#settingsOffcanvas #destination-paths-list .destination-path-row,
#settingsOffcanvas #type-category-rules-list .type-category-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: 0.75rem;
    background: var(--bs-body-tertiary);
}

#settingsOffcanvas #destination-paths-list .destination-path-row > .form-floating:first-of-type,
#settingsOffcanvas #type-category-rules-list .type-category-row > .form-floating:first-of-type {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
}

#settingsOffcanvas #destination-paths-list .destination-path-row > .btn,
#settingsOffcanvas #type-category-rules-list .type-category-row > .btn {
    grid-column: 2;
    grid-row: 1;
    width: 3.5rem;
    height: calc(3.5rem + 2px);
}

#settingsOffcanvas #destination-paths-list .destination-path-row > .form-floating:nth-of-type(2),
#settingsOffcanvas #type-category-rules-list .type-category-row > .form-floating:nth-of-type(2) {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
}

@media (min-width: 768px) {
    #settingsOffcanvas #destination-paths-list .destination-path-row,
    #settingsOffcanvas #type-category-rules-list .type-category-row {
        grid-template-columns: 40% 1fr auto;
        align-items: center;
    }

    #settingsOffcanvas #destination-paths-list .destination-path-row > .form-floating:nth-of-type(2),
    #settingsOffcanvas #type-category-rules-list .type-category-row > .form-floating:nth-of-type(2) {
        grid-column: 2;
        grid-row: 1;
    }

    #settingsOffcanvas #destination-paths-list .destination-path-row > .btn,
    #settingsOffcanvas #type-category-rules-list .type-category-row > .btn {
        grid-column: 3;
        grid-row: 1;
    }
}

.roundTop {
    border-start-start-radius: 1rem;
}

.roundBottom {
    border-end-start-radius: 1rem;
}

/* Custom class to apply rounding ONLY on small (sm) screens and up */
.rounded-sm {
  /* Targets screens with a viewport width of 576px or greater */
  /* This is the standard Bootstrap 'sm' breakpoint */
  @media (min-width: 576px) {
    /* Apply a standard level of border-radius. 
       We'll use '0.5rem' to match Bootstrap's 'rounded-3' size. */
    border-radius: 0.5rem !important;
  }
}

/* --- SEARCH RESULT CARD (Dark/Light Mode Compatible) --- */

/* .result-row {
    background-color: var(--bs-tertiary-bg);
} */

.result-card {
    /* Use Bootstrap variables so it adapts to the theme automatically */
    background-color: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color-translucent); 
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.result-card:hover {
    transform: translateY(-2px);
    /* Stronger shadow for light mode, subtle glow for dark mode */
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important; 
    border-color: var(--bs-primary-border-subtle) !important; 
    cursor: pointer;
}

/* Ensure the image container stands out slightly in both modes */
.img-container-adaptive {
    background-color: var(--bs-body-tertiary);
}

/* The right-hand action column background */
.actions-column-adaptive {
    background-color: var(--bs-body-tertiary); 
    border-left: 1px solid var(--bs-border-color-translucent);
}

/* Custom link hover that respects theme colors */
.hover-primary {
    color: var(--bs-secondary-color) !important;
    transition: color 0.2s;
}
.hover-primary:hover {
    color: var(--bs-primary) !important;
    text-decoration: underline !important;
}

/* Icon alignment fix */
.bi {
    vertical-align: -0.125em;
}

/* Fix dropdowns inside cards in Dark Mode */
[data-bs-theme="dark"] .form-select-sm {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

/* --- Add to static/style.css --- */

/* Helper for smooth background/padding transitions on the navbar itself */
.transition-all {
    transition: background-color 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
}

.transition-brand {
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.mouselogo {
    transition: transform 0.1s ease; /* Smooths the animation */
    display: inline-block; /* Required for transform to work on inline elements */
}

/* 2. Define the subtle change on hover */
.mouselogo:hover {
    transform: scale(1.05); /* Grows by only 5% */
}

/* State when user has scrolled down */
.navbar-scrolled {
    background-color: rgba(33, 37, 41, 0.95) !important; /* Dark background */
    backdrop-filter: blur(10px); /* Glassmorphism effect */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    pointer-events: auto !important; /* Re-enable clicks on mobile */
}

/* Ensure the nav search input looks good */
#nav-search-input:focus {
    background-color: #2b3035 !important;
    border-color: var(--bs-primary);
    color: white !important;
    box-shadow: none; 
}

/* --- Fix for Mobile Zoom/Jump --- */
@media screen and (max-width: 992px) {
    #nav-search-input {
        font-size: 16px !important; /* Prevents iOS from zooming in */
        
        /* Optional: Adjust padding slightly so the 16px text fits nicely in the small bar */
        padding-top: 4px;
        padding-bottom: 4px;
    }
}

/* --- Autosuggest Dropdown --- */
.input-group, .form-floating {
    position: relative; /* Anchor for absolute positioning */
}

.autosuggest-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050; /* Above most bootstrap content */
    display: none;
    max-height: 400px;
    overflow-y: auto;
    margin-top: 2px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.autosuggest-results--above {
    top: auto;
    bottom: calc(100% + 2px);
    margin-top: 0;
    margin-bottom: 2px;
    border-top-left-radius: var(--bs-border-radius);
    border-top-right-radius: var(--bs-border-radius);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Typography tweaks for compact suggestions */
.text-xs {
    font-size: 0.75rem;
}
.text-sm {
    font-size: 0.875rem;
}

/* Dark mode compatibility for the list items */
[data-bs-theme="dark"] .autosuggest-results .list-group-item {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .autosuggest-results .list-group-item:hover {
    background-color: var(--bs-tertiary-bg);
}

/* Update/Add to Autosuggest Styles */
.autosuggest-results .list-group-item {
    transition: background-color 0.15s ease-in-out;
}

/* Ensure the flexbox works nicely with the badge */
.autosuggest-results .list-group-item .flex-grow-1 {
    min-width: 0; /* Allows text truncation to work inside flex child */
}

/* Make sure image doesn't shrink */
.autosuggest-results img {
    flex-shrink: 0;
}

.results-thumb {
    filter: drop-shadow(1px 2px 3px rgba(0, 0, 0, 1));
}



/* MediaInfo JSON Tree Styles */
.json-tree {
    font-family: 'SF Mono', SFMono-Regular, ui-monospace, 'DejaVu Sans Mono', monospace;
    font-size: 0.8rem; /* Slightly smaller for technical data */
    line-height: 1.6;
}

.json-tree details {
    margin-left: 12px;
}

.json-tree summary {
    cursor: pointer;
    list-style: none; 
    color: var(--bs-primary); 
    font-weight: 600;
    user-select: none;
}

/* Custom Arrow Indicator */
.json-tree summary::-webkit-details-marker { display: none; }
.json-tree summary::before {
    content: "▶";
    font-size: 0.65em;
    margin-right: 6px;
    display: inline-block;
    transition: transform 0.15s ease;
    color: var(--bs-secondary);
    opacity: 0.7;
}
.json-tree details[open] > summary::before {
    transform: rotate(90deg);
}

/* Key-Value Styles */
.json-row {
    margin-left: 24px;
    display: flex;
    flex-wrap: nowrap; /* Prevent wrapping to new lines */
    align-items: center; /* Vertically center key and value */
    min-width: max-content; /* Force row to be as wide as its content */
}

.json-key {
    color: var(--bs-secondary);
    margin-right: 6px;
    opacity: 0.8;
    white-space: nowrap; /* Keep keys on one line */
    flex-shrink: 0; /* Prevent key from shrinking */
}

.json-val {
    color: var(--bs-body-color);
    white-space: nowrap; /* The magic sauce: forces horizontal expansion */
}

/* Rotate chevron when collapsed element is open */
[aria-expanded="true"] .bi-chevron-down {
    transform: rotate(180deg);
}
.transition-transform {
    transition: transform 0.2s ease-in-out;
}

/* --- Advanced Search Offcanvas --- */
@media (min-width: 768px) {
    .advanced-search-offcanvas {
        width: 500px;
    }
}

#advancedAccordion .accordion-button {
    --bs-accordion-btn-focus-box-shadow: 0;
}

.advanced-search-offcanvas .offcanvas-footer {
    margin-top: auto;
}

.filter-section-title {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bs-secondary);
    font-weight: 700;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--bs-border-color);
    padding-bottom: 0.25rem;
}

.section-title {
    font-size: 0.75rem;
    letter-spacing: 1px;
    font-weight: 700;
    color: var(--bs-secondary-color);
}

.input-group > .form-floating {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--bs-secondary);
    border-radius: 10px;
}

/* --- Tom Select Dark Mode Overrides --- */
[data-bs-theme="dark"] .ts-wrapper .ts-control,
[data-bs-theme="dark"] .ts-wrapper .ts-control input {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .ts-wrapper.multi .ts-control > div {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
}
[data-bs-theme="dark"] .ts-dropdown {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .ts-dropdown .option {
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .ts-dropdown .active {
    background-color: var(--bs-primary);
    color: #fff;
}
[data-bs-theme="dark"] .ts-dropdown .optgroup-header {
    color: var(--bs-secondary);
    background-color: var(--bs-tertiary-bg);
}
[data-bs-theme="dark"] .ts-dropdown .option.ts-option-disabled {
    color: var(--bs-secondary);
    opacity: 0.6;
}