/* ============================================
   出海行 CRM - UI升级样式 v2.0
   深海蓝主题 · 专业商务风
   ============================================ */

/* CSS变量覆盖 - 深海蓝主题 */
:root {
  --bg-primary: #f0f2f5;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f8fafc;
  --bg-hover: #f3f4f6;
  --bg-active: #eff6ff;
  --border-color: #e5e7eb;
  --border-light: #f3f4f6;
  --text-primary: #1f2937;
  --text-secondary: #4b5563;
  --text-muted: #6b7280;
  --accent: #3b82f6;
  --accent-hover: #2563eb;
  --accent-light: rgba(59, 130, 246, 0.12);
  --primary: #3b82f6;
  --primary-hover: #2563eb;
  --info: #3b82f6;
  --bg-card: #ffffff;
  /* 深海蓝主题色 */
  --deep-blue-50: #eff6ff;
  --deep-blue-100: #dbeafe;
  --deep-blue-200: #bfdbfe;
  --deep-blue-300: #93c5fd;
  --deep-blue-400: #60a5fa;
  --deep-blue-500: #3b82f6;
  --deep-blue-600: #2563eb;
  --deep-blue-700: #1d4ed8;
  --deep-blue-800: #1e40af;
  --deep-blue-900: #1e3a5f;
  --deep-blue-950: #172554;
  /* 顶部导航渐变 */
  --topbar-gradient: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 100%);
  /* 按钮渐变 */
  --btn-primary-gradient: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  --btn-success-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --btn-warning-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  --btn-danger-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  /* 卡片色条 */
  --card-blue-bar: linear-gradient(90deg, #3b82f6 0%, #06b6d4 100%);
  --card-green-bar: linear-gradient(90deg, #10b981 0%, #34d399 100%);
  --card-orange-bar: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
  --card-purple-bar: linear-gradient(90deg, #8b5cf6 0%, #a78bfa 100%);
  --card-red-bar: linear-gradient(90deg, #ef4444 0%, #f87171 100%);
  /* 阴影 */
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-btn: 0 2px 8px rgba(59, 130, 246, 0.3);
  --shadow-btn-hover: 0 4px 12px rgba(59, 130, 246, 0.4);
  /* 圆角 */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
}

/* ========== 顶部导航栏 ========== */
.topbar {
  background: var(--topbar-gradient) !important;
  height: 60px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.topbar .logo {
  color: #fff !important;
}

.topbar .logo-text {
  color: #fff !important;
  font-weight: 600 !important;
}

.topbar .search-box,
.topbar input[type="text"].search,
.topbar .topbar-search {
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 20px !important;
  color: #fff !important;
}

.topbar .search-box::placeholder,
.topbar input::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}

.topbar .notification,
.topbar .topbar-icon,
.topbar .icon-btn {
  color: #fff !important;
}

.topbar .user-info,
.topbar .current-user {
  color: #fff !important;
}

.topbar .user-avatar,
.topbar .avatar {
  border: 2px solid rgba(255, 255, 255, 0.3);
}

/* ========== 侧边栏菜单 ========== */
.sidebar {
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.06) !important;
  width: 220px !important;
}

.sidebar .sidebar-item,
.sidebar .nav-item,
.sidebar .menu-item {
  padding: 10px 20px !important;
  font-size: 14px !important;
  color: #4b5563 !important;
  border-left: 3px solid transparent !important;
  transition: all 0.2s ease !important;
}

.sidebar .sidebar-item:hover,
.sidebar .nav-item:hover,
.sidebar .menu-item:hover {
  background: #f3f4f6 !important;
  color: #1e3a5f !important;
}

.sidebar .sidebar-item.active,
.sidebar .nav-item.active,
.sidebar .menu-item.active {
  background: linear-gradient(90deg, #eff6ff 0%, transparent 100%) !important;
  color: #1e3a5f !important;
  font-weight: 600 !important;
  border-left-color: #3b82f6 !important;
}

.sidebar .sidebar-icon,
.sidebar .nav-icon,
.sidebar .menu-icon {
  font-size: 18px !important;
  width: 24px !important;
  text-align: center !important;
}

.sidebar .sidebar-group-title,
.sidebar .nav-group-title,
.sidebar .menu-group-title {
  padding: 16px 20px 8px !important;
  font-size: 11px !important;
  color: #6b7280 !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* ========== 主内容区 ========== */
.main,
.content,
.main-content {
  margin-left: 0 !important;
  padding: 24px !important;
  background: #f0f2f5 !important;
}

.page-header,
.content-header {
  margin-bottom: 20px !important;
}

.page-title,
.content-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #1f2937 !important;
}

.page-subtitle,
.content-subtitle {
  font-size: 13px !important;
  color: #6b7280 !important;
  margin-top: 4px !important;
}

/* ========== 卡片通用样式 ========== */
.card,
.panel,
.module-card,
.stat-card,
.data-card,
.info-card {
  background: #fff !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow) !important;
  border: none !important;
  transition: all 0.3s ease !important;
  overflow: hidden !important;
}

.card:hover,
.panel:hover,
.module-card:hover {
  box-shadow: var(--shadow-hover) !important;
}

.card-header,
.panel-header,
.module-header {
  padding: 16px 20px !important;
  border-bottom: 1px solid #f3f4f6 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.card-title,
.panel-title,
.module-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1f2937 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.card-body,
.panel-body,
.module-body {
  padding: 20px !important;
}

/* 卡片顶部色条 */
.card.has-top-bar,
.stat-card {
  position: relative !important;
}

.card.has-top-bar::before,
.stat-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
}

.stat-card.blue::before { background: var(--card-blue-bar) !important; }
.stat-card.green::before { background: var(--card-green-bar) !important; }
.stat-card.orange::before { background: var(--card-orange-bar) !important; }
.stat-card.purple::before { background: var(--card-purple-bar) !important; }
.stat-card.red::before { background: var(--card-red-bar) !important; }

/* ========== 数据统计卡片 ========== */
.stats-grid,
.stat-cards,
.dashboard-stats {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(195px, 1fr)) !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
}

.stat-card {
  padding: 20px !important;
  cursor: default !important;
}

.stat-card:hover {
  transform: translateY(-2px) !important;
}

.stat-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 12px !important;
}

.stat-label {
  font-size: 13px !important;
  color: #6b7280 !important;
  font-weight: 500 !important;
}

.stat-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
}

