#navbarSearch {
  top: 100%;
  right: 0;
  transition: all 0.3s;
  max-height: 0;
  overflow: hidden;
}

#navbarSearch.show {
  height: auto;
  /*dynamically changes height*/
}

#searchResults .dropdown-item {
  display: flex;
  align-items: center;
  white-space: nowrap;
  height: 50px;
  /* Fixed height */
  overflow: hidden;
  /* Hide overflow */
}

#searchResults .icon {
  margin-right: 10px;
}

#searchResults .icon-text {
  display: inline;
  overflow: hidden;
  /* Hide overflow */
  text-overflow: ellipsis;
  /* Add ellipsis for long text */
}

#search-icon i {
  font-size: 24px;
  /* Adjust this to your desired size */
  transition: color 0.3s;
}

#search-icon:hover i {
  color: #666;
  /* Adjust this to your hover color */
}

.search-input {
  transition: border 0.3s, box-shadow 0.3s;
}

.search-input:focus {
  border-color: #666;
  /* Adjust this to your focus color */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  /* Adjust this to your desired shadow */
}


.main-icon {
  width: 36px;
  height: 36px;
  vertical-align: middle;
  transform: translateY(-2px);
}

.nav-icon {
  vertical-align: middle;
  font-size: 2rem !important;
  padding: 0.25rem;
  border-radius: 1rem;
}

.icon+.icon {
  margin-left: -4px;
}

.icon-text {
  margin-left: 8px;
  margin-right: 4px;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  vertical-align: middle;
}


.scalable-languages-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); /* Auto-fill columns, with a minimum width of 180px */
}

.scalable-languages-container:not(:has(> :nth-child(4))) .lang-dropdown-item-wrapper:last-child {
  border: 0px !important
}

.scalable-languages-container:has(> *:nth-child(1)) {
  --count: 1;
}

.scalable-languages-container:has(> *:nth-child(2)) {
  --count: 2;
}

.scalable-languages-container:has(> *:nth-child(3)) {
  --count: 3;
}

html[dir="ltr"] .lang-dropdown-item-wrapper {
  border-right: 2px solid var(--md-nav-color-on-seperator);
}

html[dir="rtl"] .lang-dropdown-item-wrapper {
  border-left: 2px solid var(--md-nav-color-on-seperator);
}

/* Responsive adjustments */
@media (min-width: 1200px){
  .lang-dropdown-item-wrapper .dropdown-item {
    min-width: 200px
  }
}

@media (max-width: 600px) {
  .scalable-languages-container {
    grid-template-columns: repeat(2, 1fr);
  }
  .scalable-languages-container:not(:has(> :nth-child(2))){
    grid-template-columns: repeat(var(--count), 1fr) !important;
  }
  .scalable-languages-container .lang-dropdown-item-wrapper:nth-child(2n) {
    border: 0px
  }
}

@media (min-width: 601px) and (max-width: 900px) {
  .scalable-languages-container {
    grid-template-columns: repeat(3, 1fr);
  }
  .scalable-languages-container:not(:has(> :nth-child(3))){
    grid-template-columns: repeat(var(--count), 1fr) !important;
  }
  .scalable-languages-container .lang-dropdown-item-wrapper:nth-child(3n) {
    border: 0px
  }
}

@media (min-width: 901px) {
  .scalable-languages-container {
    grid-template-columns: repeat(4, 1fr);
  }

  .scalable-languages-container:not(:has(> :nth-child(4))){
    grid-template-columns: repeat(var(--count), 1fr) !important;
  }

  .scalable-languages-container .lang-dropdown-item-wrapper:nth-child(4n) {
      border: 0px
  }
}

.dropdown-item .icon-text {
  text-wrap: wrap;
  word-break: break-word;
  width: 80%;
}

.close-icon {
  color: var(--md-sys-color-secondary);
}

.close-icon:hover {
  transform: scale(1.15);
}

span.icon-text::after {
  content: attr(data-text);
  content: attr(data-text) / "";
  font-weight: 600;
  height: 0;
  visibility: hidden;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
}

