/* ============================================================
   Portal Program & Data Dinkes — Custom Styles
   ============================================================ */

/* --- Custom scrollbar for iframe modal --- */
.sheet-iframe-scroll::-webkit-scrollbar {
  width: 8px;
}
.sheet-iframe-scroll::-webkit-scrollbar-track {
  background: #f1f5f9;
}
.sheet-iframe-scroll::-webkit-scrollbar-thumb {
  background: #94a3b8;
  border-radius: 4px;
}
.sheet-iframe-scroll::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* --- Skeleton loader animation --- */
@keyframes shimmer {
  0% {
    background-position: -400px 0;
  }
  100% {
    background-position: 400px 0;
  }
}
.skeleton {
  background: linear-gradient(
    90deg,
    #e2e8f0 25%,
    #f1f5f9 50%,
    #e2e8f0 75%
  );
  background-size: 800px 100%;
  animation: shimmer 1.6s infinite linear;
  border-radius: 8px;
}

/* --- Modal enter/exit --- */
.modal-enter {
  animation: modalFadeIn 0.25s ease-out;
}
@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* --- Ensure iframe container fills available height --- */
.sheet-viewport {
  height: calc(100vh - 56px); /* minus frame-bar height */
  min-height: 80vh;
}

/* --- High-contrast focus for a11y --- */
*:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- Reduced motion preference --- */
@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
  }
  .modal-enter {
    animation: none;
  }
}