/* 牛马工作站 - Shared component styles and semantic fallbacks */

/* Semantic token fallback classes */
.bg-background { background-color: var(--nm-background); }
.text-background { color: var(--nm-background); }
.border-background { border-color: var(--nm-background); }
.bg-foreground { background-color: var(--nm-foreground); }
.text-foreground { color: var(--nm-foreground); }
.border-foreground { border-color: var(--nm-foreground); }
.bg-card { background-color: var(--nm-card); }
.text-card { color: var(--nm-card); }
.border-card { border-color: var(--nm-card); }
.bg-card-foreground { background-color: var(--nm-card-foreground); }
.text-card-foreground { color: var(--nm-card-foreground); }
.border-card-foreground { border-color: var(--nm-card-foreground); }
.bg-popover { background-color: var(--nm-popover); }
.text-popover { color: var(--nm-popover); }
.border-popover { border-color: var(--nm-popover); }
.bg-popover-foreground { background-color: var(--nm-popover-foreground); }
.text-popover-foreground { color: var(--nm-popover-foreground); }
.border-popover-foreground { border-color: var(--nm-popover-foreground); }
.bg-primary { background-color: var(--nm-primary); }
.text-primary { color: var(--nm-primary); }
.border-primary { border-color: var(--nm-primary); }
.bg-primary-foreground { background-color: var(--nm-primary-foreground); }
.text-primary-foreground { color: var(--nm-primary-foreground); }
.border-primary-foreground { border-color: var(--nm-primary-foreground); }
.bg-muted { background-color: var(--nm-muted); }
.text-muted { color: var(--nm-muted); }
.border-muted { border-color: var(--nm-muted); }
.bg-muted-foreground { background-color: var(--nm-muted-foreground); }
.text-muted-foreground { color: var(--nm-muted-foreground); }
.border-muted-foreground { border-color: var(--nm-muted-foreground); }
.bg-border { background-color: var(--nm-border); }
.text-border { color: var(--nm-border); }
.border-border { border-color: var(--nm-border); }
.bg-input { background-color: var(--nm-input); }
.text-input { color: var(--nm-input); }
.border-input { border-color: var(--nm-input); }
.bg-ring { background-color: var(--nm-ring); }
.text-ring { color: var(--nm-ring); }
.border-ring { border-color: var(--nm-ring); }
.bg-accent { background-color: var(--nm-accent); }
.text-accent { color: var(--nm-accent); }
.border-accent { border-color: var(--nm-accent); }

/* Custom component styles */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
[data-icon] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background-color: currentColor;
}
.hero-grid {
  background-image:
    linear-gradient(to right, rgb(15 23 42 / 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(15 23 42 / 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 60% 40%, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 60% 40%, black 20%, transparent 70%);
}
.hero-glow {
  background: radial-gradient(circle at 50% 50%, rgb(6 182 212 / 0.12), transparent 60%);
}
.text-gradient {
  background: linear-gradient(135deg, #0e7490 0%, #06b6d4 50%, #0891b2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.card-lift {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s ease;
}
.card-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--nm-shadow-floating);
}
.glass-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.6);
}
.gradient-border {
  position: relative;
  background: linear-gradient(var(--nm-card), var(--nm-card)) padding-box,
              linear-gradient(135deg, rgba(6,182,212,0.4), rgba(15,23,42,0.1)) border-box;
  border: 1px solid transparent;
}
.chip {
  background: rgba(6,182,212,0.08);
  border: 1px solid rgba(6,182,212,0.16);
  backdrop-filter: blur(4px);
}
.search-glow:focus-within {
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.20), 0 0 25px -5px rgba(6, 182, 212, 0.15);
  border-color: rgba(6, 182, 212, 0.45);
}