.nav-item-separator {
  position: relative;
  margin: 0 4px;
  /* Adjust the margin as needed */
}

.nav-item-separator::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10%;
  /* Adjust the top and bottom margins as needed */
  bottom: 10%;
  width: 1px;
  background-color: #ccc;
  /* Adjust the color as needed */
}

.navbar-icon {
  width: 20px;
  height: 20px;
  transform: translateY(-2px);
}

.navbar-toggler {
  color: var(--md-sys-color-on-surface-variant);
}

.nav-item {
  position: relative;
}

/* .tooltip-text {
  visibility: hidden;
  background-color: rgb(71 67 67 / 80%);
  color: #fff;
  text-align: center;
  border-radius: 4px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 12px;
  white-space: nowrap;
  margin-top: 5px;
}

.nav-item:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
} */

.dropdown-menu.scrollable-y {
  overflow-y: scroll;
  max-height: 360px;
}

/* Dropdown Scrollbar*/
.scrollable-y {
  overflow-y: scroll;
  max-height: 190px;
  overscroll-behavior: contain;
}

.scrollable-y::-webkit-scrollbar {
  background: transparent;
  width: 0.7rem;
}

.scrollable-y::-webkit-scrollbar-track {
  background: transparent;
}

.scrollable-y::-webkit-scrollbar-thumb {
  border-radius: 2rem;
  background-color: var(--md-sys-color-surface-5);
  border: 3px solid var(--md-sys-color-surface-5);
}

/* Mega Menu */
.dropdown-mega .dropdown-menu {
  width: 98%;
}

.dropdown-mega .title {
  padding-bottom: 1rem;
  margin: 0;
}

.dropdown-menu .list-group {
  padding: 1rem;
}

.mega-content .dropdown-item:focus .nav-icon,
.mega-content .dropdown-item:hover .nav-icon,
.mega-content .dropdown-item.active .nav-icon {
  background-color: transparent;
}

.dropdown-item:focus.sign,
.dropdown-item:hover.sign,
.dropdown-item.active.sign {
  color: var(--md-nav-on-section-color-sign);
  background-color: var(--md-nav-section-color-sign);
}

.dropdown-item:focus.organize,
.dropdown-item:hover.organize,
.dropdown-item.active.organize {
  color: var(--md-nav-on-section-color-organize);
  background-color: var(--md-nav-section-color-organize);
}

.dropdown-item:focus.convert,
.dropdown-item:hover.convert,
.dropdown-item.active.convert {
  color: var(--md-nav-on-section-color-convert);
  background-color: var(--md-nav-section-color-convert);
}

.dropdown-item:focus.convertto,
.dropdown-item:hover.convertto,
.dropdown-item.active.convertto {
  color: var(--md-nav-on-section-color-convertto);
  background-color: var(--md-nav-section-color-convertto);
}

.dropdown-item:focus.image,
.dropdown-item:hover.image,
.dropdown-item.active.image {
  color: var(--md-nav-on-section-color-image);
  background-color: var(--md-nav-section-color-image);
}

.dropdown-item:focus.word,
.dropdown-item:hover.word,
.dropdown-item.active.word {
  color: var(--md-nav-on-section-color-word);
  background-color: var(--md-nav-section-color-word);
}

.dropdown-item:focus.ppt,
.dropdown-item:hover.ppt,
.dropdown-item.active.ppt {
  color: var(--md-nav-on-section-color-ppt);
  background-color: var(--md-nav-section-color-ppt);
}

.dropdown-item:focus.security,
.dropdown-item:hover.security,
.dropdown-item.active.security {
  color: var(--md-nav-on-section-color-security);
  background-color: var(--md-nav-section-color-security);
}

.dropdown-item:focus.other,
.dropdown-item:hover.other,
.dropdown-item.active.other {
  color: var(--md-nav-on-section-color-other);
  background-color: var(--md-nav-section-color-other);
}

