/* ═══════════════════════════════════════════════════
   VELTRIX OS 2035 — Global Enhancement CSS v1.0
   Micro-interactions, animations, polish
   ═══════════════════════════════════════════════════ */

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

/* Futuristic scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--brand-primary, #C13B2E) transparent; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-thumb { background: var(--brand-primary, #C13B2E); border-radius: 10px; }
::-webkit-scrollbar-track { background: transparent; }

/* Page enter animation */
.content, main > .content, .main-content {
  animation: vx2035-page-enter 0.3s ease forwards;
}
@keyframes vx2035-page-enter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Skeleton loader utility */
.skeleton, .vx-skeleton {
  background: linear-gradient(90deg, var(--surface-2,#f3f4f6) 25%, var(--border,#e5e7eb) 50%, var(--surface-2,#f3f4f6) 75%);
  background-size: 200% 100%;
  animation: vx2035-skeleton 1.5s infinite;
  border-radius: 6px;
}
@keyframes vx2035-skeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Card hover depth */
.card, .n2-card, [class*="-card"], .stat-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.card:hover, .n2-card:hover, [class*="-card"]:hover, .stat-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.1) !important;
}

/* Input focus glow */
input:not([type=checkbox]):not([type=radio]):focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--brand-primary, #C13B2E) !important;
  box-shadow: 0 0 0 3px rgba(193,59,46,0.15) !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}

/* Button ripple base */
.btn, .n2-btn, button[class*="btn-"] {
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, opacity 0.15s ease !important;
}
.btn:active, .n2-btn:active, button[class*="btn-"]:active {
  transform: scale(0.97) !important;
}

/* Sidebar active indicator */
.sb-item.active::before,
.sidebar-item.active::before,
[class*="nav-item"].active::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--brand-primary, #C13B2E);
  border-radius: 0 3px 3px 0;
}
.sb-item, .sidebar-item, [class*="nav-item"] {
  position: relative;
  transition: padding-left 0.2s ease, background 0.15s ease !important;
}

/* Progress bar shimmer */
.n2-progress-fill,
[class*="progress-fill"],
.progress-bar > div {
  background: linear-gradient(90deg,
    var(--brand-primary, #C13B2E) 0%,
    rgba(193,59,46,0.7) 50%,
    var(--brand-primary, #C13B2E) 100%) !important;
  background-size: 200% 100% !important;
  animation: vx2035-shimmer 2s linear infinite !important;
}
@keyframes vx2035-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Notification badge pulse */
.notif-count, [class*="badge-count"], .unread-count {
  animation: vx2035-badge-pulse 2s infinite;
}
@keyframes vx2035-badge-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(193,59,46,0.4); }
  50%      { box-shadow: 0 0 0 5px rgba(193,59,46,0); }
}

/* Modal backdrop blur */
.modal-overlay, [class*="modal-bg"], .modal-backdrop {
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* Table row hover */
tbody tr {
  transition: background 0.15s !important;
}
tbody tr:hover td {
  background: rgba(193,59,46,0.04) !important;
}

/* Toast micro-animation */
.toast, [class*="toast"], .n2-toast {
  animation: vx2035-toast-in 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
@keyframes vx2035-toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Dropdown appear */
.dropdown-menu, [class*="dropdown-content"] {
  animation: vx2035-dropdown 0.15s ease;
  transform-origin: top center;
}
@keyframes vx2035-dropdown {
  from { opacity: 0; transform: scaleY(0.95); }
  to   { opacity: 1; transform: scaleY(1); }
}

/* Avatar glow on hover */
.avatar, [class*="emp-avatar"], [class*="user-avatar"] {
  transition: box-shadow 0.2s ease, transform 0.2s ease !important;
}
.avatar:hover, [class*="emp-avatar"]:hover {
  box-shadow: 0 0 0 3px var(--brand-primary, #C13B2E) !important;
  transform: scale(1.05) !important;
}

/* Mobile improvements */
@media (max-width: 768px) {
  .content, .main-content { padding: 12px !important; }
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .n2-stats-grid, [class*="stats-grid"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Dark mode card borders */
[data-theme="dark"] .card,
[data-theme="dark"] .n2-card {
  border-color: rgba(255,255,255,0.06) !important;
}
[data-theme="dark"] tbody tr:hover td {
  background: rgba(255,255,255,0.04) !important;
}

/* Focus visible outline for a11y */
:focus-visible {
  outline: 2px solid var(--brand-primary, #C13B2E) !important;
  outline-offset: 2px !important;
}

/* Status chip colors */
.status-hot     { background: #FEF2F2; color: #B91C1C; }
.status-warm    { background: #FFFBEB; color: #92400E; }
.status-cold    { background: #EFF6FF; color: #1D4ED8; }
.status-converted { background: #ECFDF5; color: #065F46; }
.status-lost    { background: #F9FAFB; color: #6B7280; }