/* ================================================
   SmartHire247 — UX Improvements
   Smooth transitions, skeletons, empty states,
   consistent interactions across all pages
   ================================================ */

/* ── Smooth page-in animation ── */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.animate-in {
  animation: pageIn 0.22s cubic-bezier(0.4, 0, 0.2, 1) both !important;
}

/* ── Skeleton loaders ── */
.skeleton {
  background: linear-gradient(90deg,
    hsla(225,20%,18%,1) 25%,
    hsla(225,20%,24%,1) 50%,
    hsla(225,20%,18%,1) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: 6px;
}
.skeleton-text  { height: 14px; margin-bottom: 8px; }
.skeleton-title { height: 20px; width: 55%; margin-bottom: 12px; }
.skeleton-card  { height: 90px; border-radius: 12px; margin-bottom: 12px; }
.skeleton-avatar{ width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }
.skeleton-btn   { height: 36px; width: 100px; border-radius: 20px; }

/* ── Empty states ── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  gap: 10px;
}
.empty-state .empty-icon  { font-size: 2.6rem; opacity: 0.55; margin-bottom: 4px; }
.empty-state .empty-title { font-size: 0.95rem; font-weight: 600; color: var(--clr-text, #e2e8f0); }
.empty-state .empty-sub   { font-size: 0.8rem; color: var(--clr-text-muted, #94a3b8); max-width: 280px; }
.empty-state .empty-cta   {
  margin-top: 8px;
  padding: 8px 22px;
  background: var(--clr-primary, #7c3aed);
  color: #fff;
  border: none;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
}
.empty-state .empty-cta:hover { opacity: 0.88; transform: translateY(-1px); }

/* ── Toast enhancements — icons ── */
.toast::before {
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.toast.success::before { content: '✅'; }
.toast.error::before   { content: '❌'; }
.toast.warning::before { content: '⚠️'; }
.toast.info::before    { content: 'ℹ️'; }

/* toast show/hide via class */
.toast { opacity: 0; transform: translateX(110%); transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.4,0,0.2,1); }
.toast.show { opacity: 1; transform: translateX(0); }

/* ── Consistent button focus states ── */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--clr-primary, #7c3aed);
  outline-offset: 2px;
}
/* Remove ugly default outline on click but keep for keyboard */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) { outline: none; }

/* ── Card hover lift ── */
.chart-card:not(.no-hover):hover,
.kpi-card:not(.no-hover):hover,
.ln-card:not(.no-hover):hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.chart-card, .kpi-card, .ln-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* ── Smooth scrolling ── */
html { scroll-behavior: smooth; }

/* ── Scrollbar polish ── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: hsla(225,20%,35%,0.7); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: hsla(265,70%,60%,0.7); }

/* ── Input consistency ── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
select,
textarea {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--clr-primary, #7c3aed) !important;
  box-shadow: 0 0 0 3px hsla(265,85%,60%,0.15);
}

/* ── Table row hover ── */
.data-table tbody tr { transition: background 0.15s ease; }
.data-table tbody tr:hover { background: hsla(265,60%,60%,0.06); }

/* ── Sidebar active-item glow ── */
.nav-item.active, .nav-link.active {
  position: relative;
}
.nav-item.active::before, .nav-link.active::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 3px;
  background: var(--clr-primary, #7c3aed);
  border-radius: 0 3px 3px 0;
}

/* ── Page section transitions ── */
.page-section { animation: none; }
.page-section.active { animation: pageIn 0.2s cubic-bezier(0.4,0,0.2,1) both; }
/* candidate uses .hidden / .animate-in */
[id^="page-"]:not(.hidden) { animation: pageIn 0.2s cubic-bezier(0.4,0,0.2,1) both; }

/* ── Button loading state ── */
.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn-loading::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* ── Mobile sidebar overlay ── */
.sidebar-overlay {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* ── Responsive table ── */
@media (max-width: 600px) {
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap table { min-width: 540px; }
  .data-table td, .data-table th { padding: 8px 10px; font-size: 0.78rem; }
}

/* ── Mobile card stack ── */
@media (max-width: 540px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .chart-grid { grid-template-columns: 1fr !important; }
}

/* ── Auth page mobile ── */
@media (max-width: 540px) {
  .auth-split { grid-template-columns: 1fr !important; min-height: unset !important; }
  .auth-illustration { display: none !important; }
  .auth-form-wrap { padding: 28px 20px !important; }
}

/* ── Progress bar in toasts ── */
.toast-progress {
  position: absolute;
  bottom: 0; left: 0;
  height: 3px;
  background: currentColor;
  opacity: 0.4;
  border-radius: 0 0 var(--r-md, 8px) var(--r-md, 8px);
  animation: shrink linear forwards;
}
@keyframes shrink { from { width: 100%; } to { width: 0%; } }

/* ── Community view transitions ── */
#feedView, #messagingView, #groupsView, #peopleView, #profilePreviewOverlay {
  animation: fadeIn 0.18s ease both;
}

/* ── Action button pulse on first load ── */
@keyframes softPulse {
  0%, 100% { box-shadow: 0 0 0 0 hsla(265,85%,60%,0.4); }
  50%       { box-shadow: 0 0 0 8px hsla(265,85%,60%,0); }
}
.btn-pulse { animation: softPulse 2s ease 3; }

/* ── Badge styles (if not defined) ── */
.badge { display:inline-flex; align-items:center; padding:2px 9px; border-radius:20px; font-size:.72rem; font-weight:600; }
.badge-green  { background:hsla(150,70%,45%,0.15); color:#4ade80; }
.badge-blue   { background:hsla(215,90%,60%,0.15); color:#60a5fa; }
.badge-teal   { background:hsla(180,70%,45%,0.15); color:#2dd4bf; }
.badge-gray   { background:hsla(220,15%,50%,0.15); color:#94a3b8; }
.badge-red    { background:hsla(355,85%,60%,0.15); color:#f87171; }
.badge-orange { background:hsla(42,95%,55%,0.15);  color:#fbbf24; }
.badge-purple { background:hsla(265,85%,60%,0.15); color:#a78bfa; }

/* ── Consistent tag chips ── */
.tag, .skill-chip {
  display:inline-flex; align-items:center;
  padding:3px 10px; border-radius:20px;
  font-size:.72rem; font-weight:500;
  background:hsla(265,85%,60%,0.12);
  color:var(--clr-primary-lt, #a78bfa);
  border:1px solid hsla(265,85%,60%,0.2);
  transition:background 0.15s;
}
.tag:hover, .skill-chip:hover { background:hsla(265,85%,60%,0.22); }

/* ── Notification dot ── */
.notif-dot {
  position:absolute; top:4px; right:4px;
  width:8px; height:8px;
  background:var(--clr-danger,#ef4444);
  border-radius:50%;
  border:2px solid var(--clr-bg,#0d1117);
}

/* ── Loading spinner utility ── */
.spinner {
  display:inline-block;
  width:20px; height:20px;
  border:2px solid hsla(265,85%,60%,0.2);
  border-top-color:var(--clr-primary,#7c3aed);
  border-radius:50%;
  animation:spin 0.7s linear infinite;
}
.spinner-sm { width:14px; height:14px; }
.spinner-lg { width:32px; height:32px; border-width:3px; }