/* ═══════════════════════════════════════════
   FUTURISTIC UI ENGINE v1.0
   Next-Gen Design System — Uy Việt 2026
   ═══════════════════════════════════════════ */

/* ── 1. FUTURISTIC COLOR OVERRIDE ── */
:root {
  --neon-blue: #00d4ff;
  --neon-purple: #a855f7;
  --neon-cyan: #22d3ee;
  --neon-green: #10b981;
  --hologram: linear-gradient(135deg, rgba(0,212,255,.08), rgba(168,85,247,.06), rgba(34,211,238,.04));
  --glass-heavy: rgba(255,255,255,.72);
  --glass-light: rgba(255,255,255,.45);
  --mesh-gradient: radial-gradient(at 20% 80%, rgba(56,189,248,.06) 0, transparent 50%),
                   radial-gradient(at 80% 20%, rgba(168,85,247,.05) 0, transparent 50%),
                   radial-gradient(at 50% 50%, rgba(34,211,238,.03) 0, transparent 50%);
}

/* ── 2. PREMIUM BACKGROUND ── */
body {
  background: var(--bg) !important;
  background-image: var(--mesh-gradient) !important;
  background-attachment: fixed !important;
}

/* ── 3. FUTURISTIC SIDEBAR ── */
.sidebar {
  background: linear-gradient(180deg, #050a18 0%, #0a1628 40%, #0d1f3a 100%) !important;
  border-right: 1px solid rgba(0,212,255,.12) !important;
  box-shadow: 4px 0 32px rgba(0,0,0,.3) !important;
}
.sidebar::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(0,212,255,.3), rgba(168,85,247,.2), transparent);
  z-index: 1;
}
.sidebar-logo {
  border-bottom: 1px solid rgba(0,212,255,.1) !important;
  position: relative;
}
.sidebar-logo::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 16px; right: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,.4), transparent);
}
.brand {
  background: linear-gradient(135deg, #fff 30%, #00d4ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.nav-item {
  border-radius: 12px !important;
  transition: all .25s cubic-bezier(.4,0,.2,1) !important;
  position: relative;
  overflow: hidden;
}
.nav-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,212,255,.1), transparent);
  opacity: 0;
  transition: opacity .3s;
}
.nav-item:hover::before { opacity: 1; }
.nav-item:hover {
  background: rgba(0,212,255,.08) !important;
  color: #00d4ff !important;
  transform: translateX(4px);
}
.nav-item.active {
  background: rgba(0,212,255,.12) !important;
  color: #00d4ff !important;
  box-shadow: 0 0 20px rgba(0,212,255,.1), inset 0 0 20px rgba(0,212,255,.03);
}
.nav-item.active::after {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  background: linear-gradient(180deg, #00d4ff, #a855f7);
  border-radius: 0 4px 4px 0;
  box-shadow: 0 0 8px rgba(0,212,255,.5);
}

/* ── 4. HOLOGRAPHIC TOPBAR ── */
.topbar {
  background: rgba(255,255,255,.82) !important;
  backdrop-filter: blur(20px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(200%) !important;
  border-bottom: 1px solid rgba(0,212,255,.08) !important;
  box-shadow: 0 1px 0 rgba(0,212,255,.06), 0 4px 24px rgba(16,36,64,.03) !important;
}

/* ── 5. FUTURISTIC CARDS ── */
.card {
  background: rgba(255,255,255,.88) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(226,232,240,.5) !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.04), 0 1px 4px rgba(0,0,0,.02) !important;
  transition: all .35s cubic-bezier(.34,1.56,.64,1) !important;
}
.card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 16px 48px rgba(0,212,255,.08), 0 4px 16px rgba(0,0,0,.04) !important;
  border-color: rgba(0,212,255,.2) !important;
}
.card::before {
  background: linear-gradient(90deg, #00d4ff, #a855f7, #22d3ee) !important;
  height: 2px !important;
  background-size: 200% 100% !important;
  animation: gradientSlide 3s linear infinite !important;
}
@keyframes gradientSlide {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── 6. STAT CARDS PREMIUM ── */
.stat-card {
  background: rgba(255,255,255,.92) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(226,232,240,.4) !important;
  border-radius: 20px !important;
  transition: all .4s cubic-bezier(.34,1.56,.64,1) !important;
  position: relative;
}
.stat-card:hover {
  transform: translateY(-6px) scale(1.02) !important;
  box-shadow: 0 20px 50px rgba(0,212,255,.12), 0 8px 24px rgba(0,0,0,.06) !important;
  border-color: rgba(0,212,255,.25) !important;
}
.stat-card:hover .stat-icon {
  transform: scale(1.15) rotate(5deg);
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
}
.stat-icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: 16px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px !important;
  transition: all .35s cubic-bezier(.34,1.56,.64,1);
}
.stat-num {
  font-size: 26px !important;
  font-weight: 900 !important;
  letter-spacing: -.5px;
  line-height: 1.2;
}
.stat-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-top: 2px;
}
.stat-change {
  font-size: 11px;
  font-weight: 600;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── 7. FUTURISTIC BUTTONS ── */
.btn {
  border-radius: 12px !important;
  font-weight: 700 !important;
  letter-spacing: -.2px;
  transition: all .25s cubic-bezier(.4,0,.2,1) !important;
  position: relative;
  overflow: hidden;
}
.btn-primary {
  background: linear-gradient(135deg, #00d4ff, #0284c7) !important;
  border: none !important;
  box-shadow: 0 4px 16px rgba(0,212,255,.25) !important;
}
.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 28px rgba(0,212,255,.35) !important;
}
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  transform: translateX(-100%);
  transition: transform .5s;
}
.btn-primary:hover::after {
  transform: translateX(100%);
}
.btn-outline {
  border: 1.5px solid rgba(0,212,255,.2) !important;
  color: var(--text-secondary) !important;
  background: rgba(255,255,255,.6) !important;
  backdrop-filter: blur(8px);
}
.btn-outline:hover {
  border-color: #00d4ff !important;
  color: #0284c7 !important;
  background: rgba(0,212,255,.06) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,212,255,.1);
}