.dropdown-item:focus.advance,
.dropdown-item:hover.advance,
.dropdown-item.active.advance {
  color: var(--md-nav-on-section-color-advance);
  background-color: var(--md-nav-section-color-advance);
}

/* Dropdown min-width */
.dropdown-mw-28 {
  min-width: 280px;
  min-height: 50px;
}

.dropdown-mw-20 {
  min-width: 200px;
}

/* Dropdown open on hover */
html[dir="ltr"] .dropdown-menu {
  padding-top: 0.5rem;
  top: auto;
  left: auto;
  right: 0;
}

html[dir="rtl"] .dropdown-menu {
  padding-top: 0.5rem;
  top: auto;
  left: 0;
  right: auto;
}

html[dir="ltr"] .dropdown-menu[data-bs-popper] {
  top: auto;
  left: auto;
  right: 0;
  margin-top: 0 !important;
}

html[dir="rtl"] .dropdown-menu[data-bs-popper] {
  top: auto;
  left: 0;
  right: auto;
  margin-top: 0 !important;
}

.dropdown-menu-wrapper {
  padding: 1.5rem 0;
  border-radius: 1rem;
  color: var(--md-sys-color-on-surface);
  background-color: var(--md-sys-color-surface);
  border: 1px solid var(--md-sys-color-surface-5);
  box-shadow: var(--md-sys-elevation-2);
}

.dropdown-menu-tp {
  color: transparent;
  background-color: transparent;
  border: none;
  box-shadow: none;
}

.icon-hide {
  display: inline-flex;
}

@media (min-width:992px) {
  .dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
  }

  /* .icon-hide {
    display: none;
  } */
}

@media (max-width:1199px) {
  .icon-hide {
    display: inline-flex;
  }
}

@media (min-width:1200px) {
  .icon-hide {
    display: none;
  }
}

.go-pro-link {
  position: relative;
  padding: 0.5rem 1rem;
  transition: all 0.3s ease;
  z-index: 1;
  display: inline-block;
  width: auto;
}

.go-pro-badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: bold;
  color: #ffffff;
  background-color: #007bff;
  border-radius: 0.25rem;
  text-transform: uppercase;
  transition: all 0.3s ease;
}

.go-pro-link:hover .go-pro-badge {
  background-color: #0056b3;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#stacked {
  gap: 1rem;
}

#stacked>.navbar-item {
  margin: 0;
}

.features-container {
  display: flex;
  gap: 30px;
  justify-content: center;
}

.feature-group {
  display: flex;
  flex-direction: column;
  min-width: 14rem;
  max-width: 18rem;
  flex: 1 1 min(14rem, 100%);
  box-sizing: border-box;
}

.feature-rows {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 1rem;
  padding: 0 1rem;
  box-sizing: border-box;
}

.feature-rows.single-column {
  justify-content: center;
  /* Center-align a single column */
}

.feature-group-header {
  display: flex;
  justify-content: flex-start;
  color: var(--md-sys-color-on-surface);
  margin-top: 15px;
  user-select: none;
  cursor: pointer;
  gap: 10px;
}

.nav-group-container {
  padding: 10px;
}



.card-title.text-primary {
  color: #000;
}

.home-card-icon {
  width: 3rem;
  height: 3rem;
  transform: translateY(-5px);
}

.favorite-icon {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  color: var(--md-sys-color-secondary);
}

.favorite-icon img {
  filter: brightness(0) invert(var(--md-theme-filter-color));
}

.favorite-icon:hover .material-symbols-rounded {
  transform: scale(1.2);
}

.favorite-icon .material-symbols-rounded.fill {
  color: #f5c000;
}


