/* ═══════════════════════════════════════
   GEOStudio Design System v4 — 统一规范
   ═══════════════════════════════════════ */

/* ── CSS 变量（全局设计令牌） ── */
:root {
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  
  --color-primary: #6366f1;
  --color-primary-dark: #4f46e5;
  --color-primary-light: #eef2ff;
  
  --color-success: #10b981;
  --color-success-light: #d1fae5;
  --color-warning: #f59e0b;
  --color-warning-light: #fef3c7;
  --color-error: #ef4444;
  --color-error-light: #fee2e2;
  
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.08);
}

/* ── 卡片层级系统 ── */
.card {
  background: #fff;
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s, border-color 0.2s;
}
.card:hover {
  border-color: var(--color-gray-400);
  box-shadow: var(--shadow-md);
}

.card-primary {
  border-color: var(--color-primary);
  border-width: 1px;
  box-shadow: 0 1px 4px rgba(99,102,241,0.08);
}

.card-secondary {
  background: var(--color-gray-50);
  border-color: var(--color-gray-200);
}
.card-secondary:hover {
  border-color: var(--color-gray-400);
}

.card-warning {
  border-color: #fbbf24;
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
}

/* ── 统一输入框焦点 ── */
input:focus, textarea:focus, select:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.1) !important;
  outline: none;
}

/* ── 统一按钮 ── */
.btn-primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(99,102,241,0.25);
}
.btn-primary:hover { box-shadow: 0 4px 16px rgba(99,102,241,0.35); transform: translateY(-1px); }
.btn-outline { border-color: var(--color-gray-200); }
.btn-outline:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-light); }
.btn-success { background: var(--color-success) !important; border-color: transparent !important; color: #fff !important; }
.btn-warning { background: var(--color-warning) !important; border-color: transparent !important; color: #fff !important; }
.btn-ghost:hover { background: var(--color-gray-100); }

/* ── Badge ── */
.badge { display: inline-flex; align-items: center; padding: 0.15rem 0.55rem; border-radius: 6px; font-size: 0.72rem; font-weight: 600; }
.badge-success { background: var(--color-success-light); color: #065f46; }
.badge-info { background: #dbeafe; color: #1e40af; }
.badge-error { background: var(--color-error-light); color: #991b1b; }
.badge-warning { background: var(--color-warning-light); color: #92400e; }
.badge-ghost { background: var(--color-gray-100); color: var(--color-gray-500); }

/* ── 表格 ── */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; padding: 0.6rem 0.8rem; font-size: 0.8rem; color: var(--color-gray-500); border-bottom: 2px solid var(--color-gray-200); }
.table td { padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--color-gray-100); font-size: 0.9rem; }
.table tr:hover td { background: #fafbff; }

/* ── 进度条 ── */
.progress { background: var(--color-gray-200); border-radius: 4px; height: 8px; overflow: hidden; }
.progress-primary { background: linear-gradient(90deg, var(--color-primary), #8b5cf6); }

/* ── 滚动条 ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-gray-400); border-radius: 3px; }

/* ── 动画 ── */
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in { animation: fadeIn 0.4s ease-out; }

/* ── 打印 ── */
@media print {
  nav, .btn, footer { display: none !important; }
  .card { box-shadow: none !important; border: 1px solid var(--color-gray-200) !important; }
}

/* ── 移动端适配 ── */
@media (max-width: 640px) {
  .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .btn { white-space: nowrap; }
  .card.p-5, .card.p-6 { padding: 1rem !important; }
  .card-body.p-5, .card-body.p-6, .card-body.p-8 { padding: 1rem !important; }
  .text-sm { font-size: 0.8rem; }
}