/* ============================================================
   SHARED UI COMPONENTS — 全站共用组件
   ============================================================ */

/* CARD */
.card { background: var(--surface-gradient); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xs); }
.card-header { padding: var(--spacing-md) var(--spacing-lg); border-bottom: 1px solid var(--border); font-weight: 600; font-size: var(--text-lg); display: flex; align-items: center; justify-content: space-between; }

/* TABS */
.tab-nav { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: var(--spacing-lg); }
.tab-nav .tab-item { padding: 12px 24px; font-size: var(--text-base); color: var(--text-secondary); cursor: pointer; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all var(--transition); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.tab-nav .tab-item:hover { color: var(--primary); background: var(--primary-light); }
.tab-nav .tab-item.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.sub-tabs { display: flex; gap: 0; margin-bottom: var(--spacing-lg); border-bottom: 1px solid var(--border); align-items: center; }
.sub-tab { padding: 8px 20px; font-size: var(--text-sm); color: var(--text-secondary); cursor: pointer; transition: all var(--transition); border-radius: var(--radius-sm); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.sub-tab:hover { color: var(--primary); background: var(--primary-light); }
.sub-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.sub-tab-count { color: var(--text-muted); margin-left: 2px; font-weight: 400; }
.sub-tabs .sub-right { margin-left: auto; font-size: var(--text-sm); color: var(--primary); }

/* FILTER ROW + SEARCH BAR */
.filter-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-md); margin-bottom: var(--spacing-sm); }
.filter-row .fl-label { font-size: var(--text-sm); color: var(--text-secondary); font-weight: 500; white-space: nowrap; }
.filter-row input { height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--text-sm); outline: none; transition: border-color var(--transition); }
.filter-row input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(56,132,220,.12); }
.filter-row input[type="date"] { width: 148px; }
.filter-row .fl-sep { color: var(--text-muted); margin: 0 2px; white-space: nowrap; }
.filter-row .fl-right { display: flex; gap: var(--spacing-sm); white-space: nowrap; }
.filter-row .fl-btn-bar { width: 100%; display: flex; gap: var(--spacing-sm); }
.search-bar { display: flex; align-items: center; gap: var(--spacing-xs); margin-left: auto; }
.search-bar input { height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--text-sm); outline: none; width: 160px; }
.search-bar input:focus { border-color: var(--primary); }
.search-bar .btn { height: 32px; }