/* ── 8. FUTURISTIC FORMS ── */
.form-input, .form-select, .form-textarea {
  border: 1.5px solid rgba(226,232,240,.6) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.7) !important;
  backdrop-filter: blur(8px);
  transition: all .25s !important;
  font-weight: 500;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: #00d4ff !important;
  box-shadow: 0 0 0 3px rgba(0,212,255,.12), 0 4px 16px rgba(0,212,255,.08) !important;
  background: #fff !important;
}
.form-label {
  font-weight: 700 !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-secondary);
}

/* ── 9. BADGES PREMIUM ── */
.badge {
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: .2px;
  padding: 4px 10px !important;
  backdrop-filter: blur(4px);
}
.badge-green { background: rgba(16,185,129,.12) !important; color: #059669 !important; }
.badge-blue { background: rgba(0,212,255,.12) !important; color: #0284c7 !important; }
.badge-yellow { background: rgba(251,191,36,.12) !important; color: #d97706 !important; }
.badge-red { background: rgba(239,68,68,.12) !important; color: #dc2626 !important; }
.badge-purple { background: rgba(168,85,247,.12) !important; color: #7c3aed !important; }
.badge-orange { background: rgba(249,115,22,.12) !important; color: #ea580c !important; }

/* ── 10. KH CARDS ── */
.kh-card {
  border-radius: 16px !important;
  border: 1px solid rgba(226,232,240,.4) !important;
  background: rgba(255,255,255,.85) !important;
  backdrop-filter: blur(8px);
  transition: all .3s cubic-bezier(.4,0,.2,1) !important;
}
.kh-card:hover {
  transform: translateY(-3px) translateX(2px) !important;
  box-shadow: 0 12px 36px rgba(0,212,255,.08), 0 4px 12px rgba(0,0,0,.04) !important;
  border-color: rgba(0,212,255,.2) !important;
}
.kh-avatar {
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(0,212,255,.15), rgba(168,85,247,.12)) !important;
  color: #0284c7 !important;
  font-weight: 800 !important;
}

/* ── 11. SCROLLBAR ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(0,212,255,.2), rgba(168,85,247,.15));
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(0,212,255,.4), rgba(168,85,247,.3));
}

/* ── 12. SELECTION ── */
::selection { background: rgba(0,212,255,.15); color: inherit; }

/* ── 13. MODAL FUTURISTIC ── */
.modal-body, .modal {
  border-radius: 24px !important;
  border: 1px solid rgba(0,212,255,.1) !important;
  box-shadow: 0 32px 80px rgba(0,0,0,.15), 0 0 60px rgba(0,212,255,.06) !important;
  backdrop-filter: blur(20px) !important;
}
.modal-header {
  border-bottom: 1px solid rgba(0,212,255,.08) !important;
  padding: 20px 24px !important;
}

/* ── 14. CHIPS/TABS ── */
.chip {
  border-radius: 10px !important;
  border: 1.5px solid rgba(226,232,240,.5) !important;
  font-weight: 600 !important;
  transition: all .25s !important;
}
.chip:hover, .chip.selected {
  border-color: #00d4ff !important;
  background: rgba(0,212,255,.08) !important;
  color: #0284c7 !important;
  box-shadow: 0 2px 12px rgba(0,212,255,.1);
}
.tab {
  font-weight: 700 !important;
  position: relative;
  transition: all .25s !important;
}
.tab.active {
  color: #00d4ff !important;
}
.tab.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #00d4ff, #a855f7);
  border-radius: 3px;
  box-shadow: 0 0 8px rgba(0,212,255,.3);
}

/* ── 15. EMPTY STATE ── */
.empty-state {
  padding: 40px 20px !important;
}
.empty-icon {
  font-size: 40px !important;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.1));
  animation: float 3s ease-in-out infinite;
}
@keyframes float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ── 16. SEARCH BOX ── */
.search-box input {
  border-radius: 14px !important;
  border: 1.5px solid rgba(226,232,240,.5) !important;
  background: rgba(255,255,255,.7) !important;
  backdrop-filter: blur(8px);
  transition: all .25s !important;
}
.search-box input:focus {
  border-color: #00d4ff !important;
  box-shadow: 0 0 0 3px rgba(0,212,255,.1), 0 4px 20px rgba(0,212,255,.06) !important;
  background: #fff !important;
}

/* ── 17. PAGE ANIMATIONS ── */
.content { animation: pageSlideIn .5s cubic-bezier(.4,0,.2,1) both; }
@keyframes pageSlideIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── 18. FOCUS STATES ── */
*:focus-visible {
  outline: 2px solid rgba(0,212,255,.5) !important;
  outline-offset: 2px;
  border-radius: 8px;
}

/* ── 19. PROGRESS BAR ── */
.progress-bar {
  border-radius: 99px !important;
  overflow: hidden;
}
.progress-bar > div {
  background: linear-gradient(90deg, #00d4ff, #a855f7) !important;
  box-shadow: 0 0 12px rgba(0,212,255,.3);
  transition: width .8s cubic-bezier(.4,0,.2,1);
}

/* ── 20. RESPONSIVE ── */

/* Tablet */
@media(max-width: 1024px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .content { padding: 20px !important; }
  .stat-num { font-size: 22px !important; }
}

/* Mobile */
@media(max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform .35s cubic-bezier(.4,0,.2,1);
    z-index: 1000 !important;
    width: 280px !important;
  }
  .sidebar.open { transform: translateX(0); box-shadow: 8px 0 40px rgba(0,0,0,.5); }
  .main { margin-left: 0 !important; }
  .content { padding: 12px !important; animation: none !important; }
  .topbar {
    padding: 0 12px !important;
    height: 56px !important;
    gap: 8px !important;
  }
  .topbar-title { font-size: 14px !important; }
  
  /* Stat cards stack 2 cols */
  .stat-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .stat-card { padding: 14px 12px !important; border-radius: 14px !important; }
  .stat-icon { width: 40px !important; height: 40px !important; font-size: 18px !important; }
  .stat-num { font-size: 20px !important; }
  
  /* Cards */
  .card { border-radius: 14px !important; padding: 14px !important; }
  .card:hover { transform: none !important; }
  
  /* KH cards */
  .kh-card { border-radius: 12px !important; }
  .kh-card:hover { transform: none !important; }
  
  /* Touch-friendly buttons */
  .btn { min-height: 44px; font-size: 14px !important; padding: 10px 16px !important; }
  .chip { min-height: 36px; display: inline-flex; align-items: center; padding: 6px 12px !important; }
  
  /* Forms touch-friendly */
  .form-input, .form-select, .form-textarea {
    min-height: 44px;
    font-size: 16px !important; /* prevents iOS zoom */
    border-radius: 10px !important;
  }
  
  /* Hide hover effects on mobile */
  .stat-card:hover { transform: none !important; box-shadow: var(--shadow) !important; }
  
  /* Bottom safe area */
  .content { padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important; }
  
  /* Sidebar overlay */
  .sidebar-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.5);
    z-index: 999; opacity: 0; pointer-events: none;
    transition: opacity .3s;
  }
  .sidebar-overlay.visible { opacity: 1; pointer-events: auto; }
}

