/* ==========================================================
   settings.css — 설정 페이지 스타일
   Precision Cycling Design System 적용
   ========================================================== */

/* ===== 페이지 제목 ===== */
.settings-page-title {
  font-size: 28px;   /* 기존 24px → 28px: --text-display(디자인 시스템 페이지 타이틀 기준) 통일 */
  font-weight: 700;
  color: var(--color-text-primary, #1A1A1F);
  margin: var(--space-8, 32px) 0 var(--space-6, 24px);
  letter-spacing: var(--tracking-tight, -0.02em);
}

/* ===== 설정 카드 ===== */
.settings-card {
  background: var(--color-surface, #FFFFFF);
  border-radius: 0;                              /* 직선 처리 */
  padding: 28px var(--space-8, 32px);
  box-shadow: var(--shadow-1, 0 1px 2px rgba(0,0,0,0.04), 0 2px 8px rgba(0,0,0,0.06));
  max-width: 800px;
  border-left: 3px solid var(--color-primary, #D55E00); /* 액센트 라인 */
}

.settings-card-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary, #1A1A1F);
  margin: 0 0 var(--space-2, 8px);
}

.settings-card-desc {
  font-size: 13px;
  color: var(--color-text-secondary, #6B6B76);
  margin: 0 0 var(--space-6, 24px);
  line-height: 1.5;
}

/* 카드 내 섹션 제목 */
.settings-sub-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary, #1A1A1F);
  margin: 28px 0 var(--space-3, 12px);
  padding-top: var(--space-5, 20px);
  border-top: 1px solid var(--color-border-light, #EDEDF0);
}

.settings-sub-title:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* ===== 입력 폼 (공통) ===== */
.maxhr-form,
.rider-static-form,
.bike-form {
  display: flex;
  gap: var(--space-4, 16px);
  align-items: flex-end;
  margin-bottom: var(--space-6, 24px);
  flex-wrap: wrap;
}

.maxhr-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 4px);
}

.maxhr-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary, #6B6B76);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* 설정 입력 필드 */
.maxhr-input {
  padding: var(--space-2, 8px) var(--space-3, 12px);
  border: 1px solid var(--color-border-strong, #C8C8D0);
  border-radius: 0;                              /* 직선 처리 */
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  color: var(--color-text-primary, #1A1A1F);
  outline: none;
  transition: border-color var(--transition-normal, 0.2s ease);
  width: 160px;
  min-height: var(--touch-min, 44px);            /* 터치 타겟 최소 크기 */
}

.maxhr-input:focus {
  border-color: var(--color-primary, #D55E00);
  box-shadow: 0 2px 0 0 var(--color-primary, #D55E00);
}

select.maxhr-input {
  cursor: pointer;
  background: var(--color-surface, #FFFFFF);
}

/* 추가 버튼 */
.maxhr-add-btn {
  padding: var(--space-2, 8px) var(--space-5, 20px);
  background: var(--color-primary, #D55E00);
  color: #fff;
  border: none;
  border-radius: 0;                              /* 직선 처리 */
  font-size: 14px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: background var(--transition-normal, 0.2s ease);
  white-space: nowrap;
  min-height: var(--touch-min, 44px);            /* 터치 타겟 최소 크기 */
  letter-spacing: var(--tracking-wide, 0.02em);
}

.maxhr-add-btn:hover {
  background: var(--color-primary-hover, #CC3C08);
}

/* ===== 로딩 ===== */
.settings-loading {
  display: flex;
  justify-content: center;
  padding: var(--space-10, 40px) 0;
}

/* ===== 테이블 (공통) ===== */
.maxhr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.maxhr-table thead th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary, #6B6B76);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px var(--space-3, 12px);
  border-bottom: 2px solid var(--color-border, #E2E2E8);
}

.maxhr-table tbody td {
  padding: var(--space-3, 12px);
  border-bottom: 1px solid var(--color-border-light, #EDEDF0);
  color: var(--color-text-primary, #1A1A1F);
}

.maxhr-value-cell {
  font-weight: 600;
}

.maxhr-zones-cell {
  font-size: 12px;
  color: var(--color-text-secondary, #6B6B76);
}

.maxhr-action-cell {
  text-align: right;
}

/* 삭제 버튼 */
.maxhr-delete-btn {
  padding: var(--space-1, 4px) var(--space-3, 12px);
  background: none;
  border: 1px solid var(--color-border-strong, #C8C8D0);
  border-radius: 0;                              /* 직선 처리 */
  font-size: 12px;
  color: var(--color-text-secondary, #6B6B76);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all var(--transition-normal, 0.2s ease);
  min-height: var(--touch-min, 44px);
  display: inline-flex;
  align-items: center;
}

.maxhr-delete-btn:hover {
  border-color: var(--color-red, #DC3545);
  color: var(--color-red, #DC3545);
}

/* ===== 빈 상태 ===== */
.maxhr-empty {
  text-align: center;
  padding: var(--space-10, 40px) 0;
  color: var(--color-text-secondary, #6B6B76);
  font-size: 14px;
}

/* ===== 자전거 프로필 ===== */

/* 자전거 타입 뱃지 — 직선 처리 */
.bike-type-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 0;                              /* 직선 처리 */
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  letter-spacing: var(--tracking-wide, 0.02em);
}

/* 자전거 타입별 컬러 */
.bike-type-road       { background: var(--sport-color-ride, #D55E00); }  /* Ride 프라이머리 */
.bike-type-mtb        { background: #4A7C2E; }
.bike-type-gravel     { background: #8B6914; }
.bike-type-tt         { background: #2E5FA1; }
.bike-type-minivelo   { background: #9B59B6; }
.bike-type-virtualride { background: #6B6B76; }
.bike-type-e-bikeride  { background: #22A352; }

/* 기본 자전거 뱃지 */
.bike-default-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 0;                              /* 직선 처리 */
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: var(--color-primary, #D55E00);
}

/* 기본 설정 버튼 */
.bike-set-default-btn {
  padding: 2px 10px;
  background: none;
  border: 1px solid var(--color-border-strong, #C8C8D0);
  border-radius: 0;                              /* 직선 처리 */
  font-size: 12px;
  color: var(--color-text-secondary, #6B6B76);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all var(--transition-normal, 0.2s ease);
}

.bike-set-default-btn:hover {
  border-color: var(--color-primary, #D55E00);
  color: var(--color-primary, #D55E00);
}

/* 수정 버튼 */
.bike-edit-btn {
  padding: var(--space-1, 4px) var(--space-3, 12px);
  background: none;
  border: 1px solid var(--color-border-strong, #C8C8D0);
  border-radius: 0;                              /* 직선 처리 */
  font-size: 12px;
  color: var(--color-text-secondary, #6B6B76);
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: all var(--transition-normal, 0.2s ease);
  margin-right: var(--space-1, 4px);
  min-height: var(--touch-min, 44px);
  display: inline-flex;
  align-items: center;
}

.bike-edit-btn:hover {
  border-color: var(--color-primary, #D55E00);
  color: var(--color-primary, #D55E00);
}

/* 취소 버튼 */
.bike-cancel-btn {
  padding: var(--space-2, 8px) var(--space-5, 20px);
  background: none;
  border: 1px solid var(--color-border-strong, #C8C8D0);
  border-radius: 0;                              /* 직선 처리 */
  font-size: 14px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  color: var(--color-text-secondary, #6B6B76);
  cursor: pointer;
  transition: all var(--transition-normal, 0.2s ease);
  white-space: nowrap;
  min-height: var(--touch-min, 44px);
}

.bike-cancel-btn:hover {
  border-color: var(--color-text-primary, #1A1A1F);
  color: var(--color-text-primary, #1A1A1F);
}

/* 편집 모드: 저장 버튼 스타일 */
.bike-form.editing .maxhr-add-btn {
  background: #2E7D32;
}

.bike-form.editing .maxhr-add-btn:hover {
  background: #256628;
}

/* 편집 중인 테이블 행 하이라이트 */
.bike-editing-row td {
  background: var(--color-primary-light, #FFF0E8);
}

.bike-editing-row td:first-child {
  border-left: 3px solid var(--color-primary, #D55E00);
  padding-left: 9px;
}

/* ===== 체중 히스토리 펼치기/닫기 토글 버튼 ===== */
.maxhr-toggle-btn {
  padding: var(--space-2, 8px) var(--space-5, 20px);
  background: none;
  border: 1px solid var(--color-border-strong, #C8C8D0);
  border-radius: 0;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  color: var(--color-text-secondary, #6B6B76);
  cursor: pointer;
  transition: all var(--transition-normal, 0.2s ease);
  white-space: nowrap;
  min-height: var(--touch-min, 44px);
  display: inline-flex;
  align-items: center;
}

.maxhr-toggle-btn:hover {
  border-color: var(--color-primary, #D55E00);
  color: var(--color-primary, #D55E00);
}

/* ===== 체중 히스토리 인라인 편집 ===== */

/* 테이블 행 안에서 쓰는 컴팩트 입력 필드 */
.maxhr-inline-input {
  padding: 4px 8px;
  border: 1px solid var(--color-border-strong, #C8C8D0);
  border-radius: 0;
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  color: var(--color-text-primary, #1A1A1F);
  background: var(--color-surface, #FFFFFF);
  outline: none;
  min-height: 32px;
  transition: border-color var(--transition-normal, 0.2s ease);
  vertical-align: middle;
}

.maxhr-inline-input:focus {
  border-color: var(--color-primary, #D55E00);
  box-shadow: 0 2px 0 0 var(--color-primary, #D55E00);
}

.maxhr-inline-date { width: 130px; }
.maxhr-inline-kg   { width: 80px; }

/* 인라인 저장 버튼 (초록) */
.maxhr-save-edit-btn {
  padding: 4px 12px;
  background: #2E7D32;
  color: #fff;
  border: none;
  border-radius: 0;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: background var(--transition-normal, 0.2s ease);
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
}

.maxhr-save-edit-btn:hover { background: #256628; }

/* 인라인 취소 버튼 */
.maxhr-cancel-edit-btn {
  padding: 4px 12px;
  background: none;
  border: 1px solid var(--color-border-strong, #C8C8D0);
  border-radius: 0;
  font-size: 12px;
  font-family: 'Inter', sans-serif;
  color: var(--color-text-secondary, #6B6B76);
  cursor: pointer;
  transition: all var(--transition-normal, 0.2s ease);
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}

.maxhr-cancel-edit-btn:hover {
  border-color: var(--color-text-primary, #1A1A1F);
  color: var(--color-text-primary, #1A1A1F);
}

/* ===== 반응형 ===== */
@media (max-width: 768px) {
  .settings-card {
    padding: var(--space-5, 20px) var(--space-4, 16px);
  }

  .maxhr-form,
  .rider-static-form,
  .bike-form {
    flex-direction: column;
    align-items: stretch;
  }

  .maxhr-input {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .settings-page-title {
    font-size: 20px;
    margin: var(--space-5, 20px) 0 var(--space-4, 16px);
  }

  .maxhr-table {
    font-size: 13px;
  }

  .maxhr-table thead th,
  .maxhr-table tbody td {
    padding: var(--space-2, 8px);
  }
}