/* TABLE */
.table-wrap { overflow-x: auto; }
table.data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); }
table.data-table thead th { background: linear-gradient(180deg, #F8F9FB 0%, var(--gray-50) 100%); color: var(--text-secondary); font-weight: 600; padding: 11px var(--spacing-lg); text-align: center; white-space: nowrap; font-size: var(--text-sm); border-bottom: 2px solid var(--border); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
table.data-table thead th:first-child { border-radius: var(--radius-sm) 0 0 0; }
table.data-table thead th:last-child { border-radius: 0 var(--radius-sm) 0 0; }
table.data-table tbody td { padding: 14px var(--spacing-lg); text-align: center; border-bottom: 1px solid var(--border-light); color: var(--text); transition: background var(--transition); }
table.data-table tbody tr { transition: background var(--transition); }
table.data-table tbody tr:last-child td { border-bottom: none; }
table.data-table tbody tr:hover td { background: var(--primary-light); }
/* 订单明细：去除行悬停高亮 */
table.data-table.no-hover tbody tr:hover td { background: transparent; }
/* 订单明细：培训计划之间的细分隔线 */
table.data-table tr.plan-sep td { padding: 0; height: 0; line-height: 0; border-bottom: 1px solid var(--border); }

/* BADGES */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: var(--text-xs); font-weight: 500; white-space: nowrap; border-radius: var(--radius-sm); border: 1px solid var(--border); line-height: 1.6; min-height: 22px; }
.badge-pending, .badge-warning { background: var(--warning-light); color: #A04000; border: 1px solid #F5CBA7; }
.badge-fail, .badge-red { background: var(--danger-light); color: #A01010; border: 1px solid #F5B7B7; }
.badge-success { background: var(--success-light); color: #1B5E20; border: 1px solid #A5D6A7; }
.badge-info { background: var(--primary-light); color: var(--primary); border: 1px solid var(--primary-border); }
.badge-gray { background: var(--gray-50); color: var(--text-secondary); border: 1px solid var(--gray-200); }
.badge .badge-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
.badge-pending .badge-dot, .badge-warning .badge-dot { background: var(--warning); }
.badge-fail .badge-dot, .badge-red .badge-dot { background: var(--danger); }
.badge-success .badge-dot { background: var(--success); }

/* ALERT */
.alert { padding: 12px var(--spacing-lg); font-size: var(--text-sm); margin-bottom: var(--spacing-lg); border-radius: var(--radius); display: flex; align-items: center; gap: var(--spacing-md); }
.alert-warning { background: var(--warning-light); color: #A04000; border: 1px solid #F5CBA7; }
.alert-info { background: var(--primary-light); color: var(--primary); border: 1px solid var(--primary-border); }
.alert .alert-icon { font-size: 18px; flex-shrink: 0; }
.alert .alert-close { margin-left: auto; cursor: pointer; font-size: 18px; color: var(--text-muted); transition: color var(--transition); }
.alert .alert-close:hover { color: var(--text); }
.alert .alert-tips { margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(160,64,0,.2); line-height: 1.9; }
.alert .alert-tips div:first-child { font-weight: 600; }
.alert .alert-tips strong { color: inherit; }

/* PAGINATION */
.pagination { display: flex; justify-content: center; align-items: center; gap: 0; padding: var(--spacing-xl) 0 var(--spacing-sm); }
.pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 8px; border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--text); border: 1px solid var(--border); transition: all var(--transition); margin: 0 2px; }
.pagination a:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.pagination .current { background: linear-gradient(180deg, var(--blue-400) 0%, var(--primary) 100%); color: #fff; border-color: var(--blue-600); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.pagination .disabled { color: var(--text-muted); pointer-events: none; }

/* BUTTONS */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 7px 18px; font-size: var(--text-sm); font-weight: 500; cursor: pointer; border: 1px solid transparent; border-radius: var(--radius); transition: all var(--transition); line-height: 1.5; white-space: nowrap; background: var(--surface); }
.btn-primary { background: linear-gradient(180deg, var(--blue-400) 0%, var(--primary) 100%); color: #fff; border-color: var(--blue-600); box-shadow: 0 1px 2px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.15); }
.btn-primary:hover { background: linear-gradient(180deg, var(--primary) 0%, var(--blue-600) 100%); transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.1); }
.btn-outline { color: var(--primary); border-color: var(--primary); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.btn-outline:hover { background: var(--primary-light); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.btn-sm { padding: 3px 12px; font-size: var(--text-xs); border-radius: var(--radius-sm); }
.btn-danger { background: linear-gradient(180deg, #DC3545 0%, var(--danger) 100%); color: #fff; border-color: #B71C1C; box-shadow: 0 1px 2px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.15); }
.btn-danger:hover { background: linear-gradient(180deg, #C62828 0%, #B71C1C 100%); box-shadow: 0 2px 6px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.1); }

/* TOOLTIP */
.tip-float { position: fixed; z-index: 99999; pointer-events: none; padding: 8px 14px; font-size: 13px; font-weight: 400; background: var(--gray-800); color: #fff; border-radius: var(--radius); white-space: nowrap; box-shadow: var(--shadow-lg); letter-spacing: 0; opacity: 0; transition: opacity .08s ease; }
.tip-float.show { opacity: 1; }
.tip-float.copiable { pointer-events: auto; user-select: all; white-space: normal; word-break: break-all; }
.tip-float::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--gray-800); }

/* TAB PANEL DISPLAY */
.tab-content { display: none; }
.tab-content.active { display: block; }

/* COURSE CENTER FILTER — 课程中心筛选面板（每条件一行，文字+下划线交互） */
.cc-filter-row {
  display: flex; align-items: center; gap: var(--spacing-md);
  padding: 8px 4px;
}
.cc-filter-row + .cc-filter-row { border-top: 1px solid var(--gray-100); }
.cc-filter-row .filter-label {
  flex-shrink: 0; width: 5.5em; text-align: right; padding-right: var(--spacing-md);
  font-size: var(--text-base); font-weight: 600; color: var(--text);
  line-height: 1;
}
/* 选项：无边框纯文字，hover 下划线，选中蓝色下划线 */
.cc-filter-row .filter-opt {
  padding: 4px 10px; border-radius: 0;
  background: transparent; color: var(--text-secondary);
  font-size: var(--text-base); line-height: 1.6;
  text-decoration: none;
  background-image: linear-gradient(var(--primary), var(--primary));
  background-repeat: no-repeat;
  background-size: 0 2px; background-position: 50% 100%;
  transition: color var(--transition), background-size var(--transition);
}
.cc-filter-row .filter-opt:hover {
  color: var(--primary);
  background-size: 100% 2px;
}
.cc-filter-row .filter-opt.active {
  color: var(--primary); font-weight: 600;
  background-size: 100% 2px;
}
/* 选项容器：flex 均匀换行，避免 inline 错乱 */
.cc-filter-row .filter-options {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 2px 8px; min-width: 0;
}
/* 专业个数多时折叠：超过前 N 项隐藏，展开后显示 */
.cc-filter-row .filter-opt.is-fold { display: none; }
.cc-filter-row .filter-options.expanded .filter-opt.is-fold { display: inline-block; }
/* 专业列表：flex 换行，每个选项固定为「容器宽÷11」的等宽格，间距由 gap 控制。
   名称过长的专业由 span2 放宽为内容宽度（不截断），下一项从同一行紧邻继续，不再按 2 格位铺满。
   span2 由 _shared/inc/majorFilter.jsp 按实际渲染宽度判定后添加 */
.cc-filter-row .filter-options.j-major-options {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px 8px;
}
.cc-filter-row .filter-options.j-major-options .filter-opt {
  width: calc((100% - 8px * 10) / 11);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: center; box-sizing: border-box;
}
.cc-filter-row .filter-options.j-major-options .filter-opt.span2 {
  width: auto;
}
.cc-filter-row .filter-opt-more {
  color: var(--primary); font-weight: 600; cursor: pointer;
}
.cc-filter-row .filter-opt-more:hover { color: var(--primary); background-size: 100% 2px; }
.cc-filter-row .cc-search {
  flex: 1; max-width: 480px; padding: 0 16px;
  height: 40px; border-radius: 999px;
  font-size: var(--text-base); color: var(--text);
  border: 1px solid var(--border); background: var(--surface);
  box-sizing: border-box;
  outline: none; transition: all var(--transition);
}
.cc-filter-row .cc-search:hover, .cc-filter-row .cc-search:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px var(--blue-50);
}
/* 搜索按钮：与输入框等高的大方样式（保留 btn-primary 渐变，兼容现有主题） */
.cc-filter-row .btn.cc-search-btn {
  height: 40px; padding: 0 26px; border-radius: 999px;
  font-size: var(--text-base); font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap; flex-shrink: 0;
}