/**
 * Fixperts - 매뉴얼 탭 스타일
 * PDF 뷰어 위에 표시되는 매뉴얼 타입 탭 (shadcn pill 스타일)
 */

/* 매뉴얼 탭 래퍼 (매뉴얼 탭 + 뷰 모드 탭) - 카드 헤더 역할 */
.manual-tabs-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--color-bg-primary);
  border-bottom: var(--border-standard);
  gap: 12px;
}

/* 탭 컨테이너 - 공통 스타일은 core/components.css에서 관리 */
.manual-tabs {
  flex-shrink: 1;
  min-width: 0;
}

/* 탭 버튼 - 공통 스타일은 core/components.css에서 관리 */
/* 여기서는 매뉴얼 탭 전용 스타일만 정의 */

/* 탭 구분선 */
.manual-tab-separator {
  display: inline-block;
  color: var(--color-text-tertiary);
  margin: 0 4px;
}

/* 활성화된 탭 추가 스타일 */
.manual-tab.active .manual-tab-separator {
  color: var(--color-text-secondary);
}

/* 다운로드 버튼 */
.manual-download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--border-radius-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: color var(--transition-base);
  font-size: var(--font-size-base);
  text-decoration: none;
  line-height: 1;
  vertical-align: middle;
}

/* 다운로드 버튼 개별 호버 */
.manual-download-btn:not(.disabled):hover {
  color: var(--color-secondary);
}

/* 활성화된 탭의 다운로드 버튼 기본 색상 */
.manual-tab.active .manual-download-btn:not(.disabled) {
  color: var(--color-text-primary);
}

/* 활성화된 탭의 다운로드 버튼 호버 */
.manual-tab.active .manual-download-btn:not(.disabled):hover {
  color: var(--color-secondary);
}

.manual-download-btn.disabled {
  color: var(--color-text-tertiary);
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}

.manual-download-btn:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
  z-index: 1;
}

.manual-download-icon {
  display: inline-block;
  line-height: 1;
  transform: translateY(1px);
}

/* 반응형 */
@media (max-width: 768px) {
  .manual-tabs-wrapper {
    padding: 12px 15px 10px;
    gap: 8px;
  }

  .manual-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    min-width: 0;
  }

  .manual-tabs::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
  }
}

/* 480px 이하: 긴 탭 이름 유지, 뷰 모드 탭 텍스트 숨김 */
@media (max-width: 480px) {
  .manual-tabs-wrapper {
    padding: 10px 10px 8px;
    gap: 6px;
  }

  .manual-tabs {
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    min-width: 0;
  }

  .manual-tabs::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
  }

  .manual-tab-text {
    font-size: var(--font-size-xs);
    display: inline-block;
  }
}

/* 420px 이하: 짧은 탭 이름만 표시 (data-short) */
@media (max-width: 420px) {
  .manual-tab-text {
    font-size: var(--font-size-xs);
    display: none;
  }

  .manual-tab::before {
    content: attr(data-short);
    display: inline-block;
    font-size: var(--font-size-xs);
  }
}