html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* Remove footer margin on ManagePdf page */
body.manage-pdf-page {
  margin-bottom: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Make ManagePdf container fill remaining viewport after toolbar */
body.manage-pdf-page .container-fluid {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.manage-pdf-page main {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Upload form custom styles - only what Bootstrap can't handle */
.file-label {
  transition: all 0.3s ease;
}

.file-label:hover {
  border-color: var(--bs-primary) !important;
  background-color: var(--bs-primary-bg-subtle) !important;
}

.file-label.dragover {
  border-color: var(--bs-primary) !important;
  background-color: var(--bs-info-bg-subtle) !important;
  border-style: solid !important;
}

/* Button with spinner - keep custom styling for gradient (Bootstrap doesn't have gradient buttons) */
#uploadBtn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  transition: all 0.3s ease;
}

#uploadBtn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(102, 126, 234, 0.4);
}

#uploadBtn:active:not(:disabled) {
  transform: translateY(0);
}

#uploadBtn:disabled {
  opacity: 0.6;
}

#uploadBtn .btn-spinner {
  display: none !important;
}

/* Only hide text and show spinner when button is in loading state */
#uploadBtn.loading .btn-text {
  visibility: hidden;
}

#uploadBtn.loading .btn-spinner {
  display: block !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .file-label {
    padding: 2rem 1rem !important;
    min-height: 160px;
  }

  .file-label svg {
    width: 40px !important;
    height: 40px !important;
  }

  .file-label .fs-5 {
    font-size: 1rem !important;
  }
}

/* Sign Canvas - Allow draw tools to wrap in modal */
#sign-draw-tools #draw-tools {
  flex-wrap: wrap !important;
}

/* Toolbar spacing - ensure content isn't hidden behind sticky toolbar */
body:has(#tool-bar) {
  padding-top: 0;
}

#tool-bar {
  position: sticky;
  top: 0;
  z-index: 1030;
}

/* Mobile responsive toolbar adjustments */
@media (max-width: 767.98px) {
  /* Ensure tool areas wrap properly on mobile */
  #tool-bar #draw-tools-area,
  #tool-bar #text-tools-area {
    flex-wrap: wrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Make buttons more compact on mobile */
  #tool-bar .btn {
    min-width: auto;
    padding: 0.25rem 0.5rem;
  }
  
  /* Ensure tool areas don't overflow */
  #tool-bar #draw-tools,
  #tool-bar #text-tools {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  /* Adjust border separator visibility */
  #tool-bar .border-end {
    display: none;
  }
}

/* PDF toolbar mobile responsive adjustments */
@media (max-width: 767.98px) {
  /* Make PDF toolbar stack vertically on mobile */
  #pdf-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  
  /* Center page navigation and zoom controls on mobile */
  #pdf-toolbar > div:first-child,
  #pdf-toolbar > div:nth-child(2) {
    justify-content: center;
    width: 100%;
  }
  
  /* Adjust button sizes for better touch targets */
  #pdf-toolbar .btn {
    min-width: 32px;
    min-height: 32px;
  }
  
  /* Make zoom controls more compact */
  #pdf-toolbar .rounded-pill {
    justify-content: center;
    width: fit-content;
    margin: 0 auto;
  }
  
  /* Reduce canvas container margin on mobile */
  .pdf-canvas-container {
    margin: 0.5rem !important;
  }
  
  /* Ensure icons are appropriately sized */
  #pdf-toolbar .pdf-nav-icon {
    width: 16px;
    height: 16px;
  }
  
  #pdf-toolbar .pdf-zoom-icon {
    width: 14px;
    height: 14px;
  }
}

/* Desktop PDF toolbar adjustments */
@media (min-width: 768px) {
  .pdf-canvas-container {
    margin: 1rem !important;
  }
  
  #pdf-toolbar .pdf-nav-icon {
    width: 18px;
    height: 18px;
  }
  
  #pdf-toolbar .pdf-zoom-icon {
    width: 16px;
    height: 16px;
  }
}