.stat-icon.blue { background: #eff6ff !important; }
.stat-icon.green { background: #ecfdf5 !important; }
.stat-icon.orange { background: #fffbeb !important; }
.stat-icon.purple { background: #f5f3ff !important; }
.stat-icon.red { background: #fef2f2 !important; }

.stat-value {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #1f2937 !important;
  margin-bottom: 6px !important;
}

.stat-trend {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 12px !important;
}

.stat-trend.up { color: #10b981 !important; }
.stat-trend.down { color: #ef4444 !important; }

/* ========== 按钮样式 ========== */
.btn,
button,
.button,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-warning,
.btn-danger {
  padding: 8px 18px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  border: none !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.btn-primary,
button.primary,
.button.primary {
  background: var(--btn-primary-gradient) !important;
  color: #fff !important;
  box-shadow: var(--shadow-btn) !important;
}

.btn-primary:hover,
button.primary:hover,
.button.primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: var(--shadow-btn-hover) !important;
}

.btn-secondary,
button.secondary,
.button.secondary {
  background: #fff !important;
  color: #4b5563 !important;
  border: 1px solid #d1d5db !important;
}

.btn-secondary:hover,
button.secondary:hover,
.button.secondary:hover {
  background: #f9fafb !important;
  border-color: #9ca3af !important;
}

.btn-success,
button.success,
.button.success {
  background: var(--btn-success-gradient) !important;
  color: #fff !important;
}

.btn-warning,
button.warning,
.button.warning {
  background: var(--btn-warning-gradient) !important;
  color: #fff !important;
}

.btn-danger,
button.danger,
.button.danger {
  background: var(--btn-danger-gradient) !important;
  color: #fff !important;
}

.btn-sm,
button.sm,
.button.sm {
  padding: 4px 10px !important;
  font-size: 12px !important;
}

/* ========== 表格样式 ========== */
.data-table,
table.data,
.table {
  width: 100% !important;
  border-collapse: collapse !important;
}

.data-table th,
table.data th,
.table th {
  text-align: left !important;
  padding: 12px 16px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #6b7280 !important;
  background: #f9fafb !important;
  border-bottom: 1px solid #e5e7eb !important;
}

.data-table td,
table.data td,
.table td {
  padding: 12px 16px !important;
  font-size: 13px !important;
  color: #374151 !important;
  border-bottom: 1px solid #f3f4f6 !important;
}

.data-table tr:hover,
table.data tr:hover,
.table tr:hover {
  background: #f9fafb !important;
}

/* ========== 徽章/标签 ========== */
.badge,
.tag,
.label {
  padding: 3px 10px !important;
  border-radius: 12px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  display: inline-block !important;
}

.badge.success,
.tag.success,
.label.success { background: #d1fae5 !important; color: #065f46 !important; }
.badge.warning,
.tag.warning,
.label.warning { background: #fef3c7 !important; color: #92400e !important; }
.badge.info,
.tag.info,
.label.info { background: #dbeafe !important; color: #1e40af !important; }
.badge.danger,
.tag.danger,
.label.danger { background: #fee2e2 !important; color: #991b1b !important; }
.badge.secondary,
.tag.secondary,
.label.secondary { background: #f3f4f6 !important; color: #4b5563 !important; }

/* ========== 进度条 ========== */
.progress,
.progress-bar-container {
  height: 6px !important;
  background: #e5e7eb !important;
  border-radius: 3px !important;
  overflow: hidden !important;
}

.progress-bar,
.progress-fill {
  height: 100% !important;
  border-radius: 3px !important;
  transition: width 0.3s ease !important;
}

.progress-bar.blue,
.progress-fill.blue { background: linear-gradient(90deg, #3b82f6, #06b6d4) !important; }
.progress-bar.green,
.progress-fill.green { background: linear-gradient(90deg, #10b981, #34d399) !important; }
.progress-bar.orange,
.progress-fill.orange { background: linear-gradient(90deg, #f59e0b, #fbbf24) !important; }
.progress-bar.red,
.progress-fill.red { background: linear-gradient(90deg, #ef4444, #f87171) !important; }

/* ========== 表单样式 ========== */
.form-group {
  margin-bottom: 16px !important;
}

.form-label,
label {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  margin-bottom: 6px !important;
}

.form-input,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="date"],
select,
textarea {
  width: 100% !important;
  padding: 10px 12px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  transition: all 0.2s ease !important;
  background: #fff !important;
}

.form-input:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

.form-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
}

/* ========== 筛选栏 ========== */
.filter-bar,
.search-bar,
.toolbar {
  display: flex !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

.filter-input,
.filter-select {
  padding: 8px 12px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  width: 180px !important;
  background: #fff !important;
}

/* ========== 排行榜 ========== */
.rank-list {
  list-style: none !important;
}

.rank-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid #f3f4f6 !important;
}

.rank-item:last-child {
  border-bottom: none !important;
}

.rank-num {
  width: 24px !important;
  height: 24px !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.rank-num.top1 { background: linear-gradient(135deg, #fbbf24, #f59e0b) !important; color: #fff !important; }
.rank-num.top2 { background: linear-gradient(135deg, #d1d5db, #9ca3af) !important; color: #fff !important; }
.rank-num.top3 { background: linear-gradient(135deg, #fb923c, #ea580c) !important; color: #fff !important; }
.rank-num.normal { background: #f3f4f6 !important; color: #6b7280 !important; }

.rank-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #fff !important;
}

.rank-info {
  flex: 1 !important;
}

.rank-name {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #1f2937 !important;
}

.rank-dept {
  font-size: 11px !important;
  color: #6b7280 !important;
}

.rank-value {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1f2937 !important;
}

/* ========== 内容网格 ========== */
.content-grid,
.two-col-grid {
  display: grid !important;
  grid-template-columns: 2fr 1fr !important;
  gap: 16px !important;
  margin-bottom: 20px !important;
}

/* ========== 标签页切换 ========== */
.tabs,
.tab-group {
  display: flex !important;
  gap: 4px !important;
}

.tab,
.tab-item {
  padding: 4px 12px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  color: #6b7280 !important;
  transition: all 0.2s !important;
}

.tab:hover,
.tab-item:hover {
  background: #f3f4f6 !important;
}

.tab.active,
.tab-item.active {
  background: #eff6ff !important;
  color: #2563eb !important;
  font-weight: 600 !important;
}

/* ========== 时间线 ========== */
.timeline {
  position: relative !important;
  padding-left: 30px !important;
}

.timeline::before {
  content: '' !important;
  position: absolute !important;
  left: 8px !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 2px !important;
  background: #e5e7eb !important;
}

.timeline-item {
  position: relative !important;
  margin-bottom: 20px !important;
}

.timeline-item::before {
  content: '' !important;
  position: absolute !important;
  left: -26px !important;
  top: 4px !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: #3b82f6 !important;
  border: 3px solid #fff !important;
  box-shadow: 0 0 0 2px #3b82f6 !important;
}

.timeline-item.done::before {
  background: #10b981 !important;
  box-shadow: 0 0 0 2px #10b981 !important;
}

.timeline-item.current::before {
  background: #f59e0b !important;
  box-shadow: 0 0 0 2px #f59e0b !important;
}

.timeline-time {
  font-size: 12px !important;
  color: #6b7280 !important;
  margin-bottom: 4px !important;
}

.timeline-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1f2937 !important;
  margin-bottom: 4px !important;
}

.timeline-desc {
  font-size: 13px !important;
  color: #6b7280 !important;
}

/* ========== 响应式（统计卡列数全部由 auto-fit 自适应，不再人为固定列数） ========== */
/* 桌面端(>768px)隐藏汉堡菜单按钮：通用 button 的 inline-flex 不再让它误显示，PC 永远是常驻侧边栏布局 */
.menu-toggle { display: none !important; }

/* 窄屏 PC / 小尺寸笔记本(769~991px)：侧边栏收窄，但仍是完整桌面布局，不出现移动底部导航 */
@media (max-width: 991px) and (min-width: 769px) {
  .sidebar { width: 198px !important; }
  .sidebar .sidebar-item,
  .sidebar .nav-item,
  .sidebar .menu-item { padding: 9px 12px !important; font-size: 13px !important; }
  .sidebar-header { padding: 14px !important; }
}

@media (max-width: 768px) {
  /* 手机端：汉堡按钮显示，侧边栏抽屉式展开到合适宽度 */
  .menu-toggle { display: inline-flex !important; }
  .sidebar { width: 248px !important; }
  .main,
  .content,
  .main-content { margin-left: 0 !important; }
  .stats-grid,
  .stat-cards,
  .dashboard-stats,
  .attendance-stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  }
  .content-grid,
  .two-col-grid {
    grid-template-columns: 1fr !important;
  }
  .form-row {
    grid-template-columns: 1fr !important;
  }
}


/* ============================================
   修复：纯图标操作按钮被通用 button 的 padding(8px 18px) 挤占，
   导致内部 SVG 被 flex 压缩成 0 宽度、只剩空白方块
   ============================================ */
.action-btn { padding: 6px 8px !important; flex-shrink: 0; }
.action-btn > svg { flex-shrink: 0; display: block; }

@media (max-width: 768px) {
  /* 移动端：按钮不再固定 36px 死宽度，改为最小 36px、内容自适应，
     纯图标保持方形，带文字(详情/公海)不再被挤成竖排 */
  .action-btn {
    width: auto !important;
    min-width: 36px;
    height: 36px;
    padding: 0 8px !important;
    gap: 3px !important;
    white-space: nowrap;
  }
}

/* ============================================
   全局修复：通用 button 的 padding(8px 18px!important) + inline-flex 会把
   固定尺寸图标按钮内的 SVG 压缩成 0 宽度（铃铛/主题切换/垃圾桶等图标消失）。
   1) 所有按钮内 SVG 禁止收缩，永远保持自身图标尺寸；
   2) 纯图标按钮重置横向内边距，避免 18px 挤占图标；
   3) 小按钮恢复紧凑内边距。
   ============================================ */
button svg,
.btn svg,
a[class*="btn"] svg,
[role="button"] svg,
.topbar-btn svg,
.theme-toggle svg { flex-shrink: 0 !important; }

.topbar-btn { padding: 0 !important; }
.theme-toggle { padding: 8px !important; }
.menu-toggle { padding: 4px !important; }
.fab { padding: 0 !important; }
.modal-close,
.icon-btn { padding: 6px !important; }

/* 小按钮：覆盖通用 button 的 18px 横向内边距，恢复紧凑 */
.btn-sm { padding-left: 10px !important; padding-right: 10px !important; }

/* ========== 顶部深蓝栏：图标清晰度 / 搜索键位 修正 ========== */
/* 铃铛、汉堡菜单在深蓝底上改用浅色，避免看不清 */
.topbar .topbar-btn,
.topbar .menu-toggle {
  color: rgba(255, 255, 255, 0.9) !important;
}
.topbar .topbar-btn svg,
.topbar .menu-toggle svg { color: inherit !important; }
.topbar .topbar-btn:hover,
.topbar .menu-toggle:hover {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}
/* 消息未读红点：深蓝底上加白描边，更醒目、边界清楚 */
.topbar .notif-badge {
  box-shadow: 0 0 0 2px #1e3a5f;
  border: 1.5px solid #ffffff;
  font-weight: 800;
}
/* 搜索快捷键 “/” 做成精致小键，贴合浅色搜索框，不再是突兀方块 */
.topbar .search-kbd {
  background: #eef1f6;
  border: 1px solid #d9dee6;
  border-bottom-width: 2px;
  color: #93a0b3;
  border-radius: 5px;
  font-weight: 700;
  margin-right: 4px;
}
@media (max-width: 620px) {
  .topbar .search-kbd { display: none !important; }
}

/* 顶栏页面标题：深蓝渐变底上改用白色，避免深色字发暗、不显眼（对全部页面生效） */
.topbar .page-title,
.topbar #pageTitle {
  color: #ffffff !important;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}