/* 
   HIGHER CRM — UI POLISH & SKELETON LOADERS
   Refining transitions and perceived performance
*/

:root {
  --skeleton-bg: rgba(255, 255, 255, 0.05);
  --skeleton-shine: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
}

/* --- SKELETON ANIMATION --- */
@keyframes skeleton-loading {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.skeleton {
  position: relative;
  overflow: hidden;
  background-color: var(--skeleton-bg);
  border-radius: 4px;
}

.skeleton::after {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: var(--skeleton-shine);
  animation: skeleton-loading 1.5s infinite;
}

/* Specific Skeletons */
.skeleton-card { height: 180px; border-radius: 12px; margin-bottom: 1rem; }
.skeleton-row { height: 48px; border-radius: 6px; margin-bottom: 8px; }
.skeleton-text { height: 14px; margin-bottom: 8px; border-radius: 2px; }
.skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; }

/* --- VIEW TRANSITIONS --- */
.view {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  display: none;
}

.view.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* --- MODAL POLISH --- */
.modal-overlay {
  backdrop-filter: blur(8px);
  transition: opacity 0.3s ease;
}

.modal-content {
  transform: scale(0.95);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
  background: rgba(15, 15, 20, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.modal-overlay.open .modal-content {
  transform: scale(1);
  opacity: 1;
}

/* --- HOVER EFFECTS --- */
.nav-item {
  transition: all 0.2s ease;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateX(4px);
}

.stat-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
}

.btn-primary, .btn-ghost {
  transition: all 0.2s ease;
}

.btn-primary:active { transform: scale(0.97); }

/* Table enhancements */
.data-table tbody tr {
  transition: background 0.2s ease;
}

.data-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.02) !important;
}