/* ============================================================
   锻炼打卡 - Exercise Check-in Styles
   配合健康花园主题色系
   ============================================================ */

/* ===== 选项卡 ===== */
.ex-tabs{display:flex;gap:4px;margin-bottom:var(--space-lg);border-bottom:2px solid var(--border);padding-bottom:0}
.ex-tab{padding:8px 18px;border:none;background:none;font-size:14px;font-weight:600;color:var(--text-muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all var(--duration) var(--ease);border-radius:0}
.ex-tab:hover{color:var(--primary)}
.ex-tab.active{color:var(--primary);border-bottom-color:var(--primary)}

.ex-tab-content{display:none}
.ex-tab-content.active{display:block;animation:pageIn .3s var(--ease-out)}

/* ===== 日期选择栏 ===== */
.ex-date-bar{display:flex;align-items:center;gap:8px;margin-bottom:var(--space-lg)}
.ex-date-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-secondary);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--duration) var(--ease);flex-shrink:0}
.ex-date-btn:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-bg)}
.ex-date-btn:active{transform:scale(.92)}
.ex-date-input{flex:1;padding:8px 12px;border:1px solid var(--border);border-radius:10px;font-size:14px;color:var(--text);background:var(--bg-card);font-family:var(--font-sans);max-width:200px}
.ex-date-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-bg)}
.ex-today-btn{padding:6px 16px;font-size:12px;border-radius:16px;border:none;background:var(--primary);color:#fff;font-weight:600;cursor:pointer;transition:all var(--duration) var(--ease);flex-shrink:0}
.ex-today-btn:hover{background:var(--primary-dark)}

/* ===== 打卡摘要 ===== */
.ex-summary{display:flex;gap:var(--space);margin-bottom:var(--space-lg);flex-wrap:wrap}
.ex-summary-card{background:var(--bg-card);border-radius:var(--radius-lg);padding:var(--space-md) var(--space-lg);border:1px solid var(--border-light);flex:1;min-width:120px}
.ex-summary-card .ex-sum-label{font-size:11px;color:var(--text-muted);font-weight:500;margin-bottom:4px}
.ex-summary-card .ex-sum-value{font-size:22px;font-weight:700;color:var(--primary);line-height:1.2}
.ex-summary-card .ex-sum-unit{font-size:12px;color:var(--text-muted);font-weight:400;margin-left:2px}

/* ===== 打卡列表 ===== */
.ex-checkin-item{display:flex;align-items:center;gap:var(--space-md);padding:var(--space) var(--space-lg);background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius);margin-bottom:var(--space-xs);transition:all var(--duration) var(--ease)}
.ex-checkin-item:hover{box-shadow:var(--shadow-sm)}
.ex-checkin-item.has-data{border-color:var(--primary-light);background:var(--primary-bg)}
.ex-checkin-info{flex:1;min-width:0}
.ex-checkin-name{font-size:14px;font-weight:600;color:var(--text)}
.ex-checkin-cat{font-size:11px;color:var(--text-muted);margin-top:2px}
.ex-checkin-count{font-size:20px;font-weight:700;color:var(--primary);min-width:60px;text-align:center;line-height:1.2}
.ex-checkin-count .ex-count-unit{font-size:11px;color:var(--text-muted);font-weight:400}
.ex-checkin-controls{display:flex;align-items:center;gap:8px;flex-shrink:0}
.ex-count-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-secondary);font-size:18px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--duration) var(--ease)}
.ex-count-btn:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-bg)}
.ex-count-btn:active{transform:scale(.88)}
.ex-count-btn.plus{background:var(--primary);color:#fff;border-color:var(--primary)}
.ex-count-btn.plus:hover{background:var(--primary-dark)}
.ex-count-input{width:70px;text-align:center;border:1.5px solid var(--border);border-radius:10px;padding:8px 6px;font-size:16px;font-weight:600;color:var(--text);background:var(--bg);font-family:var(--font-sans);transition:all var(--duration) var(--ease)}
.ex-count-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-bg);background:var(--bg-card)}
.ex-count-input::-webkit-inner-spin-button,.ex-count-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.ex-count-input{-moz-appearance:textfield}
.ex-count-unit-label{font-size:13px;color:var(--text-muted);font-weight:500;white-space:nowrap}

/* ===== 统计页 ===== */
.ex-range-bar{display:flex;gap:8px;margin-bottom:var(--space-lg)}
.ex-range-btn{padding:8px 20px;border-radius:16px;border:1px solid var(--border);background:var(--bg-card);font-size:13px;font-weight:600;color:var(--text-secondary);cursor:pointer;transition:all var(--duration) var(--ease)}
.ex-range-btn:hover{border-color:var(--primary);color:var(--primary)}
.ex-range-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}

