@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* =======================================================
   PREMIUM SaaS UI/UX ENHANCEMENTS - WHX Growth Theme
   ======================================================= */

:root {
  --dash-bg: #0b0b0d;
  --dash-surface: #17171c;
  --dash-surface-hover: #1f1f26;
  --dash-border: #27272d;
  --dash-text: #f4f4f5;
  --dash-text-muted: #a1a1aa;
  --dash-primary: #f5a623;
  --dash-primary-dim: rgba(245, 166, 35, 0.12);
  --dash-stamp: #f0b65a;
  --sidebar-width: 280px;
}

body.dashboard-body {
  background-color: var(--dash-bg) !important;
  color: var(--dash-text) !important;
  font-family: 'Inter', sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', sans-serif !important;
  letter-spacing: -0.03em;
}

/* === SIDEBAR PREMIUM === */
.dashboard-sidebar {
  background: var(--dash-surface) !important;
  border-right: 1px solid var(--dash-border) !important;
  box-shadow: none !important;
  position: relative;
}
.dashboard-sidebar::before {
  content: '';position: absolute;top: 0;right: 0;width: 1px;height: 100%;
  background: linear-gradient(180deg, transparent, rgba(245, 166, 35, 0.3), transparent);z-index: 1;
}
.sidebar-header::after {
  content: '';position: absolute;bottom: 0;left: 20%;right: 20%;height: 1px;
  background: linear-gradient(90deg, transparent, rgba(245, 166, 35, 0.4), transparent);
}
.sidebar-header .logo-icon-svg {
  filter: drop-shadow(0 0 8px rgba(245, 166, 35, 0.5));
  animation: logoGlow 3s ease-in-out infinite alternate;
}
@keyframes logoGlow {
  from { filter: drop-shadow(0 0 4px rgba(245, 166, 35, 0.3)); }
  to { filter: drop-shadow(0 0 12px rgba(245, 166, 35, 0.7)); }
}
.sidebar-nav a {
  position: relative;overflow: hidden;transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 6px;
  margin: 4px 16px;
  padding-left: 12px;
}
.sidebar-nav a::before {
  content: '';position: absolute;top: 0;left: 0;width: 3px;height: 100%;
  background: var(--dash-primary);opacity: 0;transform: scaleY(0);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s;
}
.sidebar-nav li.active a,
.sidebar-nav a.active {
  background: rgba(245, 166, 35, 0.1) !important;
  color: #fff !important;
  border: 1px solid rgba(245, 166, 35, 0.25) !important;
  font-weight: 600;
}
.sidebar-nav li.active a::before,
.sidebar-nav a.active::before {
  opacity: 1;transform: scaleY(1);
}

/* === CARD MICRO-INTERACTIONS === */
.stat-card, .chart-card, .table-card, .grid-card {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s, box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative;
  overflow: hidden;
  background: #17171c !important;
  border: 1px solid var(--dash-border) !important;
}
.stat-card::before, .chart-card::before, .table-card::before {
  content: '';position: absolute;top: 0;left: 0;width: 100%;height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}
.stat-card:hover, .chart-card:hover, .table-card:hover {
  transform: translateY(-2px);
  border-color: rgba(245, 166, 35, 0.35) !important;
  box-shadow: 0 16px 36px -16px rgba(0, 0, 0, 0.7) !important;
}

/* === BUTTON GLOBAL PREMIUM === */
.button, button[class*="button"] { 
  transition: transform 0.28s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s cubic-bezier(0.16,1,0.3,1), border-color 0.25s !important;
  border-radius: 10px !important;
}
.button:hover, button[class*="button"]:hover { transform: translateY(-1px); }
.button:active, button[class*="button"]:active { transform: translateY(0) scale(0.985) !important; }

.button-primary, button.btn-amber { 
  background: linear-gradient(135deg, #f5a623 0%, #d97706 100%) !important;
  color: #09090b !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 24px -6px rgba(245, 166, 35, 0.6) !important;
  border: none !important;
}
.button-primary:hover, button.btn-amber:hover { 
  background: linear-gradient(135deg, #fbbf24 0%, #f5a623 100%) !important;
  box-shadow: 0 14px 32px -8px rgba(245, 166, 35, 0.85) !important; 
  transform: translateY(-1px) !important;
}

/* === TAB PAGE ANIMATION === */
.tab-pane { animation: tabFadeIn 0.4s ease-out; }
@keyframes tabFadeIn { from { opacity: 0;transform: translateY(10px); } to { opacity: 1;transform: translateY(0); } }

/* === TERMINAL LOG ANIMATION === */
.terminal-logs div { animation: logSlideIn 0.3s ease-out; }
@keyframes logSlideIn { from { opacity: 0;transform: translateX(-10px); } to { opacity: 1;transform: translateX(0); } }

/* === HIDE ALL UGLY SCROLLBARS GLOBALLY === */
::-webkit-scrollbar {
  width: 0px !important;
  height: 0px !important;
  display: none !important;
}
* {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}