src/index.css

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..800&family=Atkinson+Hyperlegible+Next:ital,wght@0,300..700;1,300..700&display=swap');
@import "tailwindcss";

@theme {
  --font-sans: "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
}

body {
  font-family: var(--font-sans);
  background-color: #f7fafc;
  color: #181c1e;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.canvas-bg {
  background-image: radial-gradient(circle at 2px 2px, #e2e8f0 1px, transparent 0);
  background-size: 24px 24px;
}

/* Elegant SVG Animated Checkmark - Lottie style */
@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}

@keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 45px #0077b6;
  }
}

.checkmark-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.checkmark-circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 4;
  stroke-miterlimit: 10;
  stroke: #0077b6;
  fill: none;
  animation: stroke 0.5s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: block;
  stroke-width: 4;
  stroke: #fff;
  stroke-miterlimit: 10;
  box-shadow: inset 0px 0px 0px #0077b6;
  animation: fill .3s ease-in-out .3s forwards, scale .2s ease-in-out .6s entries;
}

.checkmark-check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.6s forwards;
}

@keyframes slide-scan {
  0%, 100% {
    top: 0%;
  }
  50% {
    top: 100%;
  }
}

/* Custom Landing Page Keyframes & Animations */
@keyframes drift {
  0% {
    transform: translateY(100vh) scale(0.6);
    opacity: 0;
  }
  15% {
    opacity: 0.4;
  }
  85% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(-10vh) scale(1);
    opacity: 0;
  }
}

.particle {
  position: absolute;
  border-radius: 50%;
  background: white;
  pointer-events: none;
  animation: drift var(--duration, 8s) linear infinite;
  opacity: 0;
}

@keyframes ticker-scroll {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-33.333%, 0, 0);
  }
}

.animate-ticker {
  display: flex;
  width: max-content;
  animation: ticker-scroll 35s linear infinite;
}

.animate-ticker:hover {
  animation-play-state: paused;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-12px);
  }
}

.floating-mockup {
  animation: float 5s ease-in-out infinite;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.shimmer-button {
  background: linear-gradient(90deg, #1D9E75 0%, #29be8f 25%, #1D9E75 50%, #29be8f 75%, #1D9E75 100%);
  background-size: 200% auto;
  animation: shimmer 4s linear infinite;
}

.shimmer-button:hover {
  animation-play-state: paused;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.animate-blink {
  animation: blink 1s step-end infinite;
}

@keyframes wave-drift {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}


.animate-wave {
  display: flex;
  width: 200%;
  animation: wave-drift 40s linear infinite;
}

/* Dual-purpose print/screen referral note styles */
@media print {
  /* Hide specific non-print utility elements completely */
  aside,
  footer,
  header,
  nav,
  button,
  .no-print,
  .action-buttons {
    display: none !important;
  }

  /* Make everything hidden by default to keep page clean */
  body * {
    visibility: hidden;
  }

  /* Force background colors to print exactly */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  body {
    background: white !important;
    color: #0A1628 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 8.5pt !important;
    line-height: 1.25 !important;
  }

  /* Make sure ONLY the print-wrapper and its descendants are visible and centered */
  .print-wrapper,
  .print-wrapper * {
    visibility: visible !important;
  }

  .print-wrapper {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: white !important;
  }

  /* Stretch the card body edge-to-edge on the printed page with elegant margins */
  .print-wrapper > div {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 100vh !important;
    padding: 16px !important; /* Elegant outer buffer for document content */
    box-sizing: border-box !important;
    background: white !important;
  }

  /* Compact padding & margin overrides inside the card for print */
  .print-wrapper .p-6,
  .print-wrapper .p-8,
  .print-wrapper .md\:p-8 {
    padding: 0px !important; /* Keeps child nesting collapsed to trust the main wrapper margins */
  }

  .print-wrapper .mb-4 { margin-bottom: 4px !important; }
  .print-wrapper .mb-6 { margin-bottom: 6px !important; }
  .print-wrapper .mt-8 { margin-top: 8px !important; }
  .print-wrapper .gap-6 { gap: 8px !important; }
  
  .print-wrapper .py-2 {
    padding-top: 1.5px !important;
    padding-bottom: 1.5px !important;
  }

  .print-wrapper .p-3\.5 {
    padding: 5px !important;
  }

  .print-wrapper .min-h-\[60px\] {
    min-height: auto !important;
  }

  /* Force layout grid to 2-columns and prevent alignment breaks */
  .print-wrapper .grid-cols-1 {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
  }

  .print-wrapper .md\:col-span-7 {
    grid-column: span 7 / span 7 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .print-wrapper .md\:col-span-5 {
    grid-column: span 5 / span 5 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* Render the assessment photo and saliency heatmap side-by-side in print and cap their heights */
  .print-wrapper .md\:col-span-5 > .space-y-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .print-wrapper .md\:col-span-5 > .space-y-2 h4 {
    grid-column: span 2 !important;
    border-bottom: 1px solid #bae6fd !important;
    padding-bottom: 2px !important;
    margin-bottom: 2px !important;
  }

  .print-wrapper .md\:col-span-5 > .space-y-2 .relative.aspect-square {
    grid-column: span 1 !important;
    width: 100% !important;
    height: 85px !important; /* Cap the image height in print to save massive vertical space */
    aspect-ratio: auto !important;
  }

  .print-wrapper .md\:col-span-5 > .space-y-2 span {
    grid-column: span 2 !important;
    margin-top: 1px !important;
    font-size: 7.5pt !important;
  }

  /* Styling Inputs and Textareas to print beautifully as plain text */
  .print-wrapper input,
  .print-wrapper textarea {
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    resize: none !important;
    outline: none !important;
    pointer-events: none !important;
    color: #0A1628 !important;
    width: 100% !important;
    font-size: 8.5pt !important;
    line-height: 1.2 !important;
  }

  /* Soft colors for headings in print */
  h4 {
    color: #082F49 !important;
  }

  /* Soft borders for print */
  .print-wrapper .border-slate-200 {
    border-color: #e2e8f0 !important;
  }

  /* Compact signatures block */
  .print-wrapper .grid-cols-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin-top: 8px !important;
    padding-top: 6px !important;
  }

  .print-wrapper canvas {
    height: 40px !important;
  }

  .print-wrapper .h-16 {
    height: 40px !important;
  }

  @page {
    size: A4 portrait;
    margin: 0; /* Zero page margins for edge-to-edge stretching */
  }
}