@keyframes Pulse {
  from {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.update-notice {
  animation: scale 1s infinite alternate;
}

@keyframes scale {
  0% {
    transform: scale(0.96);
  }

  100% {
    transform: scale(1);
  }
}

.hidden {
  visibility: hidden;
}

/* ============================================================================
   JJL PDF — sidebar layout retrofit
   Transforms Bootstrap horizontal navbar into a fixed left sidebar.
   Appended to navbar.css so it loads after the base navbar styles.
   ============================================================================ */

/* Desktop / wide screens: navbar → left sidebar */
@media (min-width: 768px) {
  body, #page-container {
    padding-left: 260px !important;
    margin-left: 0 !important;
  }

  .navbar.navbar-expand-xl {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 260px !important;
    height: 100vh !important;
    flex-direction: column !important;
    align-items: stretch !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-bottom: none !important;
    border-right: 1px solid var(--md-nav-color-on-seperator) !important;
    padding: 0 !important;
    z-index: 10010 !important;
  }

  .navbar.navbar-expand-xl > .container {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Brand: logo + product name at top of sidebar */
  .navbar-brand {
    padding: 1.1rem 1rem 1rem 1rem !important;
    border-bottom: 1px solid var(--md-nav-color-on-seperator) !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    width: 100% !important;
  }

  .navbar-brand .main-icon {
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
  }

  .navbar-brand .icon-text {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
  }

  /* No mobile hamburger in sidebar mode */
  .navbar-toggler { display: none !important; }

  /* The collapse wrapper stays open and stretches */
  .navbar-collapse {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: auto !important;
    visibility: visible !important;
  }

  /* All <ul> nav lists become vertical and full-width */
  .navbar-nav,
  .navbar-nav.me-auto,
  .navbar-nav.flex-nowrap {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0.5rem 0 !important;
    flex-wrap: nowrap !important;
  }

  .navbar-nav.me-auto {
    flex: 1 1 auto !important;
  }

  /* Nav items: stacked rows */
  .nav-item {
    width: 100% !important;
    display: block !important;
  }

  /* Nav links: icon + text aligned, padded, hover effect */
  .nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 0.65rem 1rem !important;
    width: 100% !important;
    border-radius: 0 !important;
    text-align: left !important;
    transition: background 0.12s, color 0.12s !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .nav-link .material-symbols-rounded {
    font-size: 1.25rem !important;
    flex-shrink: 0 !important;
  }

  .nav-link .icon-text {
    flex: 1 !important;
    text-align: left !important;
  }

  .nav-link:hover {
    background: var(--md-sys-color-surface-2, rgba(127,127,127,0.08)) !important;
  }

  .nav-link.active {
    background: var(--md-sys-color-surface-3, rgba(127,127,127,0.12)) !important;
    color: var(--md-sys-color-primary, #4a90e2) !important;
  }

  /* Mega dropdown ("All Tools"): when triggered, slide out to the right of the sidebar */
  .dropdown-menu-tp {
    position: fixed !important;
    left: 260px !important;
    top: 0 !important;
    height: 100vh !important;
    width: calc(100vw - 260px) !important;
    max-width: 920px !important;
    box-shadow: 4px 0 16px rgba(0,0,0,0.18) !important;
    border: none !important;
    border-radius: 0 !important;
    border-right: 1px solid var(--md-nav-color-on-seperator) !important;
    overflow-y: auto !important;
    z-index: 10020 !important;
  }
}

/* Mobile: keep default horizontal navbar behavior, just slightly nicer cards */
@media (max-width: 767px) {
  body, #page-container {
    padding-left: 0 !important;
  }
}

/* ============================================================================
   Modern visual refinements (apply at all breakpoints)
   ============================================================================ */

/* Slightly more modern font stack — falls back to system fonts */
body, html, .navbar, .nav-link, .card, .feature-card, button, input, select, textarea {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", system-ui, sans-serif !important;
}

/* Tool / feature cards: softer corners, lift on hover */
.feature-card,
.card {
  border-radius: 14px !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  border: 1px solid var(--md-nav-color-on-seperator, rgba(0,0,0,0.08)) !important;
}

.feature-card:hover,
.card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08) !important;
}

/* Buttons: cleaner radius */
.btn {
  border-radius: 8px !important;
}

/* Inputs */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="search"],
select,
textarea {
  border-radius: 8px !important;
}

/* ============================================================================
   JJL PDF — second sidebar (tools list) + upload-zone home layout
   Pins the "All Tools" dropdown open as a permanent panel beside the primary
   sidebar. Other dropdowns (favorites/language/search) keep normal behavior.
   ============================================================================ */

