/* 🎨 八方環球 ERP V14.0 樣式表 */

/* 基本樣式 */
body { 
  -webkit-tap-highlight-color: transparent; 
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei", Arial, sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background-attachment: fixed;
  min-height: 100vh;
  font-size: 16px;
}

/* 📐 統一字體層級系統 */
.text-l1 { font-size: 26px; font-weight: 900; }
.text-l2 { font-size: 20px; font-weight: 700; }
.text-l3 { font-size: 18px; font-weight: 700; }
.text-l4 { font-size: 18px; }
.text-l5 { font-size: 16px; color: #6b7280; }
.text-l6 { font-size: 16px; color: #9ca3af; }

/* 🌊 玻璃擬態效果 */
.glass {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.glass-dark {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* 💎 現代化卡片陰影 */
.card-shadow {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12),
              0 1px 8px rgba(0, 0, 0, 0.08);
}

.card-shadow-lg {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15),
              0 10px 30px rgba(0, 0, 0, 0.12);
}

/* 🎨 漸變按鈕 */
.btn-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  transition: all 0.3s ease;
}

.btn-gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5);
}

.btn-gradient:active {
  transform: translateY(0);
}

/* 🌈 漸變文字 */
.text-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ✨ 流暢動畫 */
@keyframes slideUp {
  from { transform: translateY(30px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.animate-slide-up { animation: slideUp 0.4s ease-out; }
.animate-fade-in { animation: fadeIn 0.3s ease-out; }
.animate-pulse { animation: pulse 2s ease-in-out infinite; }

/* 🎯 購物車徽章 */
.cart-badge {
  animation: pulse 2s ease-in-out infinite;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}

/* 🎯 庫存狀態徽章 */
.badge-green {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.badge-yellow {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.badge-red {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

/* 🎪 載入動畫 */
.loader { 
  border: 3px solid rgba(255, 255, 255, 0.3); 
  border-top: 3px solid #fff; 
  border-radius: 50%; 
  width: 20px; 
  height: 20px; 
  animation: spin 1s linear infinite; 
}

/* SVG 圖示 */
.icon-svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-svg-sm { width: 16px; height: 16px; }
.icon-svg-lg { width: 24px; height: 24px; }

/* 📜 隱藏滾動條 */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* 🖨️ 列印樣式 */
@media print {
  body { background: white !important; }
  .no-print { display: none !important; }
  .glass { background: white !important; backdrop-filter: none !important; }
  @page { size: A4; margin: 15mm; }
}