/* App-level overrides and utilities
 *
 * 被引用文件：
 *   - index.html（通过 <link> 加载）
 *   - js/presentation/components/real-time-clock.js（动态注入 .simple-digital-clock 样式）
 *   - js/presentation/views/dashboard.js（部分弹窗内联样式依赖这些工具类）
 *
 * 依赖文件：
 *   - css/tokens.css（CSS 变量定义）
 */

.icon {
  font-size: 12px;
}

/* ==========================================================================
   Button Base + Variants
   提取公共属性到分组选择器，各变体只保留差异化颜色/阴影。
   被引用方：
     - js/presentation/views/dashboard.js 在 .table-buttons 中生成这些按钮
     - layout.css 中的 .table-buttons button 会覆盖部分基础属性
   ========================================================================== */
.import-btn,
.clear-btn,
.date-btn,
.export-btn,
.import-score-btn,
.history-btn {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
}

.import-btn:hover,
.clear-btn:hover,
.date-btn:hover,
.export-btn:hover,
.import-score-btn:hover,
.history-btn:hover {
  transform: translateY(-2px);
}

/* 变体：导入数据（紫色） */
.import-btn {
  background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
  color: white;
  box-shadow: 0 4px 6px rgba(139, 92, 246, 0.3);
}

.import-btn:hover {
  box-shadow: 0 6px 12px rgba(139, 92, 246, 0.4);
  background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
}

/* 变体：清理/删除（红色） */
.clear-btn {
  background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
  color: white;
  box-shadow: 0 4px 6px rgba(239, 68, 68, 0.3);
}

.clear-btn:hover {
  box-shadow: 0 6px 12px rgba(239, 68, 68, 0.4);
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
}

/* 变体：日期选择（橙色渐变，默认状态） */
.date-btn {
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
  color: #78350f;
  box-shadow: 0 4px 6px rgba(245, 158, 11, 0.3);
}

.date-btn:hover {
  box-shadow: 0 6px 12px rgba(245, 158, 11, 0.4);
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
  color: white;
}

/* 变体：导出（蓝色） */
.export-btn {
  background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%);
  color: white;
  box-shadow: 0 4px 6px rgba(14, 165, 233, 0.3);
}

.export-btn:hover {
  box-shadow: 0 6px 12px rgba(14, 165, 233, 0.4);
  background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%);
}

/* 变体：导入比分（绿色） */
.import-score-btn {
  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
  color: white;
  box-shadow: 0 4px 6px rgba(16, 185, 129, 0.3);
}

.import-score-btn:hover {
  box-shadow: 0 6px 12px rgba(16, 185, 129, 0.4);
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
}

/* 变体：历史文件（橙色，与 date-btn 同色） */
.history-btn {
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
  color: #78350f;
  box-shadow: 0 4px 6px rgba(245, 158, 11, 0.3);
}

.history-btn:hover {
  box-shadow: 0 6px 12px rgba(245, 158, 11, 0.4);
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
  color: white;
}

/* ==========================================================================
   Header Inline Element Styles
   从 index.html 中迁移而来，避免内联样式。
   ========================================================================== */

/* 实时时钟容器（h1 内行内排列） */
.clock-inline {
  display: inline-block;
  margin-right: 20px;
  vertical-align: middle;
}

/* 标题栏中的日期选择按钮（蓝色轻量样式，覆盖 .date-btn 默认渐变） */
.date-picker-inline {
  margin-left: 15px;
  font-size: 13px;
  padding: 4px 12px;
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 8px;
}

/* 日期展示徽章（绿色高亮） */
.date-badge {
    font-size: 26px;
    font-weight: 700;
    color: #34d399;
    margin-left: 10px;
    background: rgba(16, 185, 129, 0.15);
    padding: 6px 15px;
    border-radius: 20px;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

/* 空日期徽章（灰色提示） */
.date-badge-empty {
    color: #94a3b8 !important;
    background: rgba(148, 163, 184, 0.1) !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
}

/* ==========================================================================
   Text Color Utilities（用于 legend 图标等）
   ========================================================================== */
.text-success { color: #34d399; }
.text-warning { color: #fbbf24; }
.text-danger  { color: #f87171; }
.text-purple  { color: #a78bfa; }

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.u-text-center {
  text-align: center;
}

/**
 * .u-hidden — 不使用 !important，以便 JS 可通过 element.style.display 覆盖。
 * 被引用方：
 *   - index.html 中 #puterLoginBtn / #puterLogoutBtn 初始隐藏
 *   - js/puter-integration.js 中 updateUI() 通过 classList.toggle('u-hidden') 控制显隐
 */
.u-hidden {
  display: none;
}

/**
 * .is-hidden — 保留旧版（带 !important），用于不需要 JS 动态覆盖的场景。
 * 未来新代码优先使用 .u-hidden。
 */
.is-hidden {
  display: none !important;
}