/* Custom Base Tweaks & Print Styles */
@layer utilities {
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

/* Print Rules for Official Document Generation */
@media print {
  body {
    background: #ffffff !important;
    padding-bottom: 0 !important;
  }
  header,
  footer,
  section:not(#tab-report),
  .tab-btn,
  #tab-assessment,
  #tab-analytics,
  #tab-goals,
  .btn-print-report,
  #modal-profiles,
  #modal-goal,
  #modal-beneficiary-details,
  #modal-auth,
  #modal-subscription,
  #modal-admin,
  #btn-share-app,
  #toast {
    display: none !important;
  }
  #tab-report {
    display: block !important;
  }
  #printable-document {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
}

/* Custom Range / Slider Styling */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: #E2E8F0;
  border-radius: 9999px;
  height: 6px;
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #00897B;
  border: 2px solid #FFFFFF;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  cursor: pointer;
  transition: transform 0.1s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  background: #00695C;
}

/* Timeline Card Active State */
.timeline-step.active {
  background: linear-gradient(135deg, #004D40 0%, #00695C 100%);
  color: #FFFFFF !important;
  border-color: #D4AF37;
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -5px rgba(0, 77, 64, 0.3);
}

.timeline-step.active .timeline-age-badge {
  background-color: rgba(212, 175, 55, 0.25);
  color: #FBF5E6;
  border-color: rgba(212, 175, 55, 0.6);
}

.timeline-step.active .timeline-title {
  color: #FFFFFF;
}

  .timeline-step.active .timeline-desc {
    color: #E0F2F1;
  }