/* HRDM custom styles — supplements Tailwind */

html { scroll-behavior: smooth; }

/* Form controls — consistent height with Tailwind */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="number"], input[type="url"],
input[type="file"], select, textarea {
  font-family: inherit;
}

select, input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="url"] {
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid #cbd5e1;
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}

select:focus, input:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* KPI card hover */
.kpi-card {
  transition: transform .15s, box-shadow .15s;
}
.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.05);
}

/* Scrollbar (WebKit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Table hover for the records table */
tbody tr { transition: background-color .1s; }

/* Loading shimmer for KPI cards before data lands */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer {
  background: linear-gradient(90deg,
              rgba(255,255,255,0) 0%,
              rgba(255,255,255,0.2) 50%,
              rgba(255,255,255,0) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}

/* Hide native select arrow on mobile when stacked */
@media (max-width: 768px) {
  select { background-position: right 0.5rem center; }
}

/* Print — hide nav for printable report */
@media print {
  aside, header, footer, button { display: none !important; }
  .kpi-card { box-shadow: none !important; border: 1px solid #e2e8f0; color: #000 !important; }
  body { background: white !important; }
}