/* Small phones */
@media(max-width: 400px) {
  .stat-grid { grid-template-columns: 1fr !important; }
  .topbar-actions .btn { font-size: 12px !important; padding: 8px 10px !important; }
  .topbar-title { font-size: 13px !important; }
}

/* ── 21. DARK MODE FUTURISTIC ── */
body.dark-mode {
  --bg: #080c16;
  background: #080c16 !important;
  background-image: radial-gradient(at 20% 80%, rgba(0,212,255,.04) 0, transparent 50%),
                     radial-gradient(at 80% 20%, rgba(168,85,247,.03) 0, transparent 50%) !important;
}
body.dark-mode .card {
  background: rgba(15,23,42,.85) !important;
  border-color: rgba(0,212,255,.08) !important;
}
body.dark-mode .stat-card {
  background: rgba(15,23,42,.9) !important;
  border-color: rgba(0,212,255,.1) !important;
}
body.dark-mode .stat-card:hover {
  box-shadow: 0 20px 50px rgba(0,212,255,.08), 0 0 30px rgba(0,212,255,.04) !important;
}
body.dark-mode .topbar {
  background: rgba(8,12,22,.9) !important;
  border-color: rgba(0,212,255,.08) !important;
}
body.dark-mode .kh-card {
  background: rgba(15,23,42,.8) !important;
  border-color: rgba(0,212,255,.08) !important;
}
body.dark-mode .btn-outline {
  border-color: rgba(0,212,255,.15) !important;
  background: rgba(15,23,42,.6) !important;
  color: #94a3b8 !important;
}
body.dark-mode .form-input,
body.dark-mode .form-select,
body.dark-mode .form-textarea {
  background: rgba(15,23,42,.7) !important;
  border-color: rgba(0,212,255,.1) !important;
  color: #e2e8f0 !important;
}
body.dark-mode .form-input:focus,
body.dark-mode .form-select:focus {
  border-color: #00d4ff !important;
  box-shadow: 0 0 0 3px rgba(0,212,255,.08) !important;
}
body.dark-mode .search-box input {
  background: rgba(15,23,42,.7) !important;
  border-color: rgba(0,212,255,.1) !important;
  color: #e2e8f0 !important;
}
body.dark-mode .chip {
  background: rgba(15,23,42,.6) !important;
  border-color: rgba(0,212,255,.1) !important;
  color: #94a3b8 !important;
}
body.dark-mode .modal-body,
body.dark-mode .modal {
  background: rgba(15,23,42,.95) !important;
  border-color: rgba(0,212,255,.1) !important;
}