/* ============================================================
   NCA CBMS · Custom styles (supplementing Tailwind CDN)
   Brand: #6ec1e4 (primary)  |  #000000 (secondary)
   ============================================================ */

:root {
  --brand-primary: #6ec1e4;
  --brand-secondary: #000000;
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Print-friendly export pages */
@media print {
  .no-print, header, aside, footer, button { display: none !important; }
  body { background: white !important; color: black !important; }
  main { max-width: 100% !important; padding: 0 !important; }
  .print-block { display: block !important; }
  table { page-break-inside: auto; }
  tr { page-break-inside: avoid; }
}

/* Subtle scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(100,116,139,.3); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,.5); background-clip: content-box; }

/* Brand chip / pill animations */
.shimmer {
  position: relative;
  overflow: hidden;
}
.shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: shimmer 2.5s infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

/* Card hover lift */
.card-lift {
  transition: transform .2s ease, box-shadow .2s ease;
}
.card-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.15);
}

/* Calendar grid */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.cal-cell {
  aspect-ratio: 1 / 0.85;
  background: white;
  border-radius: 12px;
  padding: 6px 8px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgb(226 232 240);
  overflow: hidden;
}
.cal-cell.today { background: linear-gradient(135deg, #eafbff, white); border-color: var(--brand-primary); }
.cal-cell.out { opacity: 0.4; }
.cal-event { font-size: 10px; padding: 2px 6px; border-radius: 4px; background: rgba(110,193,228,.18); color: #1c5275; margin-bottom: 2px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Form inputs (when not using Tailwind utilities directly) */
.input { @apply block w-full px-3.5 py-2.5 rounded-lg bg-white ring-1 ring-slate-300 focus:ring-2 focus:ring-brand-400 focus:border-transparent outline-none transition placeholder:text-slate-400 text-sm; }
textarea.input { @apply min-h-[100px] py-2.5; }
select.input { @apply pr-9 appearance-none bg-no-repeat; background-position: right .75rem center; background-size: 1rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.label { @apply block text-sm font-medium text-slate-700 mb-1.5; }
.help { @apply text-xs text-slate-500 mt-1; }

/* Subtle stat card glow */
.stat-card {
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: "";
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(110,193,228,.12), transparent 60%);
  pointer-events: none;
}