html {
  font-size: 12px;
}

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

.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;

  font-family: "Kufam", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

a {
  text-decoration: none;
  color: var(--bs-secondary-color) !important;
  transition: color 0.3s ease;
}

a:hover {
  color: color-mix(in srgb, var(--bs-secondary-color) 40%, white) !important;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
  text-align: start;
}

body,
.navbar,
.card,
.footer,
.form-check-input,
.btn {
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.nav-item .nav-link {
  position: relative;
  text-decoration: none;
  width: max-content;
  display: inline-block;
}

.nav-item .nav-link::after {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: -2px; /* Moves the line slightly under the text baseline */
  left: 0;
  background-color: currentColor; /* Matches the text color automatically */
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.nav-item .nav-link:hover::after,
.nav-item .nav-link.active::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.transition-all {
  transition: all 0.2s ease-in-out !important;
}
.border-dashed {
  border-style: dashed !important;
}

.form-select-lg,
.form-control {
  border-color: #e9ecef;
}
.form-select-lg:focus,
.form-control:focus {
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
}
.file-item {
  transition: background-color 0.2s ease-in-out;
}
.file-item:hover {
  background-color: #e9ecef !important;
}

#visualPdfCanvas {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  background-color: #ffffff !important;
  image-rendering: -webkit-optimize-contrast !important;
  image-rendering: crisp-edges !important;
  image-rendering: pixelated !important;
  text-rendering: optimizeLegibility !important;
  /* Forces white paper harmony visibility rules */
}

#pdfRenderWrapper {
  display: inline-block !important;
  background-color: #ffffff !important;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}

/* Custom Utility to hide arrows */
.no-spinners::-webkit-outer-spin-button,
.no-spinners::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.no-spinners[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.stamp-viewport {
        min-height: 500px;
        max-height: 75vh;
        overflow: auto;
        background-color: #2b3035;
    }

    .click-canvas-wrapper {
        cursor: crosshair;
        user-select: none;
        position: relative;
        display: inline-block;
        box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175) !important;
    }

    .live-stamp-preview {
        width: 135px;
        height: 75px;
        transform: translate(-50%, -50%);
        position: absolute;
        pointer-events: none;
        z-index: 999;
        border: 2px dashed #0d6efd !important;
        transition: left 0.1s ease, top 0.1s ease;
    }

    .live-marginalia-preview {
    width: 180px;
    height: 100px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 999;
    border: 2px dashed #dc3545 !important;
    transition: left 0.1s ease, top 0.1s ease;
    background-color: rgba(255, 243, 205, 0.9);
    overflow: hidden;
  }

  .cursor-pointer {
        cursor: pointer !important;
    }