.ex-stats-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--space);margin-bottom:var(--space-lg)}
.ex-stat-card{background:var(--bg-card);border-radius:var(--radius);padding:var(--space-md);border:1px solid var(--border-light);text-align:center}
.ex-stat-card .ex-stat-label{font-size:11px;color:var(--text-muted);margin-bottom:6px}
.ex-stat-card .ex-stat-value{font-size:24px;font-weight:700;color:var(--text);line-height:1.2}
.ex-stat-card .ex-stat-sub{font-size:11px;color:var(--text-muted);margin-top:2px}

/* 统计表格 */
.ex-stats-table{width:100%;border-collapse:collapse;font-size:13px}
.ex-stats-table th{padding:8px 10px;text-align:left;font-weight:600;color:var(--text-muted);border-bottom:2px solid var(--border);font-size:12px;white-space:nowrap}
.ex-stats-table td{padding:10px;border-bottom:1px solid var(--border-light);color:var(--text)}
.ex-stats-table tr:hover td{background:var(--bg-card-alt)}
.ex-stats-table .ex-table-num{text-align:right;font-weight:600;color:var(--primary);font-variant-numeric:tabular-nums}
.ex-stats-table .ex-table-total{font-weight:700;border-top:2px solid var(--border);background:var(--primary-bg)}

/* 日历热力图风格 */
.ex-heatmap{display:flex;gap:2px;flex-wrap:wrap;margin-bottom:var(--space)}
.ex-heat-day{width:14px;height:14px;border-radius:3px;background:var(--border-light);transition:transform .15s var(--ease)}
.ex-heat-day:hover{transform:scale(1.3)}
.ex-heat-day.level-1{background:rgba(91,140,90,.25)}
.ex-heat-day.level-2{background:rgba(91,140,90,.5)}
.ex-heat-day.level-3{background:rgba(91,140,90,.75)}
.ex-heat-day.level-4{background:var(--primary)}
.ex-heat-legend{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--text-muted);margin-bottom:var(--space-md)}

/* ===== 动作管理页 ===== */
.ex-manage-header{margin-bottom:var(--space-lg)}
.ex-item-row{display:flex;align-items:center;gap:var(--space-md);padding:var(--space) var(--space-lg);background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius);margin-bottom:var(--space-xs)}
.ex-item-row:hover{box-shadow:var(--shadow-sm)}
.ex-item-info{flex:1}
.ex-item-name{font-size:14px;font-weight:600;color:var(--text)}
.ex-item-meta{font-size:12px;color:var(--text-muted);margin-top:2px}
.ex-item-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;background:var(--primary-bg);color:var(--primary);margin-left:8px}
.ex-item-actions{display:flex;gap:6px;flex-shrink:0}
.ex-item-btn{padding:5px 12px;border-radius:8px;border:1px solid var(--border);background:var(--bg-card);font-size:12px;cursor:pointer;color:var(--text-secondary);transition:all var(--duration) var(--ease)}
.ex-item-btn:hover{border-color:var(--primary);color:var(--primary)}
.ex-item-btn.danger:hover{border-color:var(--danger);color:var(--danger);background:var(--danger-bg)}

/* ===== 模态框 ===== */
.ex-modal-mask{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(42,49,40,.4);z-index:300;display:none;align-items:center;justify-content:center;padding:var(--space-xl)}
.ex-modal-mask.show{display:flex;animation:fadeIn .2s var(--ease)}
.ex-modal{background:var(--bg-card);border-radius:var(--radius-lg);width:100%;max-width:420px;max-height:80vh;overflow-y:auto;box-shadow:var(--shadow-lg);padding:var(--space-xl)}
.ex-modal-title{font-size:18px;font-weight:700;font-family:var(--font-serif);margin-bottom:var(--space-lg);color:var(--text)}
.ex-modal-close{position:relative;float:right;top:-8px;right:-8px;border:none;background:none;font-size:20px;color:var(--text-muted);cursor:pointer;line-height:1}
.ex-modal-close:hover{color:var(--text)}
.ex-modal-body{margin-bottom:var(--space-lg)}
.ex-modal-footer{display:flex;justify-content:flex-end;gap:8px}

/* ===== 空状态 ===== */
.ex-empty{text-align:center;padding:48px 20px;color:var(--text-muted)}
.ex-empty .ex-empty-icon{font-size:40px;margin-bottom:12px}
.ex-empty .ex-empty-text{font-size:14px}

/* ===== 响应式 ===== */
@media(max-width:640px){
  .ex-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .ex-tab{white-space:nowrap;padding:8px 14px}
  .ex-summary{flex-direction:column}
  .ex-checkin-item{flex-wrap:wrap;padding:var(--space)}
  .ex-checkin-controls{width:100%;justify-content:flex-end;margin-top:var(--space-xs)}
  .ex-count-input{flex:0 1 80px;max-width:80px}
  .ex-range-bar{overflow-x:auto}
  .ex-range-btn{white-space:nowrap}
  .ex-stats-summary{grid-template-columns:repeat(2,1fr)}
  .ex-stats-table{font-size:12px}
  .ex-stats-table th,.ex-stats-table td{padding:6px 4px}
}