/* === 显微CRM — 海洋蓝主题 v1.0 === */
/* Ocean Teal: sidebar #0d2b3e, accent #0ea5e9, bg #f0f9ff */

/* ---- CSS Variables ---- */
:root {
  /* Primary Palette */
  --crm-primary: #0ea5e9;
  --crm-primary-hover: #0284c7;
  --crm-primary-light: #e0f2fe;
  --crm-primary-dark: #0369a1;

  /* Sidebar */
  --crm-sidebar-bg: #0d2b3e;
  --crm-sidebar-text: #94a3b8;
  --crm-sidebar-active: #0ea5e9;
  --crm-sidebar-hover: rgba(255,255,255,0.06);
  --crm-sidebar-divider: rgba(255,255,255,0.08);

  /* Backgrounds */
  --crm-bg-page: #f0f9ff;
  --crm-bg-card: #ffffff;
  --crm-bg-surface: #f8fafc;
  --crm-bg-input: #ffffff;

  /* Text */
  --crm-text-primary: #0f172a;
  --crm-text-secondary: #64748b;
  --crm-text-muted: #94a3b8;
  --crm-text-on-primary: #ffffff;

  /* Borders */
  --crm-border: #e2e8f0;
  --crm-border-light: #f1f5f9;

  /* Semantic Colors */
  --crm-success: #10b981;
  --crm-success-bg: #ecfdf5;
  --crm-danger: #ef4444;
  --crm-danger-bg: #fef2f2;
  --crm-warning: #f59e0b;
  --crm-warning-bg: #fffbeb;
  --crm-info: #0ea5e9;
  --crm-info-bg: #e0f2fe;

  /* Borders & Radius */
  --crm-radius: 8px;
  --crm-radius-lg: 12px;
  --crm-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);

  /* Sidebar width */
  --crm-sidebar-width: 220px;
}

/* ---- Global Overrides ---- */
body {
  background: var(--crm-bg-page) !important;
  color: var(--crm-text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}

/* ---- Buttons ---- */
.btn-primary, button.btn-primary, a.btn-primary {
  background: var(--crm-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--crm-radius) !important;
  padding: 8px 20px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background 0.15s, transform 0.1s !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
}
.btn-primary:hover, button.btn-primary:hover {
  background: var(--crm-primary-hover) !important;
  transform: translateY(-1px);
}

.btn-secondary, button.btn-secondary {
  background: #fff !important;
  color: var(--crm-text-primary) !important;
  border: 1px solid var(--crm-border) !important;
  border-radius: var(--crm-radius) !important;
  padding: 8px 20px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: border-color 0.15s !important;
  text-decoration: none !important;
}
.btn-secondary:hover {
  border-color: var(--crm-primary) !important;
}

.btn-danger, button.btn-danger {
  background: var(--crm-danger) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--crm-radius) !important;
  padding: 8px 20px !important;
  font-size: 14px !important;
  cursor: pointer !important;
}

/* ---- Cards ---- */
.card, .crm-card {
  background: var(--crm-bg-card) !important;
  border: 1px solid var(--crm-border) !important;
  border-radius: var(--crm-radius-lg) !important;
  padding: 20px 24px !important;
  box-shadow: var(--crm-shadow) !important;
}

/* ---- Inputs ---- */
input, select, textarea {
  border: 1px solid var(--crm-border) !important;
  border-radius: var(--crm-radius) !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  color: var(--crm-text-primary) !important;
  background: var(--crm-bg-input) !important;
  outline: none !important;
  transition: border-color 0.15s !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--crm-primary) !important;
  box-shadow: 0 0 0 2px var(--crm-primary-light) !important;
}

/* ---- Badges / Tags ---- */
.badge, .role-badge, .tag {
  font-size: 12px !important;
  padding: 2px 10px !important;
  border-radius: 100px !important;
  font-weight: 500 !important;
}
.badge-success { background: var(--crm-success-bg); color: var(--crm-success); }
.badge-danger { background: var(--crm-danger-bg); color: var(--crm-danger); }
.badge-warning { background: var(--crm-warning-bg); color: var(--crm-warning); }
.badge-info { background: var(--crm-info-bg); color: var(--crm-primary); }

/* ---- Tables ---- */
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th {
  text-align: left; padding: 10px 12px;
  border-bottom: 2px solid var(--crm-border);
  font-size: 13px; color: var(--crm-text-secondary);
  font-weight: 500;
}
.data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--crm-border-light);
}

/* ---- Links ---- */
a { color: var(--crm-primary); text-decoration: none; }
a:hover { color: var(--crm-primary-hover); text-decoration: underline; }

/* ---- Status Bar (navbar/top bar) ---- */
.navbar {
  background: var(--crm-bg-card) !important;
  border-bottom: 1px solid var(--crm-border) !important;
  padding: 0 24px !important;
  height: 56px !important;
}
.navbar-brand { color: var(--crm-text-primary) !important; font-weight: 500 !important; }

/* ---- Page headers ---- */
.page-title { font-size: 18px; font-weight: 500; color: var(--crm-text-primary); }
.page-meta { font-size: 13px; color: var(--crm-text-secondary); margin-top: 4px; }
.section-title { font-size: 15px; font-weight: 500; color: var(--crm-text-primary); }

/* ---- Loading spinner ---- */
.spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--crm-border);
  border-top-color: var(--crm-primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* ---- Modal ---- */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(15,23,42,0.4);
  display: flex; align-items: center; justify-content: center;
  z-index: 10000;
}
.modal-content {
  background: var(--crm-bg-card);
  border-radius: var(--crm-radius-lg);
  padding: 24px;
  max-width: 520px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
.modal-title { font-size: 16px; font-weight: 500; margin-bottom: 16px; }

/* ---- Stats card ---- */
.stat-card {
  background: var(--crm-bg-card);
  border: 1px solid var(--crm-border);
  border-radius: var(--crm-radius-lg);
  padding: 16px 20px;
  box-shadow: var(--crm-shadow);
}
.stat-card .stat-number { font-size: 28px; font-weight: 500; color: var(--crm-text-primary); line-height: 1.2; }
.stat-card .stat-label { font-size: 13px; color: var(--crm-text-secondary); margin-top: 4px; }

/* ---- Pagination ---- */
.pagination { display: flex; gap: 4px; }
.pagination button {
  padding: 6px 12px; border: 1px solid var(--crm-border);
  background: #fff; border-radius: 6px; cursor: pointer; font-size: 13px;
  color: var(--crm-text-primary);
}
.pagination button.active {
  background: var(--crm-primary); color: #fff; border-color: var(--crm-primary);
}