@media (min-width: 768px) {
  /* Wider body offset: 260 (primary sidebar) + 340 (tools panel) */
  body, #page-container {
    padding-left: 600px !important;
  }

  /* === Reset the generic .dropdown-menu-tp positioning from previous CSS === */
  /* Other dropdowns (favorites, language, search) revert to normal Bootstrap */
  .dropdown-menu-tp:not([aria-labelledby="navbarDropdown-1"]) {
    position: absolute !important;
    left: auto !important;
    top: 100% !important;
    height: auto !important;
    width: auto !important;
    max-width: none !important;
    border-radius: 0.5rem !important;
    border-right: 1px solid var(--md-nav-color-on-seperator) !important;
  }

  /* === All Tools dropdown becomes a permanent second sidebar === */
  .dropdown-menu[aria-labelledby="navbarDropdown-1"] {
    display: block !important;
    position: fixed !important;
    left: 260px !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    width: 340px !important;
    max-width: 340px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: var(--md-nav-background) !important;
    border: none !important;
    border-right: 1px solid var(--md-nav-color-on-seperator) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0.75rem 0.5rem !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 10005 !important;
  }

  /* Hide the All Tools trigger link itself (panel is always open) */
  #navItemToHide > .nav-link {
    display: none !important;
  }

  /* Compress the feature-rows inside the second sidebar */
  .dropdown-menu[aria-labelledby="navbarDropdown-1"] .dropdown-menu-wrapper {
    display: block !important;
    width: 100% !important;
    justify-content: flex-start !important;
  }

  .dropdown-menu[aria-labelledby="navbarDropdown-1"] .feature-rows {
    display: block !important;
    column-count: 1 !important;
    column-gap: 0 !important;
    width: 100% !important;
  }

  .dropdown-menu[aria-labelledby="navbarDropdown-1"] .feature-group {
    margin-bottom: 1rem !important;
    width: 100% !important;
    break-inside: avoid !important;
  }

  /* Section headers ("Organize", "Security", etc.) */
  .dropdown-menu[aria-labelledby="navbarDropdown-1"] .feature-group > div:first-child {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    opacity: 0.7 !important;
    font-weight: 600 !important;
  }

  .dropdown-menu[aria-labelledby="navbarDropdown-1"] .nav-group-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }

  /* Individual tool entries: compact rows instead of cards */
  .dropdown-menu[aria-labelledby="navbarDropdown-1"] .feature-card,
  .dropdown-menu[aria-labelledby="navbarDropdown-1"] .nav-group-container > div {
    width: 100% !important;
    margin: 0 !important;
    padding: 0.4rem 0.6rem !important;
    border-radius: 6px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transition: background 0.1s !important;
    min-height: auto !important;
  }

  .dropdown-menu[aria-labelledby="navbarDropdown-1"] .feature-card:hover,
  .dropdown-menu[aria-labelledby="navbarDropdown-1"] .nav-group-container > div:hover {
    background: var(--md-sys-color-surface-2, rgba(127,127,127,0.08)) !important;
    transform: none !important;
    box-shadow: none !important;
  }

  /* Card internal layout: icon + title only, hide description */
  .dropdown-menu[aria-labelledby="navbarDropdown-1"] .feature-card a,
  .dropdown-menu[aria-labelledby="navbarDropdown-1"] .feature-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.6rem !important;
    text-decoration: none !important;
  }

  .dropdown-menu[aria-labelledby="navbarDropdown-1"] .feature-card .material-symbols-rounded,
  .dropdown-menu[aria-labelledby="navbarDropdown-1"] .feature-card img {
    font-size: 1.1rem !important;
    width: 1.2rem !important;
    height: 1.2rem !important;
    flex-shrink: 0 !important;
  }

  .dropdown-menu[aria-labelledby="navbarDropdown-1"] .feature-card h5,
  .dropdown-menu[aria-labelledby="navbarDropdown-1"] .feature-card .card-title {
    font-size: 0.85rem !important;
    margin: 0 !important;
    font-weight: 500 !important;
    flex: 1 !important;
  }

  .dropdown-menu[aria-labelledby="navbarDropdown-1"] .feature-card p,
  .dropdown-menu[aria-labelledby="navbarDropdown-1"] .feature-card .card-text,
  .dropdown-menu[aria-labelledby="navbarDropdown-1"] .feature-card .feature-description,
  .dropdown-menu[aria-labelledby="navbarDropdown-1"] .feature-card .desc {
    display: none !important;
  }

  /* Tools panel scrollbar — subtle */
  .dropdown-menu[aria-labelledby="navbarDropdown-1"]::-webkit-scrollbar {
    width: 6px !important;
  }
  .dropdown-menu[aria-labelledby="navbarDropdown-1"]::-webkit-scrollbar-thumb {
    background: rgba(127,127,127,0.3) !important;
    border-radius: 3px !important;
  }
}

/* ============================================================================
   Home page upload zone (replaces the main features-container)
   ============================================================================ */

.jjl-home-content {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 4rem);
  padding: 2rem;
}

.jjl-upload-zone {
  width: 100%;
  max-width: 720px;
  border: 2px dashed var(--md-nav-color-on-seperator, rgba(127,127,127,0.4));
  border-radius: 20px;
  padding: 4rem 2rem;
  text-align: center;
  background: var(--md-sys-color-surface-1, transparent);
  transition: border-color 0.2s, background 0.2s;
  cursor: pointer;
}

.jjl-upload-zone:hover,
.jjl-upload-zone.dragover {
  border-color: var(--md-sys-color-primary, #4a90e2);
  background: var(--md-sys-color-surface-2, rgba(74,144,226,0.05));
}

.jjl-upload-zone .upload-icon {
  font-size: 4rem !important;
  opacity: 0.6;
  margin-bottom: 1rem;
}

.jjl-upload-zone h2 {
  font-size: 1.6rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.jjl-upload-zone p {
  opacity: 0.7;
  margin: 0 0 1.5rem;
  font-size: 0.95rem;
}

.jjl-upload-zone .upload-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.jjl-upload-zone .upload-btn {
  padding: 0.6rem 1.2rem;
  font-size: 0.9rem;
  border-radius: 8px;
  border: 1px solid var(--md-nav-color-on-seperator);
  background: transparent;
  cursor: pointer;
  transition: background 0.1s;
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.jjl-upload-zone .upload-btn:hover {
  background: var(--md-sys-color-surface-2, rgba(127,127,127,0.08));
}

.jjl-upload-zone .upload-btn.primary {
  background: var(--md-sys-color-primary, #4a90e2);
  color: white;
  border-color: transparent;
}

.jjl-upload-zone .upload-btn.primary:hover {
  background: var(--md-sys-color-primary-container, #3a80d2);
}

/* Hide the default home page main features-container — replaced by upload zone */
body.home .features-container,
.features-container.jjl-hide {
  display: none !important;
}

/* Balance: phantom right margin equal to primary sidebar width so the zone */
/* sits visually closer to the screen center, not against the right edge.   */
@media (min-width: 768px) {
  .jjl-home-content {
    padding-right: 2rem !important;
  }
}

/* On narrower screens (< 1100px effective content area), drop the phantom    */
/* margin so the zone uses what space is available instead of getting cramped */
@media (min-width: 768px) and (max-width: 1099px) {
  .jjl-home-content {
    padding-right: 2rem !important;
  }
}

/* Shift the upload zone leftward (preserves size — both edges move equally). */
/* Tune the translateX value to taste; -150px is ~1.5 inches at typical DPI.  */
@media (min-width: 1200px) {
  .jjl-upload-zone {
    /* transform: translateX(-150px) !important;  -- DISABLED 2026-05-19: web-claude diagnosis showed this was a band-aid for the .container asymmetry bug, now fixed properly above */
  }
}

/* ============================================================================
   JJL PDF — sidebar widths via CSS vars + drag-to-resize handles
   Overrides earlier hardcoded 260px / 340px / 600px values via cascade.
   ============================================================================ */

:root {
  --jjl-sb1-width: 200px;   /* primary nav sidebar (was 240, narrowed 2026-05-18 to give PDF preview more room) */
  --jjl-sb2-width: 240px;   /* tools panel       (was 320, narrowed 2026-05-18) */
}

@media (min-width: 768px) {
  body, #page-container {
    padding-left: var(--jjl-sb1-width) !important;
    padding-right: var(--jjl-sb2-width) !important;
  }

  .navbar.navbar-expand-xl {
    width: var(--jjl-sb1-width) !important;
  }

  .dropdown-menu[aria-labelledby="navbarDropdown-1"] {
    left: auto !important;
    right: 0 !important;
    width: var(--jjl-sb2-width) !important;
    max-width: var(--jjl-sb2-width) !important;
  }

  /* The leftover mega-dropdown style we set earlier used calc with literal 260 */
  /* — override here for any other dropdown to inherit sb1-width too.            */
  .dropdown-menu-tp:not([aria-labelledby="navbarDropdown-1"]) {
    /* normal Bootstrap dropdown behavior — unchanged from earlier override */
  }
}

/* Drag handles: hairline strips along right edge of each sidebar */
.jjl-resize-handle {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: ew-resize;
  background: transparent;
  z-index: 100000;
  user-select: none;
  transition: background 0.12s;
}

.jjl-resize-handle:hover,
.jjl-resize-handle.jjl-dragging {
  background: rgba(74, 144, 226, 0.45);
}

.jjl-resize-handle.handle-sb1 {
  left: calc(var(--jjl-sb1-width) - 3px);
}

.jjl-resize-handle.handle-sb2 {
  left: auto;
  right: calc(var(--jjl-sb2-width) - 3px);
}

/* Hide handles below the breakpoint where sidebars don't apply */
@media (max-width: 767px) {
  .jjl-resize-handle { display: none !important; }
}

/* Cursor on the body while dragging — keeps the cursor consistent  */
body.jjl-resizing {
  cursor: ew-resize !important;
  user-select: none !important;
}
body.jjl-resizing * {
  cursor: ew-resize !important;
}



/* ============================================================================
   JJL PDF — sidebar collapse buttons
   Small chevron tabs at the right edge of each sidebar. Click to fully
   collapse the sidebar to 0px. Click again to restore previous width.
   ============================================================================ */

.jjl-toggle {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 60px;
  background: var(--md-nav-background, #ffffff);
  color: var(--md-sys-color-on-surface, #1a1a1a);
  border: 1px solid var(--md-nav-color-on-seperator, rgba(127,127,127,0.3));
  border-left: none;
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  z-index: 100001;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
  transition: opacity 0.15s ease, left 0.2s ease, background 0.15s ease;
  user-select: none;
  padding: 0;
}

.jjl-toggle:hover {
  opacity: 1;
  background: var(--md-sys-color-surface-2, rgba(127,127,127,0.08));
}

.jjl-toggle .chevron {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 7px solid currentColor;
  transition: transform 0.2s ease;
  pointer-events: none;
}

/* Flip the chevron when collapsed (now pointing right to indicate "expand") */
body.sb1-collapsed .jjl-toggle.handle-sb1 .chevron,
body.sb2-collapsed .jjl-toggle.handle-sb2 .chevron {
  transform: rotate(180deg);
}

.jjl-toggle.handle-sb1 {
  left: max(0px, calc(var(--jjl-sb1-width) - 11px));
}

.jjl-toggle.handle-sb2 {
  left: auto;
  right: max(0px, calc(var(--jjl-sb2-width) - 11px));
}

@media (min-width: 768px) {
  /* Smooth animation when widths change */
  .navbar.navbar-expand-xl,
  .dropdown-menu[aria-labelledby="navbarDropdown-1"] {
    transition: width 0.2s ease !important;
  }
  body, #page-container {
    transition: padding-left 0.2s ease !important;
  }

  /* Hide drag-resize handles while a sidebar is collapsed */
  body.sb1-collapsed .jjl-resize-handle.handle-sb1,
  body.sb2-collapsed .jjl-resize-handle.handle-sb2 {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .jjl-toggle { display: none !important; }
}

/* ============================================================================
   Collapse — high-specificity overrides that win against the original
   hardcoded width rules.  body.sbN-collapsed beats anything that uses
   just the element selector.
   ============================================================================ */
@media (min-width: 768px) {
  body.sb1-collapsed .navbar.navbar-expand-xl {
    width: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
  }
  body.sb1-collapsed .dropdown-menu[aria-labelledby="navbarDropdown-1"] {
    left: 0 !important;
  }
  body.sb2-collapsed .dropdown-menu[aria-labelledby="navbarDropdown-1"] {
    width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
  }
}

/* ============================================================================
   JJL PDF — multi-tool + PDF.js viewer: actually use the available width.
   2026-05-19: replaced yesterday's calc() override that was shrinking
   #pages-container below Stirling default on <=1420px viewports. The wrapper
   is already 100% (= viewport minus sidebar padding); we just make the inner
   container fill it instead of being capped at 900/1200px.
   ============================================================================ */
@media (min-width: 992px) {
  /* Multi-tool page thumbnails container — beat Stirling hardcoded widths */
  #pages-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
  /* Stirling's .multi-tool-container has max-width:95vw which overflows
     our body padding-left of (sb1+sb2). Cap it to fill the available width. */
  .multi-tool-container {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
  }
  /* PDF.js viewer (view-pdf, redact, etc.) — fill parent fully */
  #outerContainer,
  #mainContainer,
  #viewerContainer,
  #viewer {
    max-width: 100% !important;
    width: 100% !important;
  }
}


/* ============================================================================
   JJL PDF — sb2 on right side (2026-05-19): when sb2 is collapsed, free
   up the body's right padding too.
   ============================================================================ */
@media (min-width: 768px) {
  body.sb2-collapsed,
  body.sb2-collapsed #page-container {
    padding-right: 0 !important;
  }
}

/* ============================================================================
   JJL PDF — fix rightward bias of main content on tool pages (2026-05-19).
   Web Claude diagnosis: Bootstrap's .container has margin:0 auto + a max-width
   cap (1140/1320). With body padding 200/240 (asymmetric), the .container
   auto-centers within an already-offset content box, biasing right. Force
   .container to fluid full-width inside the padded body so .row's centering
   has a symmetric parent to work with.
   ============================================================================ */
#page-container > .container {
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ============================================================================
   JJL PDF — DIRECT pin of #outerContainer to visible area (2026-05-19 v4).
   Web Claude diagnosis from DevTools chain: #outerContainer is 1706px wide
   starting at x=240, extending to x=1946 which is 240px past viewport and
   under sb2. Pin its width to the actually-visible area (viewport minus the
   observed body padding 240 and 320). PDF.js's internal centering will then
   place the page correctly within the visible region.
   Using literal 240/320 (the observed computed values) rather than the CSS
   variables, which compute to those because jjl-resize.js applies the user's
   saved-width localStorage values.
   ============================================================================ */
@media (min-width: 768px) {
  #outerContainer {
    width: calc(100vw - 240px - 320px) !important;
    max-width: calc(100vw - 240px - 320px) !important;
  }
}

/* ============================================================================
   JJL PDF — DIAGNOSTIC left-align of PDF.js .page (2026-05-19 v5).
   PDF.js default centers each page in #viewer via margin:auto. Forcing
   margin-left:0 / margin-right:auto pins it to the left edge so the user can
   confirm visually that CSS edits are reaching the browser. Revert to centered
   alignment (or remove this rule entirely) once we have the offset cause
   identified.
   ============================================================================ */
html body #viewer .page,
html body .pdfViewer .page,
html body #outerContainer .pdfViewer .page {
  margin-left: auto !important;
  margin-right: auto !important;
}